The “Online Car Purchasing” platform is a full-stack web application developed using the MERN stack (MongoDB, Express.js, React.js, Node.js). This project is designed to simplify the car purchasing process, allowing users to search for cars, apply filters, and explore categories to find the perfect match. With advanced features like a comparison tool, maintenance tracking, and an integrated Stripe payment system, the platform ensures a seamless experience for users. An admin panel enables showroom owners to manage their car inventory and monitor user orders efficiently.
Key Features:
- User Features:
- Search and Filters: Users can search for cars and refine results using filters like price range, brand, fuel type, and more.
- Categories: Explore cars organized by categories such as SUV, sedan, or electric vehicles.
- Car Details: View detailed specifications, images, and performance metrics of selected cars.
- Nearest Showroom Locator: Identify the nearest showroom where the car is available.
- Add to Cart: Save selected cars in the cart for easy checkout.
- Stripe Payment Integration: Securely complete payments for purchases.
- Compare Cars: Compare specifications and features of multiple cars.
- User Reviews: Add and view reviews for purchased cars.
- Maintenance Records: Maintain a record of service and repairs for owned cars.
- Admin Panel Features:
- Add Cars: Showroom owners can add new car listings with images and specifications.
- Manage Inventory: View, edit, and delete existing car listings.
- Order Management: Track and manage orders received from users.
Also Get Food Delivery Web App Using MERN Stack source code
Requirements for Online Car Purchasing
1. Technologies and Tools:
- Frontend:
- React.js with React Router for state management.
- Tailwind CSS and in admin panel use only CSS.
- Backend:
- Node.js with Express.js for API development.
- Database:
- MongoDB with Mongoose for database interaction.
- Payment Integration:
- Stripe API for handling secure payments.
- Geolocation Services:
- OpenStreetMap for nearest showroom functionality.
2. Prerequisites:
- Basic understanding of JavaScript, React.js, Node.js, and MongoDB.
- Node.js and npm installed on your system.click here to download
- MongoDB setup locally or on a cloud service like MongoDB Atlas.
- Stripe account for payment integration.
3. Development Tools:
- Code editor ( Visual Studio Code). click here to download
- Postman for API testing. click here to download
How to Run the Project
Step 1: Download Project
click on below button to download zip file
Step 2: Extract Downloaded file
To extract a ZIP file, you can use various methods depending on your operating system.
Step 3: Open Project
Open extracted folder in your VS code editor.
Step 4: Configure Environment Variables
Add your MongoDB Path
CLOUD_NAME,API KEY and API SECRET KEY from cloudinary account. (Must create account on cloudinary to save images) . dont worry its free.
enter your any email and password to get notication for car maintenence
Add your Secret Key from stripe Dashboard
Add your Publishable Key from stripe Dashboard
Step 5: Run This Project
Backend:
Open your Terminal in VS Code
cd backend
npm run dev
Frontend:
Open another terminal in vs code
cd frontend
npm run dev
admin:
Open another terminal in vs code to run admin
cd admin
npm run dev
Step 6: Access the Application
- Open your browser and navigate to
http://localhost:5173/for the frontend interface and Open another tab for admin http://localhost:5174/. - Backend API will run on
http://localhost:4000by default.
Step 7: Test Features
- User Role:
- Search for cars, apply filters, and explore categories.
- Add a car to the cart and complete the purchase using Stripe.
- Review purchased cars and add maintenance records.
- Admin Role:
- Log in as a showroom owner, add new cars, and manage inventory and orders.
If you still face any error , Feel free to Ask Any Question