Oline‑Taxi‑App

An online taxi booking platform with driver‑passenger interaction and real‑time ride management. Built with a clean Frontend / Backend architecture.

Live demo: oline-taxi-app.vercel.app (if deployed) Repo folders: Frontend/ and Backend/

---

✨ Features

• User authentication for passengers and drivers
• Real‑time ride booking and status updates (via Socket.IO)
• Pickup & drop location selection with Maps API
• Ride request notifications for drivers
• Ride status flow: requested → accepted → ongoing → completed
• Fare calculation and ride history
• Profile management for both drivers and users
• Mobile‑responsive UI

Note: Adjust this list to exactly match what you’ve implemented.

---

🧱 Tech Stack

Frontend: React (Vite) + Tailwind CSS Backend: Node.js, Express, Socket.IO Database: MongoDB (Mongoose) Auth: JWT with cookies or headers Maps API: Google Maps / Mapbox Deployment: Vercel (frontend), Render/Railway (backend)

---

📦 Project Structure

Oline-Taxi-App/
├── Frontend/            # React app (UI)
│   ├── src/
│   ├── public/
│   └── package.json
└── Backend/             # API + WebSocket server
    ├── src/ or server.js
    ├── package.json
    └── .env (local only)

---

⚙️ Prerequisites

• Node.js LTS and npm/yarn
• MongoDB (local or Atlas)
• Maps API key (Google/Mapbox)

---

🧪 Local Development

1) Clone and install

git clone https://github.com/Xabhi0811/Oline-Taxi-App.git
cd Oline-Taxi-App

Backend

cd Backend
npm install

Create Backend/.env:

Start backend:

npm run dev      # or: npm start

Frontend

cd ../Frontend
npm install

Create Frontend/.env:

Start frontend:

npm run dev

Open http://localhost:5173 in your browser.

---

🔌 Environment Variables

Backend

• PORT – server port
• MONGODB_URI – Mongo connection string
• JWT_SECRET – JWT signing secret
• CLIENT_URL – allowed frontend origin
• MAP_API_KEY – Google/Mapbox API key

Frontend (Vite)

• VITE_API_URL – REST API base URL
• VITE_SOCKET_URL – WebSocket server URL
• VITE_MAP_API_KEY – Maps API key

---

🚏 API (example skeleton)

Auth

• POST /api/auth/signup – register user
• POST /api/auth/login – login and return token
• GET /api/auth/me – current user profile

Rides

• POST /api/rides/request – request a ride
• GET /api/rides/:id – fetch ride details
• PATCH /api/rides/:id/status – update ride status

---

🕸️ Socket Events (example)

Client → Server

• ride:request {pickup, destination}
• ride:accept {rideId}
• ride:update {rideId, status}

Server → Client

• ride:new {ride details}
• ride:accepted {rideId, driver}
• ride:status {rideId, status}

---

Database

• Use MongoDB Atlas and update MONGODB_URI

---

🧰 Scripts (fill as per your package.json)

Backend

{
  "scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
  }
}

Frontend

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

---

✅ Checklist

• Add exact routes and socket events
• Confirm ports and env variable names
• Insert screenshots/GIF demos
• Add license info

---

📸 Screenshots

Add app screenshots or GIFs here.

---

📄 License

Specify your license (e.g., MIT). Create a LICENSE file.

---

🤝 Contributing

PRs are welcome! Please open an issue for major changes.

---

🙌 Acknowledgements

• Google Maps / Mapbox for geolocation
• Socket.IO for real‑time rides
• MongoDB/Mongoose for data storage
• Vercel/Render for deployment

---

Troubleshooting

• CORS errors: Ensure CLIENT_URL matches frontend URL and CORS is enabled
• WebSocket issues: Confirm your host supports sockets and correct URL is set
• .env not working: Ensure env files are in the right place and loaded

---