Welcome to Input Gears, a high-performance e-commerce platform built for tech enthusiasts. Experience a seamless shopping journey with a stunning, modern interface, robust back-office management, and state-of-the-art technology.
- Dynamic Product Catalog: Browse premium peripherals with lightning-fast search and filtering.
- Seamless Cart Experience: Real-time updates with synchronized glassmorphism toast notifications.
- Smart Checkout: Integrated Stripe payment processing for secure and fast transactions.
- Order Management: Track your productivity upgrades from "Pending" to "Delivered".
- Secure Auth: Powered by Better Auth for robust session management and data security.
- User Dashboard: Manage profiles, shipping addresses, and order history effortlessly.
- Inventory Control: Real-time product management (Create, Update, Delete) with Cloudinary integration for lightning-fast image delivery.
- Dynamic Content: CMS-style control over hero slides and site-wide marketing banners.
- Order Oversight: Comprehensive dashboard to process and monitor all customer orders.
- Tailwind 4 & CSS Modules: Utilizing the latest in styling technology for a fluid, responsive, and high-performance UI.
- Glassmorphism Design: Elegant blur effects and semi-transparent elements for a premium feel.
- Dark Mode Support: Native dark mode integration for late-night productivity sessions.
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS 4
- Database: PostgreSQL with Prisma ORM
- Authentication: Better Auth
- Payments: Stripe
- State Management: Zustand
- Image Hosting: Cloudinary
- Form Handling: React Hook Form & Zod
- Node.js 18+
- PostgreSQL instance
- Stripe Account (for payments)
- Cloudinary Account (for image uploads)
-
Clone the repository:
git clone https://github.com/rakibhassan01/input-gears.git cd input-gears -
Install dependencies:
npm install
-
Environment Setup:
Create a
.envfile in the root directory and add the following:DATABASE_URL="your_postgresql_url" NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="your_stripe_key" STRIPE_SECRET_KEY="your_stripe_secret" BETTER_AUTH_SECRET="your_auth_secret" CLOUDINARY_CLOUD_NAME="your_cloud_name" CLOUDINARY_API_KEY="your_api_key" CLOUDINARY_API_SECRET="your_api_secret"
-
Database Initialization:
npx prisma generate npx prisma db push
-
Run the Development Server:
npm run dev
Open http://localhost:3000 to view the application.
├── app/ # Next.js App Router (Admin & Home routes)
├── components/ # UI Components (Radix UI, Shared components)
├── context/ # React Context (Cart, Auth)
├── lib/ # Utilities, Prisma client, Auth configuration
├── prisma/ # Database Schema and Seeds
└── public/ # Static Assets
Distributed under the MIT License. See LICENSE for more information.
Built with ❤️ by the Input Gears Team