The app is the front end version of the car booking services

Last update: Aug 5, 2022

Car Booking Service

Screenshot Screenshot Screenshot

Live Versions

Link to the backend

Built With

  • ReactJS
  • Redux Toolkit
  • TailwindCSS

Getting Started

  • Getting a local copy is simple. Follow the steps below

Install

  • Node
  • npm
  • git

Local Copy

  • Clone the project
git clone https://github.com/DelhinRharl/car-booking-service-front-end

Setup

For the frontend

npm install

Start server(frontend):

npm start

The front end app will open automatically to the default browser

Run the tests

npm run test

Authors

👤 Anuar Shaidenov

👤 Affaxed Kiprotich

👤 Charles Gobina

👤 Kevin Koome

👤 Bohdan Shcherbak

🅰️ Acknowledgements

The design template is provided by Creative Commons

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

GitHub

https://github.com/DelhinRharl/car-booking-service-front-end
Comments
  • 1. Car booking service: Front-End

    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.
    Reviewed by anuarshaidenov at 2022-05-18 08:30
  • 2. Tests/Part 2

    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.
    Reviewed by DelhinRharl at 2022-05-13 08:48
  • 3. Added login and signup modals

    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
    Screenshot 2022-05-12 at 5 07 19 pm .
    Reviewed by anuarshaidenov at 2022-05-12 11:10
  • 4. User state

    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.
    Splash screen
    Reviewed by anuarshaidenov at 2022-05-11 16:30
  • 5. Fix details

    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:
    Screenshot 2022-05-11 at 3 53 40 pm
    Reviewed by anuarshaidenov at 2022-05-11 09:55
  • 6. Integrate GET cars endpoint + Redux Thunk

    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.
    Reviewed by anuarshaidenov at 2022-05-10 18:36
  • 7. Add intial unit tests

    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
    Reviewed by anuarshaidenov at 2022-05-10 12:29
  • 8. Add homepage

    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
    Reviewed by anuarshaidenov at 2022-05-09 16:47
  • 9. Add sidebar

    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.
    Reviewed by anuarshaidenov at 2022-05-09 12:27
  • 10. Setup project

    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.
    Reviewed by anuarshaidenov at 2022-05-08 09:55
  • 11. Reservation Page(5pts)

    • 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).
    Reviewed by DelhinRharl at 2022-05-04 13:56
  • 12. Kanban Setup

    Hi there!

    kanban

    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

    Reviewed by DelhinRharl at 2022-05-04 14:11
Rent-A-Car - Serverless ReactJS SPA

Rent-A-Car gives you opportunity easily renting and renting out cars, managing users, earning money.

Jul 1, 2022
Hotel Booking App Using The MERN Stack With TypeScript & Redux
Hotel Booking App Using The MERN Stack With TypeScript & Redux

HotelBooking Hotel Booking App Using The MERN Stack With TypeScript & Redux ?? Features: Room reviews and ratings Room pagination Room search feature

Aug 6, 2022
Clone for Book My Show ( online movie tickets booking site ) built with ReactJS
Clone for Book My Show ( online movie tickets booking site ) built with ReactJS

Clone for Book My Show ( online movie tickets booking site ) built with ReactJS

Jul 30, 2022
E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

Jul 10, 2022
Front End for file sharing app built with the MERN Stack
Front End for file sharing app built with the MERN Stack

zed-sharing-react Front End for file sharing app built with the MERN Stack Report Bug · Request Feature About The Project This is the Front End for Ze

Jul 20, 2022
Portfolio-React - utilized Create React App, and Redux for the front end, along with associated packages for routing and styling.
Portfolio-React - utilized Create React App, and Redux for the front end, along with associated packages for routing and styling.

Portfolio-React - utilized Create React App, and Redux for the front end, along with associated packages for routing and styling.

Jun 8, 2022
Engin Demiroğ, Java + React bootcamp HRMS project front-end codes (React JS).
Engin Demiroğ, Java + React bootcamp HRMS project front-end codes (React JS).

HRMS-front-end Engin Demiroğ, Java + React bootcamp HRMS project front-end codes. Spring Boot Back-end Project Job Advertisements Filters Pagination R

Apr 27, 2022
This is a front-end of an application that will help organize and manage the bookstore. It is so fast, dynamic and responsive to actions and it is built with React & Redux.

Bookstore This is a front-end of an application that will help organize and manage bookstore. It is so fast, dynamic and responsive to actions and it

Aug 9, 2021
React Front End for Gallery API

React Front End for Gallery API

Oct 13, 2021
Human resource management system front-end codes with React.
Human resource management system front-end codes with React.

Human resource management system front-end codes with React.

Jul 22, 2022
A front-end clone project of the Spotify Web Player. The project was created using React.

Spotify Web Player Clone A front-end clone project of the Spotify Web Player. The project was created using React. This is my first big React.js proje

Aug 3, 2022
Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engine built with RESTful API to be built with GRAPHQL API with Apollo Server.
Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engine built with RESTful API to be built with GRAPHQL API with Apollo Server.

21_MERN_GoogleBookSearchEngine Task Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engin

Apr 9, 2022
Projeto final do Modulo 1(Front-end - React) do curso DevInHouse - Turma Teltec e Bry

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Nov 21, 2021
Front-end em React JS para consumir a PokéApi v2
Front-end em React JS para consumir a PokéApi v2

EM DESENVOLVIMENTO! ??‍?? Pokemon API Sobre Requisitos Como Rodar o Projeto? Resultados de Desenvolvimento Referências Sobre A ideia central desse pro

Nov 22, 2021
An extremely lightweight, 0.5kb experimental, React-like front-end library

What is Reval.js? Reval.js is an experimental, React-like front-end library used to create small-scale web apps faster and better-structured. It is li

May 15, 2022
AuthBee: a NPM package to implement authentication logic for the front end of your JavaScript project
AuthBee: a NPM package to implement authentication logic for the front end of your JavaScript project

AuthBee AuthBee is a NPM package to implement authentication in your JavaScript

Jul 15, 2022
Front-end of a web application, developed by using ReactJS library.

☕️ Starducks Client ?? Client ?? Server Description This repository is created with React JS library to list, filter and search coffee data consumed f

Apr 22, 2022
This is a NFT minting front-end with React.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jul 13, 2022
a React front-end implementation from the TMDB API.
a React front-end implementation from the TMDB API.

Films-Challenge Este projeto foi desenvolvido como desafio para uma vaga de emprego, em uma agência de publicidade, foi solicitado que eu fizesse uma

Dec 24, 2021