Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fmanimashaun/book-car
BookCar is a car booking application developed as part of the Microverse Full-Stack Web Development Program’s capstone project. it provides a seamless and user-friendly platform for users to view and reserve cars for rides
https://github.com/fmanimashaun/book-car
admin api authentication-backend react redux-toolkit tailwindcss
Last synced: 14 days ago
JSON representation
BookCar is a car booking application developed as part of the Microverse Full-Stack Web Development Program’s capstone project. it provides a seamless and user-friendly platform for users to view and reserve cars for rides
- Host: GitHub
- URL: https://github.com/fmanimashaun/book-car
- Owner: fmanimashaun
- Created: 2024-02-12T11:17:47.000Z (9 months ago)
- Default Branch: dev
- Last Pushed: 2024-02-29T12:46:05.000Z (9 months ago)
- Last Synced: 2024-10-09T07:41:30.310Z (about 1 month ago)
- Topics: admin, api, authentication-backend, react, redux-toolkit, tailwindcss
- Language: JavaScript
- Homepage: https://fmanimashaun.github.io/book-car/
- Size: 3.76 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [📊 Kanban](#kanban-board)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [🖥️ Backend Integration](#backend-integration)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
# 📖 BookCar | Book a Ride App
**BookCar** is a car booking application developed as part of the Microverse Full-Stack Web Development Program’s capstone project. it provides a seamless and user-friendly platform for users to view and reserve cars for rides. The application is built with React and communicates with a Rails API backend named [BookCar-API](https://github.com/fmanimashaun/book-car-api). This application demonstrates proficiency in full-stack web development, including React, Redux, Tailwind CSS, React-Router, and Rails API development. It showcases the ability to build a robust frontend that communicates effectively with a backend service, and manage application state using modern tools and libraries.
- [BookCar (Frontend) Kanban Board](https://github.com/users/fmanimashaun/projects/16)
- [BookCar Api (Backend) Kanban Board](https://github.com/users/fmanimashaun/projects/16/views/1)
**Team Members**
- [Anwar Hussaini](https://github.com/M-Anwar-Hussaini)
- [Esteban Palacios](https://github.com/Estete9)
- [Timothy Njoroge](https://github.com/simplegoose)
- [Tomas Esquivel](https://github.com/tomasesquivelgc)
- [Animashaun Fisayo Micahel](https://github.com/fmanimashaun)
- [React](https://reactjs.org/)
- [React Router Dom](https://reactrouter.com/web/guides/quick-start)
- [React Redux](https://react-redux.js.org/)
- [Redux-toolkit](https://redux-toolkit.js.org/)
- [Axios](https://axios-http.com/)
- [Bootstrap](https://getbootstrap.com/)
- [React Icons](https://react-icons.github.io/react-icons/)
- [PropTypes](https://www.npmjs.com/package/prop-types)
- [Tailwindcss](https://tailwindcss.com/)
This project relies on a backend service to fetch and handle data. To ensure the project functions correctly, it's crucial to have a working backend. If you don't have a backend set up yet, kindly follow the instruction on [Book-car-api](https://github.com/fmanimashaun/book-car-api) repo for how to setup local backend for to support the frontend.
- Views/Components:
- **Car Listing:** Grid/list display of available cars.
- **Car Details:** Showcase car information, booking potential.
- **Reservation Form:** User inputs booking details (dates, user autofill).
- **My Reservations:** Displays a user's reservation history.
- **Admin Forms:** (Add/Delete Cars), protected and visible only to authorized users.
- **Navigation:** Clear links between areas of the app.
- **Routing:** React Router for seamless navigation between views.
- **State Management:**
- **Redux-toolki:** Centralized data store.
- **Actions/Reducers:** Fetch car listings, reservation management, user/authentication state.
- **API Interaction:** Fetch calls to backend, error handling
- **Input Validation:** User-friendly forms with data integrity checks.
- [Live Demo Link](https://fmanimashaun.github.io/book-car)
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
### Setup
Clone this repository to your desired folder:
Example commands:
- With HTTPS:
```bash
cd my-folder
git clone https://github.com/fmanimashaun/book-car.git
```
### Install
Install this project's dependencies with:
```bash
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:
```bash
npm run start
```
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### Run Linters
#### ESLint
```bash
npm run eslinter
```
#### Stylelint
```bash
npm run stylelinter
```
👤 **Fisayo Michael Animashaun**
- GitHub: [@fmanimashaun](https://github.com/fmanimashaun)
- Twitter: [@fmanimashaun](https://twitter.com/fmanimashaun)
- LinkedIn: [Fisayo Michael Animashaun ](https://linkedin.com/in/fmanimashaun)
👤 **Tomas Matias Esquivel**
- GitHub: [@tomasesquivelgc](https://github.com/tomasesquivelgc)
- Twitter: [@EsquivelTomas](https://twitter.com/EsquivelTomas)
- LinkedIn: [Tomas Esquivel](https://www.linkedin.com/in/tomás-esquivel-b2160568/)
👤 **Timothy Njoroge**
- GitHub: [@simplegoose](https://github.com/simplegoose)
- LinkedIn: [@Timothy Njoroge](https://linkedin.com/in/timothy-njoroge-mwangi)
👤 *Anwar Hussaini*
- GitHub: [Anwar Hussaini](https://github.com/M-Anwar-Hussaini)
- LinkedIn: [Anwar Hussaini](https://www.linkedin.com/in/anwar-hussaini/)
👤 **Esteban Palacios**
- GitHub: [@Estete9](https://github.com/Estete9)
- Twitter: [@NaughTban](https://twitter.com/NaughTban)
- LinkedIn: [Esteban Palacios](https://www.linkedin.com/in/dev-esteban-palacios/)
- [ ] **Dark mode.**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/fmanimashaun/book-car/issues).
Give a ⭐ if you liked this project!
- Behance and Murat Korkmaz for the [original design](https://www.behance.net/gallery/26425031/Vespa-Responsive-Redesign)
- [Microverse](https://www.microverse.org/) for providing the opportunity to learn in a collaborative environment.
- We the team will like to thank one another for the contribution and dedication for seeing the project to the end
This project is [MIT](./MIT) licensed.