Final Review - Car Booking Website Project (Frontend) #13

aradradev · 2023-11-04T22:06:06Z

Pull Request for Final Review - Car Booking Website Project

Team Members:

Summary:

This pull request is for the final review of our Car Booking Website project. We have successfully completed all the required features and additional optional features, creating a fully functional and responsive website for booking cars.

Project Requirements:

Basics

Theme: Car Booking Website
Modified the provided design layout to match our theme.

Features

Team Size: 4 members
Completed all 9 required features for our team size.
Implemented optional features to enhance user experience.

Core Features (Required for Every Team Size)

User login with a username.
Navigation panel with links to cars, "Reserve" form, "My reservations," "Add car," and "Delete car."
Main page displaying a list of cars.
Detailed page for each car with a "Reserve" button.
Form for adding a new car.
Made the app responsive for both mobile and desktop versions.

Changes Made:

Replaced "motorcycles" with "cars" throughout the project.
Implemented user authentication using usernames.
Developed the navigation panel with links and functionality.
Designed and styled the main page to display car listings.
Created detailed car pages with a "Reserve" button.
Developed the form for adding new cars.
Ensured the website is responsive for both mobile and desktop users.
Performed rigorous testing to ensure the functionality and user experience meet the requirements.

Additional Information:

Detailed project documentation, including project architecture, design considerations, and user flow diagrams, is available for review.

Status:

Ready for final assessment and review.

Checklist:

Backend Pull request:

Backend PR

Tasks:

Final review and approval.

Thank you for your time and consideration!

Best regards,
The Team.

Milestone 1:- Setup frontend app

Milestone 2:- Add routes redux store

…logged in

Milestone 3:- Add frontend login page

Test snapshots

Final Milestone:- Deploy

Meltrust

Hi @aradradev,

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!

To highlight:

Tests are passing✔️
Nice code organization ✔️
Good readme ✔️
Nice frontend ✔️

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 · 2023-11-04T23:51:58Z

src/components/Slider.js

Kindly, remove the old commented code present on this file in order to improve the repo's cleanliness. 👍

Meltrust · 2023-11-04T23:53:55Z

src/App.js

+import CarDetail from "./components/car/CarDetail";
+import DeleteCar from "./components/car/DeleteCar";
+
+function App() {


Please, kindly refactor this functional component to ES6 arrow function, so your code complies with the latest standards.

Refactoring is easy:

const App = () => { // ... }

Explanation

The function keyword has been soft deprecated in almost all the software industry in favor of ES6 arrow functions. This means, almost nobody uses it anymore, so much that it's considered a non-best practice.

That way, your code will meet the latest standards. 💪

Meltrust · 2023-11-04T23:54:18Z

src/components/login/login.js

+import Signup from '../signup/signup';
+import { logIn } from '../../redux/login/loginSlice';
+
+function Login() {


Please, kindly refactor this functional component to ES6 arrow function, so your code complies with the latest standards.

Refactoring is easy:

const Login= () => { // ... }

Explanation

The function keyword has been soft deprecated in almost all the software industry in favor of ES6 arrow functions. This means, almost nobody uses it anymore, so much that it's considered a non-best practice.

That way, your code will meet the latest standards. 💪

Meltrust · 2023-11-04T23:54:48Z

src/components/reservation/AddReservation.js

+import { getCars } from "../../redux/cars/carsSlice";
+import { addReservation } from "../../redux/reservations/reservationSlice";
+
+function AddReservation() {


Please, kindly refactor this functional component to ES6 arrow function, so your code complies with the latest standards.

Refactoring is easy:

const AddReservation= () => { // ... }

Explanation

The function keyword has been soft deprecated in almost all the software industry in favor of ES6 arrow functions. This means, almost nobody uses it anymore, so much that it's considered a non-best practice.

That way, your code will meet the latest standards. 💪

Meltrust · 2023-11-04T23:55:09Z

src/components/reservation/ReservationList.js

+import { getReservations } from "../../redux/reservations/reservationSlice";
+import { getCars } from "../../redux/cars/carsSlice";
+
+function ReservationList() {


Please, kindly refactor this functional component to ES6 arrow function, so your code complies with the latest standards.

Refactoring is easy:

const ReservationList= () => { // ... }

Explanation

The function keyword has been soft deprecated in almost all the software industry in favor of ES6 arrow functions. This means, almost nobody uses it anymore, so much that it's considered a non-best practice.

That way, your code will meet the latest standards. 💪

Meltrust · 2023-11-05T00:06:21Z

src/components/car/CarDetail.js

+import colorsImg from "../../assets/colors.PNG";
+import arrow from "../../assets/arrow.png";
+
+const CarDetail = () => {


When I try to access a car's details, I get this error:

The browser's console:

The browser's local storage:

It seems I'm not authorized to look at the car details even though I'm logged in.

If this is a bug, kindly fix it so your app works as intended. If this is NOT a bug, it means your app requires special procedures to be run correctly (a .env file?, any extra steps required?) if this is the case, kindly add those instructions to your readme so all your users are able to test your app correctly. 👍

Kindly fix this bug so your app works as intended. 👍

Meltrust · 2023-11-05T00:11:08Z

src/components/car/AddCar.js

+import { useDispatch, useSelector } from "react-redux";
+import { addCar } from "../../redux/cars/carsSlice";
+
+const AddCar = () => {


I cannot add cars:

It seems I'm not authorized to look at the car details even though I'm logged in.

I didn't test the DELETE functionality because I wasn't able to add cars.

If this is a bug, kindly fix it so your app works as intended. If this is NOT a bug, it means your app requires special procedures to be run correctly (a .env file?, any extra steps required?) if this is the case, kindly add those instructions to your readme so all your users are able to test your app correctly. 👍

Fix components & slices errors

Meltrust

Hi @aradradev,

Wow, you did it 🎉

Thank you for the changes implemented 💪 🥇 ㊗️

Unless you want to add more features, go ahead to your final presentation ⏩ ⏩ ⏩

You are about to finish the Microverse program. You have come a long way!!!

Good luck in the software industry!! I'll see you there. ✨

Congratulations!!!!!! 🎉

To highlight

Cars can now be added✔️
Cars details can now be accessed✔️
Great job✔️

Cheers and Happy coding!👏👏👏

hmunish and others added 30 commits October 27, 2023 11:26

Initiate react app

7e7822c

Add linters.yml for GitHub workflows actions

063c6da

Install required linter node packages

4fd4b65

Add linters config

1636d4b

Add required node packages & update port to 1234

8f77601

Merge pull request #2 from hmunish/setup-frontend-app

726599a

Milestone 1:- Setup frontend app

Add redux store

d036d09

Add router & redux store to the application

e423fe7

Merge pull request #3 from hmunish/add-routes-redux-store

5174ee3

Milestone 2:- Add routes redux store

Add jwt-decode node package

abc7c90

Add axios node package

5c5cc27

Add routes

8ab3278

Create carsSlice

71fa58a

Add carsReducer

cad7097

Add Cars Component

0e180de

Add Axios

6df9359

Add slice extra reducer & async thunk for validating if user already …

7920da3

…logged in

Add signup component & routes

74d3ab5

Add feature for users to login

8dc9c16

Add slider functionality

207ad7a

Add basic styles for cars

2019487

Add Nav Menu component

a7a84d4

Add styles for login & signup page

2b71756

Fix stylelint errors

c8e4b28

Add some styling for navigation

128bac8

Add signup slice, async thunk & event handlers

624db0d

Fix login & signup form stylings

1b04142

Merge pull request #4 from hmunish/add-frontend-login-page

a17f942

Milestone 3:- Add frontend login page

Merge branch 'dev' into cars-list

76b29a5

Update App.js

b5e384e

FaranoshAmini and others added 20 commits November 3, 2023 23:32

Add the test for NavMenu

5ba6aa6

Create NavMenu.test.js.snap

8a24ed7

Update NavMenu.test.js

74efdf8

Create the test for login

e72dd33

Update Login.test.js

00594d0

Create Login.test.js.snap

6e2875d

Create Signup.test.js

98ad5a5

Update Signup.test.js

235d748

Create Signup.test.js.snap

9f39671

Fix the eslint error

e5e6775

Add readme.md

9343ea6

Add the Authors Information

2813f77

fixing the broke link

bbbac5d

Merge pull request #11 from hmunish/test-snapshots

7a29285

Test snapshots

Update API url

b000263

Fix reservations lists

8d89921

Fix linter errors

bc2612d

Add livedemo link on Readme.md

f52d1d0

adding broken image link for the kanban board

9aa5481

Merge pull request #12 from hmunish/31-1pt-deploy-frontend-app

90f2129

Final Milestone:- Deploy

aradradev mentioned this pull request Nov 4, 2023

Final Review - Car Booking Website Project (Backend) hmunish/final-capstone-backend#33

Merged

6 tasks

Meltrust suggested changes Nov 5, 2023

View reviewed changes

hmunish and others added 6 commits November 6, 2023 10:22

Fix components & slices errors

8e6ac46

Update slider window object

8d930db

Fix slider issue

fd98106

Fix style errors

9954185

Merge pull request #14 from hmunish/31-1pt-deploy-frontend-app

ee5aea4

Fix components & slices errors

Update App.css for sidebar z-index

a28a37a

Meltrust approved these changes Nov 6, 2023

View reviewed changes

hmunish merged commit 5834f59 into main Nov 6, 2023
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Final Review - Car Booking Website Project (Frontend) #13

Final Review - Car Booking Website Project (Frontend) #13

aradradev commented Nov 4, 2023 •

edited

Loading

Meltrust left a comment

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 5, 2023 •

edited by hmunish

Loading

Meltrust Nov 5, 2023 •

edited by hmunish

Loading

Meltrust left a comment •

edited

Loading

Final Review - Car Booking Website Project (Frontend) #13

Final Review - Car Booking Website Project (Frontend) #13

Conversation

aradradev commented Nov 4, 2023 • edited Loading

Pull Request for Final Review - Car Booking Website Project

Team Members:

Summary:

Project Requirements:

Basics

Features

Core Features (Required for Every Team Size)

Changes Made:

Additional Information:

Status:

Checklist:

Backend Pull request:

Tasks:

Meltrust left a comment

Choose a reason for hiding this comment

To highlight:

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

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

Meltrust Nov 4, 2023 • edited by hmunish Loading

Choose a reason for hiding this comment

Meltrust Nov 4, 2023 • edited by hmunish Loading

Choose a reason for hiding this comment

Explanation

Meltrust Nov 4, 2023 • edited by hmunish Loading

Choose a reason for hiding this comment

Explanation

Meltrust Nov 4, 2023 • edited by hmunish Loading

Choose a reason for hiding this comment

Explanation

Meltrust Nov 4, 2023 • edited by hmunish Loading

Choose a reason for hiding this comment

Explanation

Meltrust Nov 5, 2023 • edited by hmunish Loading

Choose a reason for hiding this comment

Meltrust Nov 5, 2023 • edited by hmunish Loading

Choose a reason for hiding this comment

Meltrust left a comment • edited Loading

Choose a reason for hiding this comment

Hi @aradradev,

Wow, you did it 🎉

Thank you for the changes implemented 💪 🥇 ㊗️

Unless you want to add more features, go ahead to your final presentation ⏩ ⏩ ⏩

You are about to finish the Microverse program. You have come a long way!!!

Good luck in the software industry!! I'll see you there. ✨

Congratulations!!!!!! 🎉

To highlight

aradradev commented Nov 4, 2023 •

edited

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 4, 2023 •

edited by hmunish

Loading

Meltrust Nov 5, 2023 •

edited by hmunish

Loading

Meltrust Nov 5, 2023 •

edited by hmunish

Loading

Meltrust left a comment •

edited

Loading