SANAA Global Ltd - Premium Vehicle & Machinery Importer
Project Overview
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 filteringGET /api/cars/[id]- Get single car detailsGET /api/brands- Fetch all brandsGET /api/brands/[id]- Get brand with associated carsPOST /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
“I cannot recommend Tarikul Islam highly enough for complex full-stack web engineering projects. When we partnered with him to build the digital infrastructure for Sanaa Global Ltd, our goal was to create a platform that truly reflects the premium nature of our vehicle importing business—and he delivered exactly that. What sets Tarikul apart is his ability to combine polished UI/UX with robust engineering. He developed a visually striking frontend with advanced inventory presentation, including interactive 3D model visualization and a seamless, user-friendly EMI calculator. The platform also includes dynamic FAQ systems and optimized user flows that significantly improve customer understanding and engagement. On the backend, Tarikul engineered a powerful and intuitive admin dashboard that allows our team to manage inventory, media, and SEO metadata effortlessly—without requiring technical expertise. The system is built with scalability in mind, supported by a well-structured API architecture and efficient database design. Security and reliability were also clearly a priority. He implemented a secure authentication system with protected routes, encrypted credentials, and additional verification layers to ensure our business data remains safe. Beyond technical execution, Tarikul demonstrates a strong understanding of business needs—particularly in SEO, performance optimization, and conversion-focused design. He doesn’t just build features; he builds systems that deliver results. If you are looking for a developer who can deliver scalable, production-grade solutions with both technical depth and business insight, Tarikul Islam is an excellent choice.”
Md. Rezwan-Ur-Rouf
CEO
Sanaa Global Ltd.
Technologies
Links
Stats
Share
Get In Touch With TARIKUL
Let's work together
Contact Information
Feel free to reach out to me for any project or collaboration. I'm always open to discussing new projects, creative ideas or opportunities to be part of your visions.