Exam #1: "Car Rental"
Student: s280124 Castelli Enrico
React client application routes
- Route
/
: home page with view of unique available cars; two filters allow to choose multiple brands and categories dynamically - Route
/login
: login form - Route
/logout
: redirects to home page after deleting the authentication cookie - Route
/resetpassword
: demo, no mail server required in this project - Route
/rent
: configurator form, dynamically displays the number of available cars for a period of time and a category, plus the price given a set of parameters; allows to proceed to payment once filled - Route
/payment
: payment form, dynamically shows "Pay now" button once all details are entered - Route
/rentals
: allows an authenticated user to see all their reservations, and to cancel their future reservations
REST API server
- POST
/api/user/login
- request parameters: none
- request body:
{email, password}
- response body:
{id, name, email}
- POST
/api/user/logout
- request parameters: none
- request body: none
- response body: none
- GET
/api/cars/:carId
- request parameters:
carId
- request body: none
- response body: one car object
{id, category, brand, model, optional[description, kilometers, year, fuel, value, kmperlitre, passengers, stickshift]}
- request parameters:
- GET
/api/cars
- request parameters: none
- request body: none
- response body: list of car objects
[{id, category, brand, model, optional[description, kilometers, year, fuel, value, kmperlitre, passengers, stickshift]}, ...]
- GET
/api/user
(check if user is logged in)- request parameters: none
- request body: none
- response body:
{id, name, email}
- POST
/api/rentals/:rentalId
(cancel rental)- request parameters:
rentalId
- request body: none
- response body: none
- request parameters:
- POST
/api/rentals
- request parameters: none
- request body:
{startingDay, endDay, carCategory, driversAge, driversAgeSpecific, extraDrivers, extraDriversSpecific, estimatedKilometers, insurance, carId, userId, canceled, amount}
- response body:
{newId}
- GET
/api/rentals/:userId
- request parameters:
userId
- request body: none
- response body: list of rentals objects
[{id, startingDay, endDay, carCategory, driversAge, driversAgeSpecific, extraDrivers, extraDriversSpecific, estimatedKilometers, insurance, carId, userId}, ...]
- request parameters:
- GET
/api/rentals
- request parameters: none
- request body: none
- response body: list of rentals objects
[{id, startingDay, endDay, carCategory, driversAge, driversAgeSpecific, extraDrivers, extraDriversSpecific, estimatedKilometers, insurance, carId, userId}, ...]
- POST
/api/payment
- request parameters: none
- request body:
{"details": {fullName, cardNumber, CVV, amount}, "rental": {startingDay, endDay, carCategory, driversAge, extraDrivers, estimatedKilometers, insurance, userId}}
- response body: none
Server database
- Table
CARS
- containsid, category, brand, model, [description, kilometers, year, fuel, value, kmperlitre, passengers, stickshift]
where the fields between [] were initially added for future use, and:category
can be the strings "A", "B", "C", "D", "E"brand
is a stringmodel
is a string
- Table
RENTALS
- containsid, startingday, endday, carcategory, driversage, driversagespecific, extradrivers, extradriversspecific, estimatedkilometers, insurance, carid, userid, canceled, amount
where:startingday
andendday
are strings for out-of-the-box compatibility with client-side librarymoment.js
carcategory
can be the strings "A", "B", "C", "D", "E"driversage
is a tri-state integer (0, 1, 2) for under 25, between 25 and 65, over 65driversagespecific
is the integer age valueextradrivers
is an integer boolean (0, 1)extradriversspecific
is the integer number of extra driversestimatedkilometers
is a tri-state integer (0, 1, 2) for under 50, between 50 and 150, over 150insurance
is an integer boolean (0, 1)canceled
is an integer boolean (0, 1)amount
is a numeric value
- Table
USERS
- containsid, email, name, hash
, where:email
is a stringname
is an optional stringhash
is the string corresponding to the user's password encrypted withbcrypt
Main React Components
App
(inApp.js
): maintains cars and user-related state variables and manages routesCarsList
(incomponents/CarsList.js
): displays the list of available cars in the home pageCar
(incomponents/carslist/Car.js
): displays information about a single carLoginForm
(incomponents/LoginForm.js
): displays the login formResetPasswordForm
(incomponents/ResetPasswordForm.js
): displays a demo pageConfiguratorForm
(incomponents/ConfiguratorForm.js
): displays the rental configurator formPaymentForm
(incomponents/PaymentForm.js
): displays the payment formRentalsList
(incomponents/RentalsList.js
): manages the authenticated user's rentals state and separates them into the future, current, and past categoriesRentalsTable
(incomponents/rentalslist/RentalsTable.js
): displays theRentalsList
data in a responsive tableRental
(incomponents/rentalslist/Rental.js
): displays a single row ofRentalTable
Header
(incomponents/Header.js
): displays the app header with contextual buttonsFooter
(incomponents/Footer.js
): displays a demo app footer
Screenshot
Test users
Format: email, password (is frequent customer)
- jd@sacredheart.com, ImNoSuperman (frequent customer)
- elliot.reid@gmail.com, blond3d0ctor
- chocolate.bear@yahoo.com, Izzie2008
- carla.espinoza@hotmail.com, dominican35
- percival.ulysses.cox@icloud.com, Jackie
- b.kelso@sacredheart.com, Johnny1942
Known warnings
You may see in the console some warnings related to the AutosizeInput
and Select
components of the react-select
library, used in the CarsList
component, due to its use of some deprecated code. This has been tested to not impact the functionality of the web application in any tangible way.
When the authentication cookie gets deleted, either at user logout or at expiration time, a warning will be logged to the console. This has been ignored following a professor's reply on Slack.
A warning about findDOMNode
deprecation in StrictMode
may appear in the console when loading the website or when loading a user's rentals: this originates in the react-bootstrap
's Modal
used to display dialogs in the RentalsList
component, and has been tested to not cause any noticeable issues.
Requirements
This project was tested on macOS 10.15 and Ubuntu 20.04 with Firefox 77. All features work correctly in Firefox, and it has been tested that some features don't work as expected in Chrome (e.g. required fields are not required by the browser) and Safari (e.g. not all images are correctly loaded). These issues have not been fixed since multi-platform compatibility was not explicitly required for this exam.
It is expected that the nodemon
package is installed globally on the target machine (npm i -g nodemon
), and it was not included in the dependencies section of the server's package.json
.