Welcome to RideList, the ultimate platform for convenient, stress-free car rentals at unbeatable prices. Our comprehensive car rental management system provides both customers and administrators with a seamless experience, featuring advanced booking systems, user authentication, and powerful administrative tools.
- Firebase Authentication: Secure email/password login and registration
- Role-Based Access Control: Separate dashboards for users and administrators
- Protected Routes: Secure access to user and admin areas
- User Profiles: Complete profile management with role indicators
- Extensive Fleet: 25+ vehicles from 8 major brands (BMW, Mercedes, Audi, Tesla, etc.)
- Advanced Filtering: Filter by brand, model, fuel type, transmission, price range, seats, and year
- Linked Dropdowns: Smart brand → model filtering system
- Individual Car Pages: Detailed specifications, galleries, and booking forms
- Real-time Search: Instant filtering and search results
- Integrated Booking Forms: Complete rental booking with date selection
- User Authentication Required: Secure booking process
- Booking Management: Track all bookings with status updates
- Revenue Tracking: Automatic revenue calculation for confirmed bookings
- Customer Information: Complete customer details and contact information
- Personal Booking History: View all past and current rentals
- Booking Status Tracking: Monitor pending, confirmed, and completed bookings
- Profile Management: Update personal information and preferences
- Responsive Design: Optimized for all devices
- Comprehensive Management: Full control over bookings, users, and fleet
- Revenue Analytics: Real-time revenue tracking and reporting
- Booking Status Control: Update booking statuses and manage reservations
- User Management: View and manage customer accounts
- Administrative Tools: Complete backend management capabilities
- Transparent Homepage Navbar: Elegant transparent navigation with glassy scroll effect
- Professional Dropdowns: Modern user profile dropdowns with role indicators
- Responsive Design: Perfect experience across desktop, tablet, and mobile
- Smooth Animations: Fluid transitions and hover effects
- Modern Card Layouts: Beautiful car cards with hover effects and detailed information
- Mobile-First Design: Optimized for mobile devices
- Touch-Friendly Interface: Large touch targets and intuitive gestures
- Responsive Specifications: Proper mobile layout for car details
- Mobile Navigation: Collapsible navigation with user dropdown
- Next.js 14: React framework with App Router and server-side rendering
- TypeScript: Type-safe development with enhanced IDE support
- Tailwind CSS: Utility-first CSS framework for rapid UI development
- Framer Motion: Smooth animations and transitions
- Aceternity UI: Modern UI components and effects
- Firebase Authentication: Secure user authentication and management
- Firestore Database: NoSQL database for storing users, bookings, and data
- Firebase Security Rules: Secure data access and validation
- React Context API: Global state management for authentication
- React Hooks: Modern state management and side effects
- Custom Hooks: Reusable logic for authentication and data fetching
- ESLint & Prettier: Code quality and formatting
- TypeScript: Static type checking
- Git: Version control and collaboration
- Node.js 18+ and npm
- Firebase account for authentication and database
- Clone the repository:
git clone https://github.com/AbdeljalilRajli/RideList.git
cd RideList- Install dependencies:
npm install- Firebase Setup:
- Create a Firebase project at Firebase Console
- Enable Authentication (Email/Password)
- Create a Firestore database
- Copy your Firebase config to
.env.local:
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id- Run the development server:
npm run dev- Create your first admin user:
- Sign up through the app
- Go to Firebase Console → Firestore
- Find your user document and change
rolefromusertoadmin
Open http://localhost:3000 to view the application.
RideList/
├── app/ # Next.js App Router
│ ├── car/[id]/ # Individual car detail pages
│ ├── fleet/ # Car fleet browsing page
│ ├── dashboard/ # User dashboard
│ ├── admin/dashboard/ # Admin dashboard
│ └── layout.tsx # Root layout with metadata
├── components/ # Reusable React components
│ ├── auth/ # Authentication components
│ ├── ui/ # UI components
│ └── forms/ # Form components
├── contexts/ # React Context providers
├── lib/ # Utility functions and Firebase config
├── constants/ # Static data and configurations
├── types/ # TypeScript type definitions
└── public/ # Static assets
- Push your code to GitHub
- Connect your repository to Vercel
- Add your Firebase environment variables
- Deploy automatically
npm run build
npm run start- Browse extensive car fleet with advanced filters
- View detailed car specifications and galleries
- Secure account registration and login
- Book cars with integrated booking system
- Track booking history and status
- Responsive mobile experience
- Complete booking management system
- Real-time revenue tracking and analytics
- User account management
- Booking status updates and control
- Comprehensive admin dashboard
- Mobile-optimized admin tools
The app includes pre-configured Firestore security rules for:
- User authentication and authorization
- Role-based data access
- Secure booking data management
Required environment variables for production:
- Firebase configuration keys
- Optional: Analytics and monitoring keys
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Firebase for authentication and database services
- Next.js team for the amazing React framework
- Tailwind CSS for the utility-first CSS framework
- Aceternity UI for beautiful UI components
- Framer Motion for smooth animations
For support and questions:
- Create an issue on GitHub
- Contact: your-email@example.com
Built with ❤️ by Abdeljalil Rajli