WearClothes -– Full-Stack E-Commerce Store

A full-stack eCommerce web application built with Next.js (Pages Router) and Tailwind CSS, featuring secure authentication, Stripe payments, email notifications, and smooth UX with Toast notifications. This project demonstrates a production-ready architecture using modern web development best practices.

Live Demo: https://wear-codes.vercel.app/

Features

• Frontend

  • Built with Next.js Pages Router and Tailwind CSS
  • Fully responsive design for mobile, tablet, and desktop
  • Smooth animations and toast notifications using React Toastify
  • Product browsing, search, and category filtering

• Backend & API

  • Next.js API routes for server-side logic
  • User authentication with HTTP-only cookies for security
  • Stripe integration for secure payments
  • Nodemailer for sending order confirmation emails

• Store Functionality

  • Add to cart, update quantity, remove items
  • Checkout and payment processing via Stripe
  • Order confirmation emails
  • Admin dashboard for managing products and orders (optional future feature)

---

Tech Stack

Layer	Technology
Frontend	Next.js (Pages Router), React, Tailwind CSS
Backend	Next.js API Routes, Node.js
Database	(e.g., MongoDB/PostgreSQL)
Payment	Stripe
Notifications	React Toastify
Email	Nodemailer
Security	HTTP-only Cookies, JWT Authentication

---

Getting Started

Prerequisites

• Node.js >= 18.x
• npm / yarn / pnpm
• Stripe account (for payment processing)

Installation

1. Clone the repository:

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

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Setup environment variables:

Create a .env.local file in the root and add:

NEXT_PUBLIC_STRIPE_PUBLIC_KEY=your_stripe_public_key
STRIPE_SECRET_KEY=your_stripe_secret_key
EMAIL_HOST=smtp.example.com
EMAIL_PORT=587
EMAIL_USER=your_email@example.com
EMAIL_PASS=your_email_password
JWT_SECRET=your_jwt_secret

4. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser.

---

API Routes

• GET /api/products – Fetch all products
• POST /api/checkout – Create Stripe checkout session
• POST /api/auth/login – User login
• POST /api/auth/register – User registration
• POST /api/email – Send email notifications

API routes are located in pages/api/*.

---

Deployment

Deploy on Vercel

This project is already deployed on Vercel: https://wear-codes.vercel.app/

1. Connect your GitHub repository to Vercel
2. Add environment variables in the Vercel dashboard
3. Deploy

Visit Next.js Deployment Docs for more details.

---

Learn More

• Next.js Documentation
• Tailwind CSS Documentation
• Stripe API
• React Toastify
• Nodemailer

Do you want me to do that next?