Skip to content
BranchesTags

Repository files navigation

🚗 carVo - Modern Car Selling Platform

📚 Documentation

Full documentation available here:

A sophisticated, modern car selling and buying platform built with Next.js 15, featuring AI-powered car comparison, intelligent search, and a premium user experience.

themeforest

✨ Features

🎯 Core Functionality

  • Browse Cars: Extensive car listings with advanced filtering and sorting
  • Smart Search: AI-powered search with intelligent filters
  • Car Comparison: Compare up to 3 cars with AI recommendations
  • Sell Your Car: Multi-step car listing process with image uploads
  • Wishlist & Cart: Save favorite cars and manage purchases
  • User Dashboard: Comprehensive user management system

🤖 AI-Powered Features

  • Smart Recommendations: Personalized car suggestions based on user preferences
  • Intelligent Comparison: AI analyzes user needs and recommends the best car
  • Preference Learning: System learns from user behavior to improve suggestions
  • Price Analysis: Smart pricing insights and market comparisons

🎨 Modern Design

  • Glassmorphism UI: Modern frosted glass design elements
  • Responsive Design: Perfect experience on all devices (mobile, tablet, desktop)
  • Dark Mode: Complete dark theme support
  • Accessibility: WCAG compliant with screen reader support
  • Smooth Animations: 60fps animations with reduced motion support

🔧 Technical Features

  • Next.js 15: Latest Next.js with App Router and Turbopack
  • TypeScript: Full type safety throughout the application
  • CSS Modules: Scoped styling with modern CSS features
  • Context API: State management for cart, wishlist, and comparison
  • Portal Modals: Proper modal rendering with React portals
  • SEO Optimized: Meta tags, structured data, and sitemap

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Git

Installation

  1. Clone the repository

    git clone https://github.com/EasyCodingTutorial/carVo.git
cd carVo

  2. Install dependencies

    npm install
# or
yarn install

  3. Run the development server

    npm run dev
# or
yarn dev

  4. Open your browser Navigate to http://localhost:3000

Build for Production

npm run build
npm start

📁 Project Structure

src/
├── app/ # Next.js App Router pages
│ ├── cars/ # Car listings and details
│ ├── compare/ # Car comparison page
│ ├── sell/ # Sell car form
│ ├── about/ # About page
│ ├── contact/ # Contact page
│ ├── dashboard/ # User dashboard
│ ├── login/ # Authentication
│ └── globals.css # Global styles
├── components/ # Reusable components
│ ├── layout/ # Layout components
│ │ ├── Header.tsx # Navigation header
│ │ └── Footer.tsx # Site footer
│ ├── ui/ # UI components
│ │ ├── Button.tsx # Button component
│ │ ├── Card.tsx # Card component
│ │ ├── CarCard.tsx # Car listing card
│ │ ├── CompareCarCard.tsx # Comparison card
│ │ ├── QuickViewModal.tsx # Car quick view
│ │ ├── Pagination.tsx # Pagination component
│ │ └── LoadingSpinner.tsx # Loading states
│ └── seo/ # SEO components
├── contexts/ # React Context providers
│ ├── CartWishlistContext.tsx
│ ├── CompareContext.tsx
│ └── ThemeContext.tsx
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
└── utils/ # Utility functions

🎨 Design System

Color Palette

/* Primary Colors */--primary-color:#1e293b; /* Slate 800 */--primary-hover:#0f172a; /* Slate 900 */--secondary-color:#3b82f6; /* Blue 500 */--accent-color:#06b6d4; /* Cyan 500 *//* Text Colors */--text-primary:#0f172a; /* Slate 900 */--text-secondary:#475569; /* Slate 600 */--text-muted:#64748b; /* Slate 500 *//* Background Colors */--background:#ffffff; /* White */--background-secondary:#f8fafc; /* Slate 50 */--background-tertiary:#f1f5f9; /* Slate 100 */

Typography

  • Font Family: Inter (Google Fonts)
  • Font Weights: 400, 500, 600, 700, 800, 900
  • Font Sizes: Responsive scale from 0.75rem to 4rem

Spacing System

  • Base Unit: 0.25rem (4px)
  • Scale: 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem, 6rem

🔧 Key Components

CarCard Component

interfaceCarCardProps{car: Car;}
  • Displays car information with image, price, specs
  • Wishlist and compare functionality
  • Quick view modal integration
  • Responsive design with hover effects

Compare System

interfaceCompareContextType{compareList: Car[];addToCompare: (car: Car)=>void;removeFromCompare: (carId: string)=>void;clearCompare: ()=>void;isInCompare: (carId: string)=>boolean;canAddMore: boolean;}
  • Compare up to 3 cars side by side
  • AI-powered recommendations
  • User preference analysis
  • Smart insights and suggestions

Search & Filtering

  • Advanced search with multiple filters
  • Real-time filtering and sorting
  • URL-based filter state
  • Responsive filter sidebar

🎯 User Experience Features

Navigation

  • Modern Glassmorphism Design: Frosted glass navigation with backdrop blur
  • Responsive Menu: Collapsible mobile navigation
  • Search Integration: Global search functionality
  • User Actions: Quick access to wishlist, cart, and compare

Car Browsing

  • Grid/List Views: Toggle between different viewing modes
  • Advanced Filters: Brand, price, year, fuel type, transmission, location
  • Smart Sorting: Price, year, mileage, newest first
  • Pagination: Efficient pagination with 12 cars per page

Car Comparison

  • Selection Mode: Special mode for selecting cars to compare
  • AI Recommendations: Personalized suggestions based on preferences
  • Detailed Comparison: Side-by-side specification comparison
  • Smart Insights: Intelligent analysis of car features

Sell Your Car

  • Multi-Step Form: 4-step process with progress indicator
  • Image Upload: Support for up to 10 car images
  • Feature Selection: Comprehensive feature checklist
  • Form Validation: Real-time validation with error handling

📱 Responsive Design

Breakpoints

/* Mobile First Approach */@media (max-width:640px) { /* Mobile */ }
@media (max-width:768px) { /* Tablet */ }
@media (max-width:1024px) { /* Desktop */ }
@media (max-width:1200px) { /* Large Desktop */ }

Mobile Optimizations

  • Touch-friendly interface with 44px minimum touch targets
  • Optimized images with Next.js Image component
  • Reduced animations on mobile devices
  • Simplified navigation for small screens

♿ Accessibility Features

WCAG Compliance

  • Keyboard Navigation: Full keyboard accessibility
  • Screen Reader Support: Proper ARIA labels and roles
  • Color Contrast: WCAG AA compliant color ratios
  • Focus Management: Visible focus indicators
  • Reduced Motion: Respects user motion preferences

Semantic HTML

  • Proper heading hierarchy (h1-h6)
  • Semantic landmarks (nav, main, aside, footer)
  • Form labels and descriptions
  • Alt text for all images

🌙 Dark Mode

Complete dark theme support with:

  • Automatic system preference detection
  • Manual theme toggle
  • Persistent theme selection
  • Optimized colors for dark environments

🔍 SEO Optimization

Meta Tags

exportconstmetadata: Metadata={title: "carVo - Buy & Sell Cars Online",description: "Find your perfect car or sell your vehicle with ease.",keywords: "cars, buy cars, sell cars, used cars, new cars",openGraph: {title: "carVo - Buy & Sell Cars Online",description: "Find your perfect car or sell your vehicle with ease.",images: ["/og-image.jpg"],},};

Performance

  • Next.js Image optimization
  • Code splitting and lazy loading
  • Optimized bundle size
  • Fast page transitions

🧪 Testing

Manual Testing Checklist

  • Car browsing and filtering
  • Search functionality
  • Car comparison system
  • Wishlist and cart operations
  • Sell car form submission
  • Responsive design on all devices
  • Dark mode toggle
  • Accessibility features

🚀 Deployment

Vercel (Recommended)

  1. Connect your GitHub repository to Vercel
  2. Configure environment variables
  3. Deploy automatically on push to main branch

Other Platforms

  • Netlify: Static site deployment
  • AWS Amplify: Full-stack deployment
  • Docker: Containerized deployment

🔧 Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SITE_URL=http://localhost:3000NEXT_PUBLIC_API_URL=your-api-url

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development Guidelines

  • Follow TypeScript best practices
  • Use CSS Modules for styling
  • Write semantic HTML
  • Ensure accessibility compliance
  • Test on multiple devices and browsers

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • Next.js Team - For the amazing framework
  • Vercel - For hosting and deployment
  • Inter Font - For the beautiful typography
  • React Team - For the powerful UI library

📞 Support

For support, email ecoding45@gmail.com.

🗺️ Roadmap

Phase 1 (Current)

  • Basic car browsing and filtering
  • Car comparison system
  • Sell car functionality
  • Responsive design
  • Dark mode support

Phase 2 (Upcoming)

  • User authentication and profiles
  • Real-time chat with sellers
  • Advanced search with AI
  • Mobile app development
  • Payment integration

Phase 3 (Future)

  • Car financing calculator
  • Insurance integration
  • Virtual car tours
  • Blockchain-based ownership verification
  • Machine learning price predictions

📚 Documentation

Full documentation available here:

Built with ❤️ by the Easy Coding Tutorial Team

Making car buying and selling simple, transparent, and enjoyable.

About

AI-powered car buying and selling platform built with Next.js 15, featuring smart search, car comparison, recommendations, and a modern responsive UI.

car-vo.vercel.app

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages