Book a Car Frontend

[Estete9]

Project requirements

BACKEND PR

NOTE
Please make sure of the follwoing:

• The file .env with the content REACT_APP_BASE_URL=http://localhost:4000 exists in the app's root directory

Basics

• You should follow the layout of the provided design. You should change only the titles, descriptions, and photos - in order to create a website about something other than motorcycles.
• Select a theme for your website - is it going to be a website for booking doctor appointments, booking online classes, or something else?

Features

Depending on your team size you are required to complete a set number of features. Take inventory of your team and see where you fit in the following table:

Team size	# of required features
5	11

If your team has finished the required features, but you'd still like to complete more you are free to continue with the optional ones.

Note: If your team decides to implement optional features, make sure they work as expected (just like the required ones). This will be considered in your final evaluation!

Core features - Required for every team size

1. The user logs in to the website, only by typing the username (a proper authenticated login is a requirement if your group is made of 5 people).

2. In the navigation panel, the user can see links to:

   • Motorcycles/doctors/classes/items that you selected as a theme.
   • "Reserve" form.
   • "My reservations".
   • "Add motorcycle/doctor/class/item that you selected as a theme" (the link is visible to everybody).
   • "Delete motorcycle/doctor/class/item that you selected as a theme" (the link is visible to everybody).

3. On the main page, the user can see a list of motorcycles/doctors/classes/items that you selected as a theme.

4. When the user selects a specific item, they can see the details page with its full description (skip the "Rotate image" button).

   • In the details page, the user can click the "Reserve" button (in the design you can see the "Configure" button - please replace it with the "Reserve" button).

5. When the user clicks the "Add item" link in the navigation panel they can see a form for adding a new item.

6. Make the app responsive, creating both mobile and desktop versions.

Additional features - Required for teams with 3-4 & 5 members (optional for others)

7. When the user clicks the "Delete item" link in the navigation panel they can see a list of all items with title and "Delete" button.
   • When the user clicks the "Delete" button, the selected item is marked as removed and does not show on the main list anymore.

• To reserve an appointment, the user has to select a date and city (username and selected item are autofilled).
  • Use the design based on the "Book a vespa test-ride" and add all necessary inputs.
  • The user can also access the "Reserve" page from the navigation panel. In that case only username is autofilled.

8. When the user clicks the "My reservations" link in the navigation panel they can see a list of their reservations (with information about item name, date and city).
9. Add full documentation for your API.

Additional features - Required only for teams with 5 members (optional for others)

10. Implement proper user authentication from the front-end to the server.
11. Make sure that the "Add item" and "Delete item" links are accessible only by users who are admins.

Setup

Clone this repository to your desired folder:

Example commands:

• With HTTPS:

  cd my-folder
  git clone https://github.com/fmanimashaun/book-car.git

Install

Install this project's dependencies with:

  npm install

Usage

To run the project, first, make sure you have these files in the project's root directory

.env with this code REACT_APP_BASE_URL=http://localhost:4000

Then execute the following command:

 npm run start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

[Meltrust]

Hi,

Good job so far!
There are some issues that you still need to work on to prepare your project for the final evaluation, but you are almost there!

You are really close to finishing the Microverse program!! Keep it up! 👍👍👍

After implementing the requested changes, please submit another review request. ♻️

Check the comments under the review.

Cheers and Happy coding!👏👏👏

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the previous reviews unless it is requested otherwise.

---

[Meltrust]

Hi,

Good job so far!
There are some issues that you still need to work on to prepare your project for the final evaluation, but you are almost there!

You are really close to finishing the Microverse program!! Keep it up! 👍👍👍

After implementing the requested changes, please submit another review request. ♻️

Check the comments under the review.

Cheers and Happy coding!👏👏👏

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the previous reviews unless it is requested otherwise.

---

[Meltrust]

Hi,

Good job so far!
There are some issues that you still need to work on to prepare your project for the final evaluation, but you are almost there!

Tip

The issues seem to be related to aws authentication credentials whenever the app tries to save images.

This affected the seeds file (the very end of it when the images are saved) and the add car functionality (since it cannot save the images.).

You are really close to finishing the Microverse program!! Keep it up! 👍👍👍

After implementing the requested changes, please submit another review request. ♻️

Check the comments under the review.

Cheers and Happy coding!👏👏👏

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the previous reviews unless it is requested otherwise.

---