Modern Auto Dealership Platform – Next.js & Strapi CMS Integration

December 1, 2024

Concept snapshot

Record date: December 1, 2024. Technology and screenshots describe the prototype as documented on this date. Any performance observations belong to the same point-in-time record. No current client deployment is implied.

Overview

This Modern Auto Dealership Platform is a comprehensive, production-ready demonstration project showcasing enterprise-level web development for the automotive industry. Built with Next.js 14 App Router and powered by Strapi CMS hosted on Railway, the platform delivers a complete digital dealership experience with dynamic inventory management, credit application processing, automated email notifications, and sophisticated UI animations. Live Demo: http://dealer-mock.apalaugonzalez.com/

Key Features

Dynamic Vehicle Inventory

Real-time vehicle listings managed through Strapi CMS with detailed specifications
Advanced multi-criteria filtering (make, model, year, price range, mileage, fuel type, transmission, condition)
Featured vehicles carousel with infinite scroll animation
Grid and list view modes with sort options (price, mileage, year, featured status)
Individual vehicle detail pages with image galleries and comprehensive specifications
Stock number tracking and VIN display

Advanced UI/UX

Seamless dark/light mode with next-themes integration
Framer Motion animations throughout (staggered reveals, transitions, carousel effects)
Mobile-first responsive design with touch-optimized interfaces
Floating call button and sticky mobile navigation bar
Contact options modal with multiple communication channels
Loading skeletons and optimistic UI patterns
Opening hours status indicator

Credit Application System

Comprehensive multi-step credit application form
Personal information, employment history, and residence details collection
Co-applicant support for joint applications
US state validation with complete dropdown list
Input masking for phone numbers, SSN, and dates
Real-time form validation with error handling
Legal disclosure agreements (Terms of Use, Privacy Policy, Credit Application Disclosure)
Checkbox confirmation requirements
Email notification system via Nodemailer

Contact & Communication

Dedicated contact page with topic-based inquiry system
Phone, email, and location information display
Automated email notifications for contact inquiries
SMTP integration with Nodemailer for reliable email delivery
Mobile-optimized contact forms with touch-friendly inputs
Contact options modal accessible throughout the site

Bilingual Support

English/Spanish language toggle
React Context API for language state management
LocalStorage persistence for language preferences
Bilingual content throughout the platform

Information Pages

Comprehensive About Us page with dealership statistics
Customer testimonials and trust indicators
Business hours and location details with Google Maps integration
Service offerings and value propositions

Search & Discovery

Homepage hero section with quick search functionality
Dynamic make/model dropdowns with cascading filters
Price range filtering
Keyword search across vehicle titles, descriptions, and features
Real-time filter updates with URL parameter synchronization

Technologies Used

Frontend

Next.js 14 – App Router, Server Components, API Routes, and optimized performance
React 18 – Modern hooks, Context API, and component architecture
TypeScript – Full type safety across the entire codebase
Tailwind CSS – Utility-first styling with custom design system
Framer Motion – Advanced animations and transitions
next-themes – Dark mode implementation with system preference detection
React Hook Form – Efficient form state management and validation
Zod – Schema validation for forms
React Icons & Lucide React – Comprehensive icon libraries
React Input Mask – Formatted input fields for phone, SSN, and dates
React Datepicker – Calendar UI for date selection
RC Slider – Price range slider component

Backend & Infrastructure

Strapi CMS – Headless CMS for vehicle inventory management (hosted on Railway)
Nodemailer – Email delivery system for inquiries and applications
Next.js API Routes – RESTful endpoints for vehicle data, contact forms, and credit applications
Railway – Strapi backend hosting and deployment
Vercel – Frontend deployment with edge optimization and continuous deployment

Development Tools

Autoprefixer – CSS vendor prefixing
PostCSS – CSS transformation pipeline
ESLint – Code quality and consistency

Technical Architecture

API Integration

Custom API routes proxying Strapi CMS requests
Dynamic filtering with Strapi query parameters
Bearer token authentication for secure CMS access
Image optimization and CDN delivery
Error handling and fallback mechanisms

State Management

React Context for language preferences
URL-based state for filters and search
LocalStorage for persistent user preferences (theme, language)
Optimistic updates for better perceived performance

Performance Optimizations

Next.js Image component with automatic optimization
Dynamic imports for code splitting
API response caching strategies
Efficient re-renders with React hooks optimization
Mobile-first loading strategies

Form Handling

Client-side validation with immediate feedback
Server-side validation for security
Accessibility-compliant form fields
Mobile-optimized touch targets (min 48px)
Input masking for data consistency

Challenges and Solutions

Challenge 1: Complex Filtering System

Solution: Implemented a sophisticated filtering architecture using URL search parameters for shareable links, combined with dynamic API queries to Strapi. Built cascading dropdowns where model options update based on selected make, with loading states and error handling.

Challenge 2: Mobile Performance with Animations

Solution: Utilized Framer Motion's performance optimizations with GPU-accelerated transforms, implemented intersection observers for scroll-triggered animations, and used CSS containment for carousel performance. Added pause functionality for the infinite carousel to reduce CPU usage.

Challenge 3: Form Data Collection & Privacy

Solution: Created a comprehensive credit application system with proper data validation, clear legal disclosures, and secure transmission. Implemented SMTP email delivery for form submissions rather than storing sensitive data, ensuring GDPR and privacy compliance.

Challenge 4: Strapi CMS Integration

Solution: Developed a flexible API layer that normalizes Strapi responses, handles image URL transformation, manages authentication tokens via environment variables, and provides fallback data for development. Implemented proper error boundaries and loading states.

Challenge 5: Theme Consistency

Solution: Built a comprehensive design system with Tailwind CSS custom utilities, ensured all components support dark mode with consistent color schemes, and prevented hydration mismatches with proper next-themes implementation.

Project Structure

dealer-mock/
├── app/                          # Next.js App Router
│   ├── about-us/                 # About page with company info
│   ├── api/                      # API Routes
│   │   ├── contact-us/          # Contact form handler
│   │   ├── credit-application/  # Credit app submission
│   │   ├── vehicles/            # Vehicle listing with filters
│   │   │   ├── makes/           # Make dropdown data
│   │   │   └── models/          # Model dropdown data
│   │   └── vehicle-by-slug/     # Individual vehicle details
│   ├── cars/                     # Vehicle inventory pages
│   │   ├── page.tsx             # Listing with filters
│   │   └── [slug]/              # Dynamic vehicle details
│   ├── contact-us/              # Contact form page
│   ├── credit-application/      # Credit application form
│   │   ├── Modal.tsx            # Legal text modals
│   │   ├── LegalText.tsx        # Terms & privacy content
│   │   └── States.ts            # US states data
│   ├── layout.tsx               # Root layout with providers
│   └── page.tsx                 # Homepage
├── components/                  # Reusable components
│   ├── Header.tsx              # Navigation with mobile menu
│   ├── Footer.tsx              # Site footer
│   ├── HeroWithSearch.tsx      # Homepage search section
│   ├── VehicleCarousel.tsx     # Infinite scroll carousel
│   ├── ContactOptionsModal.tsx # Contact modal
│   ├── CallFloatingButton.tsx  # Floating CTA
│   ├── MobileNavBar.tsx        # Mobile bottom nav
│   ├── ThemeSwitch.tsx         # Dark mode toggle
│   └── OpeningStatus.tsx       # Business hours indicator
├── contexts/                    # React Context providers
│   └── LanguageContext.tsx     # Bilingual support
└── styles/                      # Global styles
    └── globals.css             # Tailwind and custom CSS

Outcome

This platform demonstrates advanced full-stack development capabilities suitable for production automotive dealership websites. The project showcases:

Professional UI/UX: Polished animations, intuitive navigation, and mobile-first design
Enterprise Features: Credit applications, email automation, CMS integration, bilingual support
Modern Architecture: Next.js 14 App Router, TypeScript, headless CMS, API-driven design
Performance: Optimized images, efficient animations, lazy loading, and caching strategies
Scalability: Modular components, type-safe code, and separation of concerns

The platform successfully demonstrates the integration of multiple complex systems (CMS, email, forms, authentication) into a cohesive, user-friendly experience. It serves as a comprehensive portfolio piece showcasing expertise in modern web development, API integration, state management, form handling, email automation, and responsive design.

Live Site

View Project