A modern React-based platform for connecting customers with professional drivers for their own vehicles. This application has been converted from Next.js to a pure React application using Vite and React Router.
-
Customer Features:
- Browse and search for professional drivers
- Book drivers for hourly, daily, or outstation trips
- View driver ratings, reviews, and experience
- Manage bookings and track trip history
- Secure payment processing
-
Driver Features:
- Driver registration and verification
- Manage booking requests and availability
- Track earnings and performance metrics
- View customer reviews and ratings
-
Admin Features:
- Platform management and monitoring
- Driver verification and approval
- User management and support
- Analytics and reporting
- Frontend: React 19, TypeScript
- Build Tool: Vite
- Routing: React Router DOM
- Styling: Tailwind CSS
- UI Components: Radix UI + Custom Components
- Icons: Lucide React
- Forms: React Hook Form
- Validation: Zod
src/
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (buttons, cards, etc.)
│ └── theme-provider.tsx
├── pages/ # Page components
│ ├── auth/ # Authentication pages
│ ├── dashboard/ # Dashboard pages for different user types
│ ├── HomePage.tsx # Landing page
│ ├── SearchPage.tsx # Driver search page
│ └── BookingPage.tsx # Booking management
├── lib/ # Utility functions
├── hooks/ # Custom React hooks
├── styles/ # Global styles
├── App.tsx # Main application component
└── main.tsx # Application entry point
- Node.js (version 18 or higher)
- npm or yarn package manager
- Clone the repository:
git clone <repository-url>
cd driveme-platform- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
/- Home page with landing content/auth/login- User login (Customer, Driver, Admin)/auth/register- User registration (Customer, Driver)/search- Driver search and filtering/booking/:id- Booking details and management/dashboard/customer- Customer dashboard/dashboard/driver- Driver dashboard/dashboard/admin- Admin dashboard
- Multi-role login (Customer, Driver, Admin)
- Registration forms with validation
- Password visibility toggle
- Terms and conditions acceptance
- Location-based driver search
- Advanced filtering (rating, experience, verification)
- Sorting options (rating, price, distance)
- Driver profiles with detailed information
- Date and time selection
- Duration options (hourly, daily)
- Location-based booking
- Booking confirmation flow
- Customer Dashboard: Booking history, active bookings, total spent
- Driver Dashboard: Earnings, booking requests, performance metrics
- Admin Dashboard: Platform analytics, user management, activity monitoring
The application uses a modern, responsive design with:
- Tailwind CSS for utility-first styling
- Custom color scheme with blue accent colors
- Responsive grid layouts
- Interactive hover effects and transitions
- Consistent spacing and typography
Currently using React's built-in state management:
useStatefor local component stateuseEffectfor side effects- Props for component communication
- Backend API integration
- Real-time messaging between customers and drivers
- Payment gateway integration
- Push notifications
- Mobile app development
- Advanced analytics and reporting
- Multi-language support
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License.
For support and questions, please contact the development team or create an issue in the repository.