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.
- Fluid Animations: Smooth transitions and interactive elements powered by Framer Motion.
- Responsive Layout: Optimized for every device, from ultra-wide monitors to mobile screens.
- Lucide Iconography: Clean and consistent visual language across the entire platform.
- Dynamic Category Management: Real-time category synchronization directly from the product database.
- Advanced Filtering & Search: Instant filtering by category, search terms, and pricing.
- High-Fidelity Product Details: Immersive product pages with interactive media galleries and detailed technical specifications.
- 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.
- 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.
- Guest Access Management: Integrated AI search quotas with a 3-free-search limit for guests.
- Secure Authentication: Protected routes and multi-layered user sessions powered by NextAuth.js.
- Server-Side Route Protection: Enhanced security for sensitive transactional pages like Cart and Checkout.
- Professional Legal Documentation: High-fidelity, dedicated pages for Privacy Policy, Terms of Service, and Cookie Policy.
- Interactive Experience: Implementation of sticky tables of contents and polished typography for maximum readability.
- Global Compliance Ready: Standardized language and structure following modern data protection best practices.
- Inventory Health Monitoring: Real-time tracking of stock levels and automated catalog integrity checks.
- Sales & Performance Metrics: Data points for monitoring overall business performance and revenue.
- Order Lifecycle Management: Advanced filtering, status tracking, and end-to-end management for customer orders.
- Next.js 16 (App Router): Utilizing React Server Components and SSR for lightning-fast interactions.
- Database Scalability: Flexible and robust data modeling with Mongoose and MongoDB.
- Edge-Ready Architecture: Built for high availability and low-latency performance.
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).
- 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.
- Inventory Low-Stock Alerts: Automated email/push notifications for administrators.
| 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 |
| 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
The Tech-Store provides a robust backend API powered by Next.js Route Handlers.
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).
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.