📗 Table of Contents

• 📖 About the Project
  • 📊 Kanban
  • 🛠 Built With
    • Tech Stack
• 🖥️ Backend Integration
  • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 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. 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
• BookCar Api (Backend) Kanban Board

Team Members

• Anwar Hussaini
• Esteban Palacios
• Timothy Njoroge
• Tomas Esquivel
• Animashaun Fisayo Micahel

(back to top)

🛠 Built With

Tech Stack

Tech Stack

• React
• React Router Dom
• React Redux
• Redux-toolkit
• Axios
• Bootstrap
• React Icons
• PropTypes
• Tailwindcss

🖥️ Backend Integration

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 repo for how to setup local backend for to support the frontend.

(back to top)

Key Features

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

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

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:

  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.

The page will reload when you make changes.
You may also see any lint errors in the console.

Run Linters

ESLint

  npm run eslinter

Stylelint

  npm run stylelinter

(back to top)

👥 Authors

👤 Fisayo Michael Animashaun

• GitHub: @fmanimashaun
• Twitter: @fmanimashaun
• LinkedIn: Fisayo Michael Animashaun

👤 Tomas Matias Esquivel

• GitHub: @tomasesquivelgc
• Twitter: @EsquivelTomas
• LinkedIn: Tomas Esquivel

👤 Timothy Njoroge

• GitHub: @simplegoose
• LinkedIn: @Timothy Njoroge

👤 Anwar Hussaini

• GitHub: Anwar Hussaini
• LinkedIn: Anwar Hussaini

👤 Esteban Palacios

• GitHub: @Estete9
• Twitter: @NaughTban
• LinkedIn: Esteban Palacios

(back to top)

🔭 Future Features

• Dark mode.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Give a ⭐ if you liked this project!

(back to top)

🙏 Acknowledgments

• Behance and Murat Korkmaz for the original design
• Microverse 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

(back to top)

📝 License

This project is MIT licensed.

(back to top)