Dream Vehicle is a modern, responsive vehicle dealership website built with React.js. It offers a seamless experience for browsing, searching, and inquiring about premium vehicles with advanced features like mobile swipe navigation, user authentication, and admin management.
Experience the website: Dream Vehicle Website
- 🔍 Advanced Search & Filtering - Find vehicles by make, model, price, and type
- 📱 Mobile-First Design - Responsive with swipe navigation for mobile devices
- 👤 User Authentication - Secure login/register system with role-based access
- 🛡️ Admin Panel - Complete vehicle management and inquiry tracking
- 💾 Local Storage - Persistent data storage for user preferences and inquiries
- 🎨 Modern UI/UX - Clean design with smooth animations and transitions
- ⚡ Performance Optimized - Fast loading with lazy loading and code splitting
📹 Watch Full Video Demo - Complete walkthrough of Dream Vehicle features including mobile swipe navigation, authentication system, and admin dashboard.
Demo Highlights:
- 🔍 Advanced vehicle search and filtering
- 📱 Mobile swipe navigation
- 🔐 User authentication system
- 👨💼 Admin dashboard functionality
- 🎨 Responsive design showcase
- Admin:
admin@dreamvehicle.com/admin123 - Customer:
customer@dreamvehicle.com/customer123
| Technology | Purpose | Version |
|---|---|---|
| React.js | Frontend Framework | 18.2.0 |
| React Router | Navigation & Routing | 6.x |
| CSS3 | Styling & Animations | - |
| Local Storage | Data Persistence | - |
| GitHub Pages | Hosting & Deployment | - |
| Service Worker | PWA Features | - |
- Secure user registration and login
- Role-based access (Admin/Customer)
- Protected routes and components
- Session management with localStorage
- Browse Vehicles: Grid and list view options
- Advanced Filters: Search by make, model, price range, vehicle type
- Vehicle Details: Comprehensive information with image galleries
- Mobile Swipe: Horizontal scrolling on mobile devices
- Responsive Design: Optimized for all screen sizes
- Vehicle CRUD Operations: Add, edit, delete vehicles
- Inquiry Management: View and respond to customer inquiries
- User Management: Monitor registered users
- Analytics: Track website usage and inquiries
- Saved Vehicles: Bookmark favorite vehicles
- Inquiry History: Track submitted inquiries and responses
- Profile Management: Update personal information
- Responsive Interface: Mobile-optimized experience
- Swipe Navigation: Horizontal scrolling for vehicle cards
- Touch Optimized: Smooth touch interactions
- Responsive Grid: Adaptive layouts for all devices
- Fixed Navigation: Persistent header for easy access
- Smooth Animations: Fade-in effects and transitions
- Modern Typography: Clean, readable fonts
- Color Scheme: Professional dark/light theme
- Interactive Elements: Hover effects and micro-interactions
- Node.js (v14 or higher)
- npm or yarn package manager
- Git
# Clone the repository
git clone https://github.com/mahimapaseda/dream-vehicle-website.git
# Navigate to project directory
cd dream-vehicle-website
# Install dependencies
npm install
# Start development server
npm start
# Build for production
npm run build
# Deploy to GitHub Pages
npm run deploy# Install React dependencies
npm install react react-dom react-router-dom
# Install development dependencies
npm install --save-dev gh-pagesdream-vehicle-website/
├── public/
│ ├── index.html # Main HTML template
│ ├── manifest.json # PWA manifest
│ └── sw.js # Service worker
├── src/
│ ├── components/
│ │ ├── AdminPanel.js # Admin dashboard
│ │ ├── CustomerDashboard.js
│ │ ├── Login.js # Authentication
│ │ ├── Register.js
│ │ ├── VehicleCard.js # Vehicle display
│ │ └── VehicleDetails.js
│ ├── App.js # Main application
│ ├── index.js # Entry point
│ └── index.css # Global styles
├── package.json # Dependencies
└── README.md # Documentation
- Semantic HTML: Proper heading structure and semantic elements
- Meta Descriptions: Optimized for search engines
- Open Graph: Social media sharing optimization
- Mobile-Friendly: Google Mobile-Friendly certified
- Fast Loading: Optimized images and code splitting
- Accessibility: WCAG compliant with proper ARIA labels
- Lighthouse Score: 90+ Performance
- Core Web Vitals: Optimized LCP, FID, CLS
- SEO Score: 95+ SEO rating
- Accessibility: 90+ Accessibility score
- Input Validation: Client-side form validation
- XSS Protection: Sanitized user inputs
- CSRF Protection: Secure form submissions
- Content Security Policy: Implemented via service worker
- Secure Headers: Security-focused HTTP headers
| Browser | Version | Support |
|---|---|---|
| Chrome | 80+ | ✅ Full |
| Firefox | 75+ | ✅ Full |
| Safari | 13+ | ✅ Full |
| Edge | 80+ | ✅ Full |
| Mobile Safari | iOS 13+ | ✅ Full |
| Chrome Mobile | Android 8+ | ✅ Full |
# Build and deploy
npm run deploy
# Manual deployment
npm run build
# Upload build folder to hosting service- Add
CNAMEfile to public folder - Configure DNS settings
- Enable HTTPS in repository settings
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow React best practices
- Write clean, commented code
- Test on multiple devices
- Maintain responsive design
- Update documentation
This project is licensed under the MIT License - see the LICENSE file for details.
Mahima Paseda
- GitHub: @mahimapaseda
- Website: Dream Vehicle
- React Team - For the amazing framework
- GitHub Pages - For free hosting
- Unsplash - For high-quality vehicle images
- Community - For feedback and contributions
For support, email mahimapaseda@example.com or create an issue on GitHub.
⭐ Star this repository if you found it helpful!
Keywords: vehicle dealership, car website, React.js, responsive design, mobile-first, vehicle search, admin panel, customer dashboard, modern UI, GitHub Pages, PWA, SEO optimized