Tech-Store is an ultra-professional, high-fidelity e-commerce platform designed for the modern corporate elite. It blends architectural precision with a minimalist aesthetic to provide a seamless, high-performance shopping experience for premium tech gadgets.
- Corporate Elite Aesthetic: Architecturally precise, minimalist interfaces that convey trust and professional excellence.
- Hierarchical Navigation: Sophisticated, hover-based category systems for effortless exploration of complex catalogs.
- Performance-First Layout: Optimally dense product grids with primary accents designed for high-conversion corporate environments.
- Fluid Animations: Ultra-smooth transitions and interactive elements powered by Framer Motion and Lenis Scroll.
- Dynamic Loading States: Polished, skeleton-based loading components to ensure a seamless transition between pages.
- Custom 404 Experience: Dedicated, animated error page maintaining brand integrity even during edge cases.
- Parsed Product Specifications: Intelligent data extraction and formatting for technical specification tables on product pages.
- Hierarchical Category Systems: Multi-layered category management for structured product organization.
- Advanced Price Filtering: Precision price range sliders and filtering logic for targeted product discovery.
- Verified Review System: Robust rating and review mechanism with user identity verification.
- Persistent State Management: Unified cart and wishlist logic for a seamless "save for later" and checkout flow.
- Dynamic Hero Section: Administrators can update the badge, headline, description, and hero image directly from the dashboard.
- Centralized Settings Catalog: Manage site name, contact details, site logo, and global descriptions via the administrative suite.
- Responsive Branding: Real-time updates to brand colors and metadata reflected across the entire application.
- Stripe Integration: Secure and seamless credit/debit card processing.
- Manual Payment System (MFS): Support for local gateways (bKash, Nagad, Rocket) with a Strict Transaction ID Verification workflow.
- Dynamic Payment UI: Context-aware payment screens that adapt based on the selected gateway.
- Role-Based Access Control (RBAC): Fine-grained permissions for Super Admin, Admin, and Manager roles.
- Secure Authentication: Protected routes and multi-layered user sessions powered by NextAuth.js.
- Google Site Verification: Fully integrated for search console ownership and indexing.
- Database Maintenance Routine: Automated tools for cleaning up technical ID garbage and restoring relational integrity.
- Dynamic Sitemaps: Automated
sitemap.xmlgeneration for optimal search engine crawling. - Robots.txt Management: Standardized crawler instructions for better indexing control.
- JSON-LD Structured Data: High-fidelity schema markup for Products and Organizations to enhance Rich Snippets.
- Next.js 16 Optimization: Utilizing React Server Components and SSR for lightning-fast interactions and SEO dominance.
- Legacy Category Cleanup: Automated identification and removal of orphaned or "technical ID-based" categories to maintain a clean storefront catalog.
- Relational Data Healing: Intelligent migration scripts to link legacy product labels to official database references, ensuring normalized data integrity.
- Human-Centric Documentation: Refactored codebase to replace assistant-style placeholders with professional, human-readable documentation.
We are constantly evolving the platform. Here are the features currently in development:
- Payment Gateway Integration: Seamless checkout with Stripe and local MFS (bKash/Nagad/Rocket).
- SEO Optimization: Complete sitemap, robots.txt, and JSON-LD integration.
- Dynamic Hero Management: Full administrator control over homepage visuals.
- AI-Powered Recommendations: Personalized product suggestions based on user browsing history and preferences.
- Real-time Order Tracking: Interactive dashboard for users to track their order status in real-time.
- Multi-language Support: Deep localization supporting both English and Bengali (BN).
- Advanced Analytics Dashboard: Enhanced sales visualization and business intelligence for administrators.
- Progressive Web App (PWA): Enabling offline access and home screen installation for mobile users.
| Category | Technology |
|---|---|
| Framework | Next.js 16.2.0 (App Router) |
| Language | TypeScript |
| Frontend | React 19.2.4, Tailwind CSS 4.0 |
| State Management | Redux Toolkit 2.11.2 |
| Database | MongoDB with Mongoose 9.3.1 |
| Payments | Stripe 22.0.0, Manual Payment (MFS) |
| Animations | Framer Motion, Lenis Scroll |
| SEO | Next-Sitemap, JSON-LD |
| Validation | Zod, React Hook Form |
| Authentication | NextAuth.js |
Tech-Store/
├── app/ # Next.js App Router (Core Application)
│ ├── (main)/ # Main User-Facing Routes (Home, Products, ID)
│ │ ├── cart/ # Shopping Cart & Management
│ │ ├── checkout/ # Secure Checkout & Payment Flow
│ │ ├── product/ # Immersive Product Detail Pages
│ │ ├── products/ # Advanced Product Listing & Filtering
│ │ ├── login/ # User Authentication (Sign In)
│ │ ├── register/ # User Authentication (Sign Up)
│ │ ├── privacy/ # Professional Privacy Policy
│ │ ├── terms/ # Terms of Service Documentation
│ │ └── cookies/ # Cookie Policy & Compliance
│ ├── api/ # Backend API Route Handlers (Server-Side)
│ │ ├── auth/ # Authentication Logic & Registration
│ │ ├── products/ # Inventory Management API
│ │ ├── orders/ # Order Lifecycle & Status Management
│ │ ├── payment/ # Stripe Integration (Intent Creation)
│ │ ├── seed-categories/ # Data Integrity & Category Restoration
│ │ └── webhook/ # Payment Gateway Webhooks (Stripe)
│ ├── dashboard/ # Comprehensive Administrative Panel
│ ├── layout.tsx # Root Layout & Provider Initialization
│ └── globals.css # Global Styles & Tailwind Design Tokens
├── components/ # Reusable React UI Components
│ ├── Sections/ # Modular Page Blocks (Hero, Features, Catalog)
│ ├── Checkout/ # Payment-Specific UI (Stripe/MFS Forms)
│ ├── dashboard/ # Admin-Specific UI Components
│ ├── Navbar.tsx # Dynamic Navigation System
│ └── Footer.tsx # Information-Rich Site Footer
├── lib/ # Infrastructure & Utility Layer
│ └── db.ts # Robust Mongoose Connection Logic
├── models/ # Data Architecture (Mongoose Models)
│ ├── Product.ts # Product Catalog Schema
│ ├── Order.ts # Transaction & Logistics Schema
│ ├── User.ts # Secure User Profile Schema
│ └── Settings.ts # Global Site Configuration Schema
├── public/ # Static Optimized Assets
│ └── images/ # Optimized UI Icons & Graphics
├── redux/ # Global Reactive State Management
│ ├── slices/ # Feature-Specific State Logic (Cart, Auth, UI)
│ └── store.ts # Centralized Redux Store Configuration
├── types/ # Comprehensive TypeScript Interfaces
└── next.config.js # Advanced Framework Configuration
POST /api/auth/register- Create a new user account.POST /api/auth/login- Authenticate users with credentials (handled via NextAuth).
PUT /api/user/profile- Update user profile information (name, image, password). (Requires authentication).
GET /api/products- Fetch a paginated list of products. Supportscategory,search,page, andlimitquery parameters.POST /api/products- Create a new product. (Restricted to Admin/Manager).GET /api/products/{id}- Retrieve detailed information for a specific product.PATCH /api/products/{id}- Update existing product details. (Restricted to Admin/Manager).DELETE /api/products/{id}- Permanently remove a product. (Restricted to Super Admin/Admin).
POST /api/products/{id}/reviews- Submit a customer review (rating and comment) for a specific product. (Requires authentication).
GET /api/orders- List all orders (Admin/Manager) or specific orders for the authenticated user.POST /api/orders- Create a new order (Supports guest and authenticated checkouts).GET /api/orders/{id}- Fetch detailed information for a specific order.PATCH /api/orders/{id}- Update order status or transaction details. (Admin restricted for status changes).
GET /api/categories- Fetch a unique list of all product categories.GET /api/settings- Retrieve global application settings (e.g., Contact info, MFS numbers, Hero configurations).
GET /api/seed- Initialize the database with primary dummy products (Development only).GET /api/seed-categories- Restore database integrity, clean up technical ID categories, and sync product labels.
POST /api/payment/create-intent- Generate a Stripe Payment Intent for secure card transactions.POST /api/webhook/stripe- Handle asynchronous payment events from Stripe.
- Node.js (Latest LTS version)
- MongoDB (Local instance or Atlas connection)
-
Clone the repository:
git clone https://github.com/amdadislam01/Tech-Store.git cd Tech-Store -
Install dependencies:
npm install
-
Environment Setup: Create a
.envfile in the root directory and add your configurations:# Database & Auth MONGODB_URI=your_mongodb_connection_string NEXTAUTH_SECRET=your_secret_key NEXTAUTH_URL=http://localhost:3000 # Payment Gateway (Stripe) STRIPE_SECRET_KEY=your_stripe_secret_key NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret # Image Hosting (ImgBB) NEXT_PUBLIC_IMGBB_API_KEY=your_imgbb_api_key
-
Run the development server:
npm run dev
-
Visit the app: Open http://localhost:3000 in your browser.