Skip to content

MK-Khan123/complete-website-client

Repository files navigation

City Wheels Auto Shop (Complete Website Assignment)

This project was bootstrapped with Create React App.

Firebase Live Site Link

The project was deployed at Firebase. One can access the link by clicking here Firebase Live Site Link.

Technology Used

  • React.js
  • React Router
  • Firebase Authentication
  • Context API
  • React Bootstrap
  • MongoDB
  • Node.js
  • Express.js
  • CRUD operations
  • Heroku
  • React Hooks Form
  • Axios
  • Stripe.js
  • Font Awesome

Project Features

In this project, I was introduced to the idea of Payment Gateway (specifically Stripe Payment). I had the opportunity to explore MongoDB, Express.js (a framework for Node.js) a bit more elaborately.

  1. User can opt for a service from the homepage but he/she needs to login first. Applied Private Route (also known as Protected Route/ Authenticated Route) to restrict convenient access. Implemented Google sign in method using Firebase Authentication.

  2. The data displayed in the homepage is fetched from MongoDB but for some parts I used static data. Used route parameter to fetch data dynamically from MongoDB and displayed accordingly.

  3. User can book a service, can pay with card (integrated payment gateway method specifically Stripe Payment). User can view his/her orders (along with status) and provide reviews which is shown on the review section of the homepage dynamically.

  4. Exhausted CRUD operations on multiple occasions while building the website. Implemented Admin/User differentiation. Admin can add/remove/status of different services and changes are reflected immediately on the website. Status updates are immediately reflected on User Panel. An admin is capable of adding another user as an admin.

  5. In addition, I used React Bootstrap to make the website device responsive (for mobile and desktop version). Furthermore, I deployed the site on Firebase which can be accessed through the above mentioned link.

Some screenshots of the project

Homepage

Our Services

Review section

Footer section

Login page

Individual Order Summary

In order to access the server side code of this website, please click here.

We can get in touch through LinkedIn, Twitter or my email mehnazkhan231@gmail.com.

Thank you.