🚗 Vehicle Breakdown Management Helper

A full-stack vehicle breakdown assistance platform designed to streamline the process of connecting vehicle owners with mechanics and service providers. The application provides seamless booking, tracking, and management of breakdown requests, ensuring help reaches users faster and more efficiently.

---

📖 Table of Contents

• ✨ Features
• 🛠 Tech Stack
• 📂 Project Structure
• 🚀 Getting Started
• 📸 Screenshots
• 📊 System Workflow
• 🤝 Contributing
• 📜 License

---

✨ Features

• 🔑 Authentication & Authorization Secure login and registration for both users and mechanics using JWT authentication.

• 📅 Breakdown Booking System Vehicle owners can create, manage, and track service bookings with real-time updates.

• 🧑‍🔧 Mechanic Dashboard Mechanics can view, accept, or manage service requests in an organized manner.

• 👤 User Dashboard Users have a dedicated dashboard to track their service history, bookings, and account details.

• 📍 Find Nearby Mechanics Location-based search functionality to quickly connect stranded users with available mechanics.

• 🎨 Modern UI/UX Built with React and Vite for a fast, smooth, and responsive user experience.

• 🎥 Background Video Integration Professional visuals with video background to enhance user engagement.

---

🛠 Tech Stack

Frontend (React + Vite)

• React.js with JSX components
• Vite for fast build and development
• CSS modules for styling
• REST API integration with backend

Backend (Node.js + Express)

• Express.js for REST API
• MongoDB + Mongoose for database operations
• Authentication with JWT
• Middleware-based architecture for scalability

Other Tools & Services

• Git & GitHub for version control
• ESLint for code quality
• dotenv for environment configuration

---

📂 Project Structure

🔹 Backend (/backend)

backend/
│── config/
│   └── db.js                # Database connection setup
│── middlewares/
│   └── auth.middleware.js   # JWT authentication middleware
│── models/
│   ├── booking.model.js     # Booking schema
│   ├── mechanic.models.js   # Mechanic schema
│   └── user.models.js       # User schema
│── routes/
│   ├── auth.routes.js       # Authentication routes
│   ├── booking.routes.js    # Booking-related routes
│   ├── mechanic.routes.js   # Mechanic-related routes
│   └── user.routes.js       # User-related routes
│── server.js                # Express server entry point
│── .env                     # Environment variables
│── package.json             # Dependencies

🔹 Frontend (/frontend)

frontend/
│── pages/
│   ├── Contact.jsx             # Contact page
│   ├── FindMechanics.jsx       # Locate mechanics page
│   ├── Login.jsx               # Generic login page
│   ├── MechanicDashboard.jsx   # Mechanic dashboard
│   ├── Register.jsx            # Generic registration page
│   ├── UserDashboard.jsx       # User dashboard
│   ├── UserLogin.jsx           # User login page
│   └── UserRegister.jsx        # User registration page
│── src/
│   ├── api/                    # API integration logic
│   ├── assets/                 # Static assets (images, logos, etc.)
│   ├── App.jsx                 # Root React component
│   ├── App.css                 # Global styles
│   ├── main.jsx                # App entry point
│   └── index.css               # Global CSS
│── public/
│   └── bg-video.mp4            # Background video file
│── index.html                  # Root HTML file
│── vite.config.js              # Vite configuration
│── package.json                # Dependencies

---

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/gitx64/VehicleBreakdownManagementHelper.git
cd VehicleBreakdownManagementHelper

2️⃣ Backend Setup

cd backend
npm install
npm start

• Create a .env file with the following variables:

  PORT=5000
  MONGO_URI=your_mongodb_connection_string
  JWT_SECRET=your_secret_key

3️⃣ Frontend Setup

cd frontend
npm install
npm run dev

---

📸 Screenshots (To Add)

• 🔐 Login & Registration Pages
• 🖥 User Dashboard
• 🧑‍🔧 Mechanic Dashboard
• 📅 Booking Page
• 📍 Find Mechanics Page

(Adding screenshots or GIF demos will greatly enhance project presentation.)

---

📊 System Workflow

graph LR
A[User] -->|Registers / Logs in| B[Authentication API]
B -->|Valid Token| C[User Dashboard]
A -->|Creates Booking| D[Booking API]
D --> E[Database]
E --> F[Mechanic Dashboard]
F -->|Accepts / Updates Request| D
D -->|Status Update| C

Loading

This diagram illustrates the flow from user actions to backend processing and mechanic interaction.

---

🤝 Contributing

Contributions are welcome and appreciated! 🚀

1. Fork the repository
2. Create a new feature branch (feature/your-feature)
3. Commit your changes with clear messages
4. Push to your fork
5. Open a Pull Request for review

---

📜 License

This project is licensed under the GPL-3.0 License. See the LICENSE file for details.

---

🚘 Vehicle Breakdown Management Helper – connecting stranded users with mechanics faster, smarter, and easier.