A sophisticated dark blue themed car marketplace built with React, TypeScript, and Tailwind CSS.
- Phone number + password authentication
- OTP verification system (6-digit codes)
- 5-minute OTP expiry with 60s resend cooldown
- Rate limiting and attempt tracking
- Secure session management
- Dark blue premium theme with gradients
- Full-screen Toyota Land Cruiser hero section
- Premium brand showcase (Toyota, Porsche, BMW, Mercedes-Benz, etc.)
- Responsive design for all devices
- Smooth animations and hover effects
- SEO optimized
- ✅ Home page with hero section and brand cards
- ✅ Sign up / Sign in pages
- ✅ OTP verification flow
- ✅ Contact page with form
- ✅ Responsive navigation
- Car listings with advanced filtering
- Admin dashboard with real-time data
- User dashboard for orders/wishlist
- Add new car functionality
- Dynamic data management
- Frontend: React 18, TypeScript, Tailwind CSS
- UI Components: shadcn/ui, Radix UI
- Routing: React Router v6
- State Management: TanStack Query
- Icons: Lucide React
- Build Tool: Vite
The app uses a comprehensive dark blue design system with:
- Semantic color tokens
- Custom gradients and shadows
- Responsive typography
- Smooth transitions and animations
- Premium brand aesthetics
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build- User enters phone number + password
- System sends 6-digit OTP to phone
- User verifies OTP within 5 minutes
- Successful verification redirects to dashboard
- Live: https://car.connect
Playwright smoke tests run on each push via GitHub Actions.
Locally:
npm run build
npx playwright install --with-deps
BASE_URL=http://localhost:4173 npm run preview &
npx wait-on http://localhost:4173 && npx playwright test --reporter=lineTo enable full functionality including car management, user dashboards, and real-time data:
- Connect to Supabase backend
- Set up database tables for cars, users, orders
- Implement car listing and filtering
- Create admin and user dashboards
- Add car management functionality
For questions or support, use the contact form in the app or reach out through the provided contact information.