Tech-Store is a premium, high-fidelity e-commerce platform designed for modern consumers. It combines cutting-edge technology with a sleek, minimalist aesthetic to provide a seamless shopping experience for innovative tech gadgets.
- Glassmorphism Design: Modern, translucent interfaces that feel light and premium.
- Tech Inspired Layout: Professional, high-conversion design with primary green accents and optimized product density.
- Fluid Animations: Smooth transitions and interactive elements powered by Framer Motion and Lenis Scroll.
- Responsive Navigation: Mobile-optimized navbar with persistent search, compact action buttons, and intuitive mobile drawer.
- Dynamic Loading states: Polished, responsive loading components to ensure a seamless transition between pages.
- Custom 404 Experience: Dedicated, animated error page for a superior brand experience even during broken links.
- Interactive Product Details: Immersive product pages with quantity selectors, technical specification tables, and metadata chips.
- Dynamic Category Management: Real-time category synchronization directly from the product database.
- Advanced Filtering & Search: Instant filtering by category, search terms, and pricing.
- Verified Review System: Robust rating and review mechanism with user identity verification.
- Cart & Wishlist Logic: Persistent state management 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.
- 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.
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 (App Router) |
| Language | TypeScript |
| Frontend | React 19, Tailwind CSS 4 |
| State Management | Redux Toolkit |
| Database | MongoDB with Mongoose |
| Payments | Stripe, Manual Payment (MFS) |
| Animations | Framer Motion, Lenis Scroll |
| SEO | Next-Sitemap, JSON-LD |
| Icons | Lucide React |
| 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)
│ │ └── 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).
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.