e-commerce


Project Banner
Static Badge

Nike Ecommerce w/ Devin AI

Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!

📋 Table of Contents

  1. ✨ Introduction
  2. ⚙️ Tech Stack
  3. 🔋 Features
  4. 🤸 Quick Start
  5. 🔗 Assets
  6. 🚀 More

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

✨ Introduction

Nike-style eCommerce built with Devin AI, Next.js, Drizzle ORM, and Better Auth. In this project, you’ll master prompting as Devin helps generate sleek product pages powered by Next.js 15, TypeScript, and TailwindCSS. The backend runs on Neon PostgreSQL with Drizzle ORM, authentication is handled with Better Auth, and Zustand manages state — all packaged in a clean, modular UI to help you ship faster.

If you’re getting started and need assistance or face any bugs, join our active Discord community with over 50k+ members. It’s a place where people help each other out.

⚙️ Tech Stack

🔋 Features

👉 Landing Page: A fast, engaging homepage that introduces your brand and products with smooth animations and clear calls to action.

👉 Product Listing Page: Browse all products with filters, sorting, and real-time availability—powered by Devin AI-generated content for dynamic updates.

👉 Product Details Page: Detailed product info, images, and reviews with AI-enhanced descriptions to help customers make confident buying decisions.

👉 Auth Pages: Secure and seamless user signup, login, and password recovery using Better Auth, ensuring smooth access without backend hassles.

And many more, including code architecture and reusability.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

Cloning the Repository

git clone https://github.com/JavaScript-Mastery-Pro/e-commerce.git
cd e-commerce

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

# Database
DATABASE_URL="postgresql://username:password@host:port/database"

# Better Auth
BETTER_AUTH_SECRET="your-secret-key-here"
BETTER_AUTH_URL="http://localhost:3000"

# GitHub OAuth (optional)
GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""

# Google OAuth (optional)
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

Replace the placeholder values with your credentials. You can get these by signing up at: NeonDB, Better-Auth.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

📁 Project Structure

src/
├── app/
│   ├── api/auth/[...all]/route.ts  # Better Auth API routes
│   └── page.tsx                    # Homepage
├── lib/
│   ├── auth/
│   │   └── index.ts               # Better Auth configuration
│   └── db/
│       ├── index.ts               # Database connection
│       └── schema.ts              # Database schema
└── store/
    ├── auth.ts                    # Authentication state
    └── cart.ts                    # Shopping cart state

🗄️ Database Schema

The application includes the following tables:

🔗 Assets

Assets and snippets used in the project can be found in the video kit.

Video Kit Banner

🚀 More

Advance your skills with Next.js Pro Course

Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They’re packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!

Project Banner