A modern, responsive web application for a premium vehicle dealership built with Next.js 16, featuring an extensive vehicle inventory, filtering system, and comprehensive accessibility support.
- Complete Vehicle Inventory - Browse extensive collection of cars, SUVs, and luxury vehicles
- Advanced Filtering System - Filter by brand, model, year, price range, and more
- Detailed Vehicle Pages - Comprehensive vehicle information with high-quality image galleries
- Image Lightbox - Full-screen image viewing with navigation controls
- Equipment Details - Detailed vehicle specifications and equipment lists
- About Us - Company history and mission
- Our Services - Automotive maintenance, repairs, and professional car care
- Contact Form - Integrated contact form with email functionality
- Interactive Map - Google Maps integration for location
- Partner Showcase - Featured automotive partners and brands
- WCAG 2.1 Compliant - Full ARIA support for screen readers
- Keyboard Navigation - Complete keyboard accessibility
- Responsive Design - Mobile-first approach with seamless desktop experience
- Performance Optimized - Dynamic imports, image optimization, and CSS minification
- SEO Ready - Meta tags, structured data, and semantic HTML
- Next.js 16.2 with App Router and Turbopack
- React 19.2 with TypeScript
Framework versions are kept on patched releases for upstream security advisories (for example the Next.js May 2026 security release).
- Tailwind CSS for styling with PostCSS optimization
- Framer Motion for animations
- Font Awesome for icons
- TanStack Query (React Query) for server state management
- React Hook Form with Zod validation
- Server Actions for form handling
- Next.js API Routes for backend functionality
- Nodemailer for email services
- JOSE for JWT token management
- TypeScript for type safety
- ESLint for code quality
- CSSnano for CSS minification
- Autoprefixer for CSS compatibility
- Node.js 18+
- npm, yarn, pnpm, or bun
Clone the repository
Install dependencies
Set up environment variables
Create a .env.local file in the root directory:
Run the development server
Open your browser
Navigate to http://localhost:3000 (or the port shown in terminal)
autodemo1/
├── app/ # Next.js App Router pages
│ ├── about-us/ # About Us page
│ ├── api/ # API routes
│ │ ├── company/ # Company data API
│ │ └── vehicles/ # Vehicle data APIs
│ ├── contact/ # Contact page
│ ├── services/ # Services page
│ └── vehicles/ # Vehicle pages
│ └── [id]/ # Dynamic vehicle detail pages
├── components/ # Reusable UI components
│ ├── layout/ # Layout components (Header, Footer, etc.)
│ ├── providers/ # Context providers
│ └── ui/ # UI components (Button, Input, Modal, etc.)
├── constants/ # Application constants
├── features/ # Feature-based components
│ ├── contact/ # Contact form functionality
│ ├── partners/ # Partner showcase
│ ├── services/ # Services display
│ └── vehicles/ # Vehicle-related features
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
VehicleGrid- Grid layout for vehicle listingsVehicleItem- Individual vehicle card componentVehicleDetail- Detailed vehicle information pageVehicleImageSlider- Image gallery with lightboxFilters- Advanced filtering system
Modal- Reusable modal componentButton- Customizable button componentInput- Form input with validationSpinner- Loading indicatorNavLink- Navigation link with hover effects
Header- Site header with logo and company dataFooter- Site footer with social linksNavbar- Main navigationBgImage- Dynamic background images
# Development
npm run dev # Start development server with Turbopack
# Production
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically
The app can be deployed to any platform that supports Next.js:
- Netlify
- AWS Amplify
- Railway
- DigitalOcean App Platform
- ARIA Labels - Comprehensive labeling for screen readers
- Keyboard Navigation - Full keyboard accessibility
- Focus Management - Proper focus indicators and management
- Semantic HTML - Proper heading structure and landmarks
- Color Contrast - WCAG compliant color schemes
- Screen Reader Support - Optimized for assistive technologies
- Dynamic Imports - Lazy loading of heavy components
- Image Optimization - Next.js Image component with lazy loading
- CSS Minification - Production CSS optimization
- Font Optimization - Google Fonts with display swap
- Bundle Splitting - Automatic code splitting
- Caching - React Query for efficient data caching
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is private and proprietary. All rights reserved.
For support or questions, please contact us through the contact form on the website or reach out to the development team.
Built with ❤️ using Next.js, React, and TypeScript
npm run dev
# or
yarn dev
# or
pnpm dev
# Email configuration
SMTP_HOST=your-smtp-host
SMTP_PORT=587
SMTP_USER=your-email@example.com
SMTP_PASS=your-email-password
# JWT secret
JWT_SECRET=your-jwt-secret
npm install
# or
yarn install
# or
pnpm install
git clone <repository-url>
cd autodemo1