Hi reviewer🙂

Here's a brief overview of this project:

• The user logs in to the website, by typing the email and password.
• In the navigation panel, the user can see links to:
  • Cars.
  • "Reserve" form.
  • "My reservations".
  • "Add a car that you selected as a theme".
  • "Delete the car that you selected as a theme".
• On the main page, the user can see a list of cars that you selected as a theme
• When the user selects a specific item, they can see the details page with its full description
  • On 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).
• When the user clicks the "Add item" link in the navigation panel they can see a form for adding a new item.

Hi there,

• In this pull request, I wrote some few tests on the Car details and home page snapshot tests
• Kindly note that I Will be adding more as soon as possible and if need be.

Hi Team

• I added a login and signup modals to the splash screen:
  • User sees a splash screen on the first render.
  • When the user signs in or signs out the isLoggedIn redux state changes from false to true, and the home page becomes visible.
  • Added tests for FormError component

Hi, team!

Details of this PR:

• Added userSlice that controls the user's state to the redux.
  • Has a state isLoggedIn.
• Changed the code for app.js to conditionally render the home page:
  • If the user is logged in, the HomePage.js component will be rendered.
  • If the user is logged out, the SplashScreen.js will be rendered.
  • You can check it by toggling the isLoggedIn state in the src/redux/users/userSlice.js file, setting the initialState from true to false
• Added the SplashScreen.js page.

Hi team!

Here's a quick overview of this PR:

• I changed Carouseltem to work with the data from the API:
  • Links now point to corresponding IDs.
  • It uses the images, coming from the API:

Hi team!

A quick overview of this PR:

• I added Redux reducer to set cars' global state using TDD:
  • Created slice carsSlice.js and added initial tests for it.
  • using createAsyncThunk I created an action to fetch the cars' data from the main endpoint.
  • Integrated the fetched data by dispatching the fetchCars action in the Carousel component.
• Displaying the cars with their model name and make on the home page.

Hi team!

This PR contains initial unit tests for the components:

• NavItem.js
• Sidebar.js
• CarouselItem.js You can run the tests using the npm run test command

Hi, team!

Here's a small overview of this PR:

• I added test assets to the project (image of the car).
• Added Homepage.js.
• Added a carousel with a help of the responsive-carousel npm package.
• Made the page responsive for all devices.
• Made the carousel responsive.
• Encapsulated the components:
  • Carousel.js.
    • CarouselMobile
    • CarouselDesktop
  • CarouselItem.js

Hi team!

Here are some details of this PR:

• Added sidebar component Sidebar.js.
• Added mobile menu functionality using the useState hook.
• Styled the menu.
• Styled the active links.

Hi team!

Here's a quick overview of this PR:

• I set up the repository with the npx create-react-app command.
• Added linters.
• Installed react-router-dom and set up some initial routes in index.js.
• Installed react-redux and redux-toolkit and set up the store(no reducers nor actions).
• Installed and set up TailwindCSS for the project.

To navigate through the project:

• Run the npm start command.
• App.js component contains all the routes to the pages that are created in the src/pages directory.
  • There you will find 5 pages so far:
    • HomePage.js
    • CarDetails.js
    • Reserve.js
    • SignIn.js
    • SignUp.js
• You can use the test navbar to navigate through the pages just to get the idea.
  • the navbar is located in the src/components directory.

• 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.
• 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).

Hi there!

In this project, we have 5 members working on the project

• [ ] Anuar Shaidenhov @anuarshaidenov
• [ ] Kevin Koome @koomekevo
• [ ] Bohdan Shcherbak @akucintavalent
• [ ] Charles Gobina @charlesgobina
• [ ] Affaxed Kiprotich @DelhinRharl

link to the issues https://github.com/DelhinRharl/car-booking-service-front-end/issues

Here is the link to the project https://github.com/DelhinRharl/car-booking-service-front-end

We also have a back-end repository https://github.com/DelhinRharl/car-booking-service-back-end