SANAA Global Ltd - Premium Vehicle & Machinery Importer

Bangladesh's trusted importer of premium reconditioned vehicles, automotive parts, and industrial machinery from Japan, China, Korea, UK & Germany. A full-stack web application featuring dynamic inventory management, interactive 3D model visualization, and a comprehensive admin dashboard.

📋 Overview

This project is a modern, production-ready web platform built for Sanaa Global, showcasing automotive inventory with advanced filtering, real-time content management, and an immersive user experience. The application demonstrates full-stack development capabilities including authentication, database design, API development, and responsive UI implementation.

✨ Key Features

Frontend

• Interactive 3D Model Viewer - Three.js integration for viewing 3D car models
• Advanced Car Filtering - Multi-criteria search and filter system
• Responsive Design - Mobile-first approach with Tailwind CSS
• Dynamic Animations - Framer Motion for smooth transitions and scroll effects
• SEO Optimized - Dynamic sitemap and robots.txt generation
• Image Gallery - Interactive car photo galleries with lightbox functionality
• Contact Form - Email integration with server-side validation

Backend & Admin

• Authentication System - Secure NextAuth.js implementation with session management
• Content Management Dashboard - Full CRUD operations for cars and brands
• Media Management - Dedicated media server with upload and organization capabilities
• Drag & Drop Interface - Intuitive car image reordering with dnd-kit
• Rich Text Editor - React Quill integration for detailed car descriptions
• RESTful API - Well-structured API routes for all resources
• Password Management - Secure password change functionality

Database & Backend Infrastructure

• MongoDB Integration - Mongoose ODM for data modeling
• Relational Data Structure - Brand-Car relationships with referential integrity
• Media Server - Separate Express.js server for handling file uploads
• Email Service - Nodemailer integration for contact form submissions

🛠️ Tech Stack

Frontend

• Next.js 16 - React framework with App Router
• React 19 - UI library with latest features
• Tailwind CSS 4 - Utility-first CSS framework
• Three.js - 3D graphics library
• @react-three/fiber & @react-three/drei - React renderer for Three.js
• Framer Motion - Animation library
• Lucide React - Icon library
• Axios - HTTP client

Backend

• Next.js API Routes - Serverless API endpoints
• NextAuth.js - Authentication solution
• MongoDB & Mongoose - Database and ODM
• Bcrypt.js - Password hashing
• Nodemailer - Email sending
• Express.js - Media server
• Multer - File upload handling
• CORS - Cross-origin resource sharing

Development Tools

• ESLint - Code linting
• pnpm - Fast, efficient package manager
• Nodemon - Development server auto-restart
• PostCSS - CSS processing

🏗️ Project Structure

├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── api/               # API routes (cars, brands, auth, contact)
│   │   ├── dashboard/         # Admin panel pages
│   │   ├── cars/              # Public car listings
│   │   ├── brands/            # Brand pages
│   │   └── ...               # Other pages
│   ├── components/
│   │   ├── admin/            # Dashboard components
│   │   ├── cars/             # Car-related components
│   │   ├── common/           # Shared components (Navbar, Footer)
│   │   ├── contact/          # Contact form
│   │   └── home/             # Homepage sections
│   ├── models/               # Mongoose schemas
│   ├── lib/                  # Utilities and configurations
│   └── constants/            # Application constants
├── media-server/             # Separate Express server for file uploads
├── public/                   # Static assets
└── scripts/                  # Utility scripts

API Routes

Public Endpoints

• GET /api/cars - Fetch all cars with filtering
• GET /api/cars/[id] - Get single car details
• GET /api/brands - Fetch all brands
• GET /api/brands/[id] - Get brand with associated cars
• POST /api/contact - Submit contact form

🎨 Features Showcase

Admin Dashboard

• Comprehensive car management with image upload and reordering
• Brand management with logo upload
• Media library for managing uploaded assets
• Secure authentication with role-based access
• Rich text editor for detailed descriptions
• Real-time preview of changes

User Experience

• Smooth page transitions and scroll animations
• Progressive image loading
• Mobile-responsive navigation
• Interactive car filters (brand, price, year, etc.)
• FAQ accordion sections
• Contact form with validation

Performance Optimizations

• Server-side rendering (SSR) for SEO
• Image optimization with Next.js Image component
• Code splitting and lazy loading
• Efficient state management
• Optimized database queries

🔒 Security Features

• Password hashing with bcrypt
• Protected API routes with NextAuth middleware
• CSRF protection
• Input validation and sanitization
• Secure session management
• Environment variable protection

📱 Responsive Design

Fully responsive across all devices:

• Desktop (1920px+)
• Laptop (1024px - 1919px)
• Tablet (768px - 1023px)
• Mobile (320px - 767px)

🤝 Contributing

This is a portfolio project. For inquiries or collaboration opportunities, please reach out through the contact form on the website.

📄 License

This project is private and proprietary. All rights reserved.

👨‍💻 Developer

Full-Stack Developer

• Frontend: React, Next.js, Tailwind CSS, Three.js
• Backend: Node.js, Express.js, MongoDB
• DevOps: Vercel, Git, CI/CD

---

Built with ❤️ using Next.js and modern web technologies