Portfolio
HomeAboutProjectsContact

EV Website – Electric Vehicle Dealership Platform

A comprehensive electric vehicle dealership platform with admin CMS, built using Next.js, TypeScript, Prisma, PostgreSQL, and AWS S3 for managing EV bikes, batteries, parts, and services.

Jan 2025
1 Repository

Technology Stack

Next.js 16
TypeScript
React 19
Tailwind CSS 4
Shadcn/ui + Radix UI
Prisma ORM
PostgreSQL
AWS S3
NextAuth.js
React Hook Form
Zod
TanStack Table
Embla Carousel
Sonner

Key Features

Complete EV bike showcase with detailed specifications
Battery and parts catalog with category management
Professional services with multi-tier pricing
Admin CMS dashboard with full CRUD operations
AWS S3 image storage with gallery management
Hierarchical category system with subcategories
Contact form with admin management interface
Responsive design with dark/light theme support
Real-time dashboard analytics and activity tracking

Tags

Next.js
TypeScript
Prisma
PostgreSQL
AWS S3
NextAuth
Tailwind CSS
Shadcn/ui
React Hook Form

Project Details

A comprehensive electric vehicle dealership platform that enables businesses to showcase and manage EV bikes, batteries, parts, and services with an intuitive admin CMS and modern customer-facing interface.

System Architecture:

Full-Stack E-commerce & CMS Platform (1 Repository)

  • Frontend: Next.js 16 (App Router) with TypeScript and Tailwind CSS 4
  • Backend: Node.js API routes with Prisma ORM and PostgreSQL
  • Authentication: NextAuth.js with credentials-based admin authentication
  • Database: Relational schema with hierarchical categories, products, and galleries
  • Media & Storage: AWS S3 for scalable image storage with pre-signed URLs
  • UI Components: Shadcn/ui with Radix UI primitives
  • Animations: custom scroll animations for enhanced UX

Core Features:

Customer-Facing Features

  1. EV Bike Showcase: Browse electric vehicles with detailed specifications (speed, range, battery, charging)
  2. Battery & Parts Catalog: Comprehensive product listings with categories, pricing, and GST calculations
  3. Services Management: Professional service offerings with pricing tiers (basic, standard, premium)
  4. Product Galleries: Multi-image galleries with lightbox viewing
  5. Contact System: Integrated contact form with admin management
  6. Responsive Design: Mobile-first approach with smooth animations

Advanced Features:

Admin CMS Dashboard

  • Complete CRUD Operations: Full management for vehicles, batteries, parts, services, and categories
  • Dashboard Analytics: Real-time statistics and recent activity tracking
  • Image Management: AWS S3 integration with main and gallery image uploads
  • Category Hierarchy: Parent-child category system with subcategory support
  • Inventory Control: Stock status, pricing with GST, SKU management, and GTIN support
  • Service Pricing Tiers: Multi-tier pricing structure for services

Media & Image Management

  • AWS S3 Integration: Secure and scalable image storage with organized prefixes
  • Pre-signed URLs: Direct client-side uploads with signed URL generation
  • Image Galleries: Drag-and-drop reordering and multi-image support per product
  • Optimized Storage: Structured S3 bucket organization by service type

User Experience

  • Custom Animations: ShinyText effects and scroll-based reveals
  • Skeleton Loaders: Seamless loading states throughout the application
  • Dark/Light Theme: System-aware theming with next-themes
  • Carousel Components: Embla Carousel for featured vehicle showcases

Technical Implementation:

Frontend

  • Modern Stack: Next.js 16 with React 19 and TypeScript
  • Styling: Tailwind CSS 4 with custom color system and design tokens
  • UI Library: Shadcn/ui components built on Radix UI
  • Forms: React Hook Form with Zod validation
  • Tables: TanStack Table for admin data management
  • Notifications: Sonner toast notifications

Backend

  • Prisma ORM: Type-safe database queries and migrations
  • PostgreSQL: Relational database with optimized schema
  • Server Actions: Next.js App Router API routes
  • AWS SDK: S3 client for file uploads and management
  • NextAuth.js: JWT-based authentication with credentials provider

Administrative Features:

  • Dashboard Overview: Statistics cards for vehicles, batteries, parts, and services
  • Content Management: Full CRUD interface for all entity types
  • Contact Management: View and manage customer inquiries
  • Category System: Hierarchical category management with parent-child relationships
  • Image Galleries: Upload and manage multiple images per product
  • Product Specifications: Detailed specs management for EV bikes

Advanced System Features:

Product Management

  • EV Bikes: Complete vehicle listings with specs (seats, top speed, range, battery, charging)
  • Batteries & Parts: SKU-based inventory with pricing, GST, and stock status
  • Services: Service listings with features, benefits, process steps, duration, and warranty
  • Pricing Tiers: Multi-tier pricing for services (basic, standard, premium)
  • Tag System: Flexible tagging for products and categorization

Database Schema

  • Polymorphic Images: Unified image table for all product types
  • Relationships: Proper foreign key constraints and cascading deletes
  • Timestamps: Automatic createdAt and updatedAt tracking
  • Indexing: Optimized indexes for performance

Business Impact:

This EV dealership platform streamlines the entire vehicle sales and service workflow. Customers can easily browse electric vehicles, batteries, parts, and services, while administrators have complete control over inventory, pricing, and content management through an intuitive CMS dashboard.

This project demonstrates expertise in full-stack Next.js development, admin CMS design, AWS S3 integration, database schema design, authentication & security, and modern UI/UX with animations.