Auto Maniac Client Website

A simple responsive car brand shop, created as a single page React application with Firebase SDK Authentication, and backend integration using Express JS MongoDB CRUD operations.

Technologies Used

Getting Started

Follow these steps to clone and run the project on your local machine.

Clone the repository and navigate to the cloned repo.

Install Dependencies

npm install

Configure Environment Variables

You will be needing the environment variables for Firebase SDK before running the project. Please contact me if you need access to the .env.local file.

Run the Project

After configuring the environment variables, run this command to start the project.

npm run dev

Updated Features

• Group animation effect on the brand cards on the Homepage and the product cards on the Brand Products pages.
• Dark mode text color on My Cart page fixed, and changed dark mode bg color.

Features & Functionalities

• Click on a logo of Featured Brands in the Home page to view all products of that brand in the database.
• Click on the Details button of the product card to learn about further details about the product.
• On the product details page, you can add the product to your cart if you want to buy it.
• Visit the My Cart page when you are signed in, to view your selected products in the basket.
• Go to the Add Product page to add a product of a certain brand directly to the database in MongoDb.
• You also have the option to edit a product property by clicking on the Update button on the product card, and updating the information directly to the database.
• Register or Login using your email-password or using Google Sign In to use premium functionalities such as adding and editing products, or accessing them in your cart to check out.
• The backend server is fully functional and hosted online on Vercel so that you can use the Auto Maniac website seamlessly without any problems.

Client Side Live Link:

Firebase : https://auto-maniac.web.app/