Skip to main content

Booking System

Description​

This assignment is primarily focused on Full-Stack development. Web Application where user can finding the best tour in terms of price, place and schedule. User can also make online booking from the available tours.

Mockups​

Tap into the Figma link for a comprehensive view of project mockups and UI design.

Requirements​

Search mock for Landing Page

Search Tour​

  • User should be able to search from available tours.
  • User shoule be able to search based on Location, Price range and Date.
  • User should be able to search using one or all of the above available options.
  • Search button should remain disable until there is any query in the search.
  • User should also be able to filter the tours by selecting any popular searches.

Search mock for Landing Page

  • User should be able to see all the tours that matches the search query.
  • Each tour in the search result should have the following information:
    • Title / Location
    • Description
    • Price
    • Days
  • User should be able to see a blank slate when no result found.

Search mock for Tours List

All Tours​

  • User should be able to see all the available tours from the navigation in the header

Search mock for Tours List

Tour Details​

  • User should be able to select any tour from the result and check the tour details.
  • Specific details i.e destination, departure time/location and arival information should be part of this page.
  • User should be able to see itinerary schedule of the tour.
  • User should be able to see weather information of selected tour days.

Search mock for Tours List

Book Tour​

  • User should be able to book the tour.
  • All the input fields for the booking form should have the required validation checks.
  • User shouldn't be able to book the tour unless all the required details are provided.

Search mock for Tours List

Update / Cancel / View Booked Tour Details​

  • User can see all of the booked tours using the My Tours button in the top navigation

Search mock for Tours List

  • User should be able to make updates in the details of booked tour e.g, phone number etc.

Search mock for Tours List

  • User should also be able to cancel the tour.
  • User shouldn't be able to cancel the booking, if tour departure is in next 3 days.

Search mock for Tours List

Essentials for Server​

  • You can use NodeJs and Express for the Backend of the application
  • MongoDB can be used for the database.

Sample Schema​

​ - Here is a sample Schema for Tour to store in MongoDB. Feel free to make changes as per your needs.

const tourSchema = mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  city: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  price: {
    type: String,
    required: true,
  },
  duration: {
    type: String,
    required: true,
  },
  startDate: {
    type: String,
    required: true,
  },
  endDate: {
    type: String,
    required: true,
  },
  facilities: [{ type: String, required: true }],
});

Success metrics​

  • A complete UI of the application build using React/Node having good UX.
  • Follow best practices for React and Typescript.
  • Deploy the app on vercel

Stretched goals​

Tech Stack​

  • React
  • Typescript
  • Node
  • Redux
  • CSS

Due Period​

  • Assignment should be submitted around 7-8 working days.

Submission Guidelines​

  • Must create a separate review branch for implementing suggestions.