GadyetHub

What this project does

A modern e-commerce marketplace platform for electronics and accessories, built with Next.js, TypeScript, and Supabase. It provides both a customer‑facing storefront and an admin dashboard, complete with authentication, product management, order workflows, and a responsive dark/light UI.

Why it’s useful

This starter kit is intended for developers who want a working, full‑stack e‑commerce example using the latest Next.js features. It can be used as:

A learning resource to understand client/server integration with Supabase
A foundation for launching your own store or adapting to other domains
A reusable template with authentication, admin tooling, and real‑time updates

Key features
Tech Stack
Prerequisites
Installation
Environment Setup
Running Locally
Project Structure
API Routes
Development
Contributing

Key features

Customer-Facing Features

Responsive Design – Navbar on desktop, collapsible sidebar on mobile/tablet
Product Browsing – Browse products by category with detailed product pages
Shopping Cart – Add items to cart and manage orders
Order Management – View and track your orders
Notifications – Real-time notifications and alerts
Forgot Password – Reset your password via email link for account recovery
Dark/Light Mode – Theme toggle for user preference

Admin Dashboard

Dashboard Overview – High-level business metrics and KPIs
Orders Management – View, filter, and update order statuses
Inventory Management – Add, edit, and delete products; manage stock levels
User Management – View and manage customer accounts

GadyetHub

What this project does

Why it’s useful

This starter kit is intended for developers who want a working, full‑stack e‑commerce example using the latest Next.js features. It can be used as:

A learning resource to understand client/server integration with Supabase
A foundation for launching your own store or adapting to other domains
A reusable template with authentication, admin tooling, and real‑time updates

Key features
Tech Stack
Prerequisites
Installation
Environment Setup
Running Locally
Project Structure
API Routes
Development
Contributing

Key features

Customer-Facing Features

Responsive Design – Navbar on desktop, collapsible sidebar on mobile/tablet
Product Browsing – Browse products by category with detailed product pages
Shopping Cart – Add items to cart and manage orders
Order Management – View and track your orders
Notifications – Real-time notifications and alerts
Forgot Password – Reset your password via email link for account recovery
Dark/Light Mode – Theme toggle for user preference

Admin Dashboard

Dashboard Overview – High-level business metrics and KPIs
Orders Management – View, filter, and update order statuses
Inventory Management – Add, edit, and delete products; manage stock levels
User Management – View and manage customer accounts

gadyethub/ ├── app/ # Next.js App Router │ ├── (auth)/ # Auth routes (login, signup) │ ├── (withSidebar)/ # Customer routes with navbar/sidebar │ │ ├── cart/ │ │ ├── inbox/ │ │ ├── products/[category]/ │ │ └── page.tsx # Home page │ ├── admin/ # Admin dashboard (protected) │ │ ├── dashboard/ │ │ │ ├── inventory/ # Product management │ │ │ ├── orders/ # Order management │ │ │ ├── users/ # User management │ │ │ ├── notifications/ │ │ │ └── page.tsx │ │ └── settings/ │ ├── api/ # API Routes │ │ ├── admin/ # Admin endpoints (protected) │ │ │ ├── orders/ │ │ │ ├── products/ │ │ │ └── users/ │ │ ├── auth/ # Authentication endpoints │ │ │ ├── login/ │ │ │ └── signin/ │ │ ├── client/ # Customer endpoints │ │ │ ├── orders/ │ │ │ └── user/ │ │ └── products/ # Public product endpoints │ ├── layout.tsx # Root layout with Footer │ ├── globals.css # Global styles │ └── page.tsx # Root page ├── components/ │ ├── AppSidebar.tsx # Navigation sidebar │ ├── client/ │ │ └── Navbar.tsx # Top navigation bar │ ├── admin/ │ │ └── ProductsList.tsx # Admin product list │ ├── ui/ # Reusable UI components │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── table.tsx │ │ ├── sidebar.tsx │ │ └── ... │ └── Footer.tsx # Site footer ├── hooks/ │ └── use-mobile.ts # Responsive design hook ├── lib/ │ ├── supabase/ │ │ ├── client.ts # Client-side Supabase client │ │ ├── server.ts # Server-side Supabase client │ │ └── session.ts # Session utilities │ ├── types/ │ │ ├── orders.ts # Order TypeScript interfaces │ │ └── products.ts # Product TypeScript interfaces │ ├── layoutMenus.tsx # Navigation menu definitions │ └── utils.ts # Helper functions ├── store/ │ ├── useOrders.tsx # Zustand orders store │ └── useProducts.tsx # Zustand products store ├── public/ # Static assets ├── next.config.ts # Next.js configuration ├── tailwind.config.ts # Tailwind CSS configuration ├── tsconfig.json # TypeScript configuration └── package.json # Project dependencies

Gadyet Hub

GadyetHub

What this project does

Why it’s useful

Table of Contents

Key features

GadyetHub

What this project does

Why it’s useful

Table of Contents

Key features

Tech Stack

Prerequisites

Installation

Environment Setup

Getting Supabase Credentials

Database Setup

Running Locally

Start Development Server

Build for Production

Run Linter

Project Structure

API Routes

Products (Public)

Admin Routes (Protected)

Customer Routes (Protected)

Authentication

Development

Key Technologies & Patterns

Common Development Tasks

Contributing

Code Style

Support & Documentation

License