EcomLike

A modern, full-stack e-commerce store built with Next.js 16, featuring a sleek dark theme, smooth animations, and complete shopping functionality.

Features

• Product Catalog - Browse, filter, and sort products
• Shopping Cart - Add items, adjust quantities with a slide-out drawer
• User Authentication - Sign up/in with credentials or OAuth (Google, GitHub)
• Checkout Flow - Complete checkout with Stripe integration
• Order Management - View order history and track status
• Responsive Design - Works on desktop, tablet, and mobile
• Dark Theme - Modern dark UI with indigo accents
• Smooth Animations - Framer Motion animations throughout

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Database: SQLite with Prisma ORM
• Auth: NextAuth.js
• State: Zustand
• Animations: Framer Motion
• Payments: Stripe
• Icons: Lucide React

Quick Start

Prerequisites

• Node.js 18+ installed

Installation

1. Clone the repository

   git clone https://github.com/yourusername/ecomlike.git
   cd ecomlike

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

4. Initialize the database

   npx prisma generate
   npx prisma db push
   npx prisma db seed

5. Start the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:3000

Windows Users

Simply double-click StartServer.bat to install dependencies, set up the database, and start the server automatically.

Project Structure

├── prisma/
│   ├── schema.prisma      # Database schema
│   └── seed.ts            # Sample data seeder
├── src/
│   ├── app/               # Next.js App Router
│   │   ├── api/           # API routes
│   │   ├── auth/          # Auth pages
│   │   ├── account/       # User account
│   │   ├── checkout/      # Checkout flow
│   │   └── products/      # Product pages
│   ├── components/        # React components
│   └── lib/               # Utilities & configs
├── StartServer.bat        # Windows start script
├── StopServer.bat         # Windows stop script
└── .env.example           # Environment template

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm start	Start production server
npm run lint	Run ESLint
npx prisma studio	Open database GUI
npx prisma db seed	Seed sample data

Environment Variables

Variable	Description	Required
DATABASE_URL	Database connection string	Yes
NEXTAUTH_URL	App URL (http://localhost:3000)	Yes
NEXTAUTH_SECRET	Auth encryption secret	Yes
GOOGLE_CLIENT_ID	Google OAuth client ID	No
GOOGLE_CLIENT_SECRET	Google OAuth secret	No
GITHUB_CLIENT_ID	GitHub OAuth client ID	No
GITHUB_CLIENT_SECRET	GitHub OAuth secret	No
STRIPE_SECRET_KEY	Stripe secret key	No
STRIPE_PUBLISHABLE_KEY	Stripe public key	No

Pages

Route	Description
/	Homepage with hero, categories, featured products
/products	All products with filters and sorting
/products/[slug]	Individual product page
/auth/signin	Sign in page
/auth/register	Registration page
/account	User dashboard
/checkout	Checkout page

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the project on Vercel
3. Add environment variables
4. Deploy

Other Platforms

npm run build
npm start

License

This project is open source and available under the MIT License.

Acknowledgments

• Next.js
• Tailwind CSS
• Prisma
• Framer Motion
• Lucide Icons