Bootcamp
Search…
8.POCE.1: Car Rental

Introduction

Create a React app that rents cars. Use 2 repos, 1 for frontend and 1 for backend. Use Create React App, useContext and useReducer in the frontend. Use Express, Sequelize, and Postgres for the backend.

Feature Requirements

  1. 1.
    Create the following views in the car rental app. All views other than the homepage should be in a modal. Consider using the modal code from 8.2: Higher-Order Components.
    1. 1.
      Page with list of cars to rent (homepage)
    2. 2.
      View for individual car to rent (user must select rental dates before confirming)
    3. 3.
      View for rental confirmation
    4. 4.
      View for rental update or cancellation
  2. 2.
    To simplify our rental app, all pickup and dropoffs will be from Changi Airport, and cars are only bookable by calendar days, i.e. a car is either booked or not booked on a specific day.
  3. 3.
    Users can filter cars by which days they wish to rent.
  4. 4.
    Feel free to ignore user login for this app if it makes it easier. Anyone can book, update, or cancel reservations.

Suggested Frontend Components

All Views

  1. 1.
    Navbar with link to manage booking (update or cancel rental) given booking ID

Homepage

  1. 1.
    List of cars to rent
  2. 2.
    Filter UI to filter by rental dates

View for Individual Car to Rent

  1. 1.
    Car details
  2. 2.
    Date selection UI (pre-populated if filtered on home page)
  3. 3.
    Link to confirm booking

View for Rental Confirmation

  1. 1.
    Booking ID
  2. 2.
    Rental car and date details
  3. 3.
    Link to homepage

View for Rental Update or Cancellation

  1. 1.
    Booking ID
  2. 2.
    Rental car and date details
  3. 3.
    Form to update rental dates if car is available at new dates
  4. 4.
    Link for rental cancellation
  5. 5.
    Link to homepage

Suggested Database Tables

  1. 1.
    cars. Use the faker NPM package in a seeder file to create a pre-populated set of cars to rent. Use a minimal set of car details for simplicity. Assume all cars can be booked on all days.
  2. 2.
    bookings. Store booking details including user email, foreign key association to relevant car, start date, and end date.
The latest version of Faker.js (6.6.6) is not functional. Since then the open source community has put up a replacement. Use the following command to install the working version.
npm install @faker-js/faker -D

Starter Code

Frontend:

Create your own repo with Create React App

Backend:

Please fork from the repo below: