https://github.com/devsafix/ride-booking-system-client
A production-ready, role-based ride booking platform (Rider, Driver, Admin) built with React, TypeScript, Redux Toolkit, RTK Query, and Tailwind CSS. Features secure authentication, responsive UI, dashboards, charts, and real-time ride management.
https://github.com/devsafix/ride-booking-system-client
aos-animation axios driverjs react react-router recharts-js redux-toolkit shadcn-ui tailwind-css
Last synced: about 1 month ago
JSON representation
A production-ready, role-based ride booking platform (Rider, Driver, Admin) built with React, TypeScript, Redux Toolkit, RTK Query, and Tailwind CSS. Features secure authentication, responsive UI, dashboards, charts, and real-time ride management.
- Host: GitHub
- URL: https://github.com/devsafix/ride-booking-system-client
- Owner: devsafix
- Created: 2025-08-20T18:28:56.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-27T11:58:02.000Z (10 months ago)
- Last Synced: 2025-09-06T05:31:53.715Z (10 months ago)
- Topics: aos-animation, axios, driverjs, react, react-router, recharts-js, redux-toolkit, shadcn-ui, tailwind-css
- Language: TypeScript
- Homepage: https://ridaa.vercel.app/
- Size: 767 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ridaa - A Fullstack Ride Management System
A **production-ready** ride booking platform built with **React, Redux Toolkit, TypeScript, and Tailwind CSS**, designed to support **Riders, Drivers, and Admins** with role-based dashboards, secure authentication, and a seamless user experience.
---
## Live Deployment
- **Frontend:** https://ridaa.vercel.app
- **Backend:** https://ride-booking-system-backend-by-safi.vercel.app
- **Backend Repository:** https://github.com/devsafix/ride-booking-system-backend
---
## Project Overview
The **Ride Management System** is a web-based platform similar to Uber or Pathao.
It provides three unique experiences based on user roles:
- **Rider** – Request rides, view ride history, track ongoing rides, and manage profiles.
- **Driver** – Accept ride requests, manage earnings, update ride statuses, and track history.
- **Admin** – Oversee users, manage rides, and view analytical dashboards.
The project ensures **responsive UI**, **secure JWT-based authentication**, **state management with Redux Toolkit & RTK Query**, and **proper error handling** across all modules.
---
## Features
### **Public Pages**
- Landing Page with dynamic Hero Section, Service Highlights, Testimonials, and Call-to-Action.
- About, Features, Contact (validated form), and FAQ pages (Searchable list of common questions).
- Fully responsive design with smooth transitions and skeleton loaders.
### **Authentication**
- Role-based login & registration (Rider, Driver, Admin).
- Persistent login using JWT.
- Logout & session management.
- Blocked/Suspended users redirected to a status page.
### **Rider Features**
- Book rides with pickup & destination details.
- View ride history with filters and pagination.
- Manage profile information and password updates.
- Emergency SOS button (during rides) to notify contacts.
### **Driver Features**
- Online/Offline toggle to manage availability.
- Accept/Reject ride requests.
- Earnings Dashboard with charts (daily, weekly, monthly).
- Ride history with filters & pagination.
- Profile and vehicle details management.
### **Admin Features**
- Manage users (search, filter, block/unblock, approve/suspend).
- View all rides with advanced filtering.
- Analytics Dashboard with revenue & activity charts.
### **General UI/UX**
- Role-based navigation menus with dropdowns.
- Toast notifications for success & error states.
- Guided Tour for first-time users.
- Light/Dark mode toggle.
- Global error handling & form validation.
---
## Technology Stack
- **Frontend Framework**: React.js (with React Router for navigation)
- **State Management**: Redux Toolkit + RTK Query
- **Language**: TypeScript
- **Styling**: Tailwind CSS, Shadcn Ui
- **Charts**: Recharts
- **Notifications**: React Hot Toast
- **Guided Tour**: Driver.js
- **Backend API**: Node.js, Express, Mongoose, JWT, bcrypt, zod
---
## Setup Instructions
### **1. Clone Repositories**
```bash
# Frontend
git clone https://github.com/devsafix/ride-booking-system-client
cd ride-booking-system-client
# Backend
git clone https://github.com/devsafix/ride-booking-system-backend
cd ride-booking-system-backend
```
### **2. Install Dependencies**
```bash
npm install
```
### **3. Environment Variables**
Create a `.env` file in **frontend**:
```env
VITE_BASE_URL=http://localhost:5000/api/v1
```
### **4. Run Locally**
```bash
npm run dev
```
### **5. Build for Production**
```bash
npm run build
```
---
## Test Credentials
### Rider
- Email: [devsafix@gmail.com](mailto:rider@test.com)
- Password: 12345678
### Driver
- Email: [demodriver@gmail.com](mailto:driver@test.com)
- Password: 12345678
### Admin
- Email: [admin@ride.com](mailto:admin@test.com)
- Password: 12345678
---
## Author
**Kawser Ferdous Safi** – [devsafix.vercel.app](https://devsafix.vercel.app)