Mensty Store 💖

An elegant, modern e-commerce storefront for men's fashion, built with Next.js 15, Sanity CMS, and Tailwind CSS 4.

🔗 Live demo: mensty.vercel.app

✨ Features

• Product catalog — products, categories, colors, and sizes managed through Sanity CMS.
• Product pages — dynamic routes (/product/[slug]) with image galleries, size/color selection, and rich-text descriptions.
• Shopping cart — client-side cart powered by React Context with a slide-out cart drawer and persistent state.
• Checkout flow — collects customer details (name, email, WhatsApp, address) and submits orders.
• Order emails — orders are emailed to the store owner via Nodemailer, with an optional customer confirmation email.
• CMS Studio — an embedded Sanity Studio for content management.
• Dark mode — theme switching via next-themes.
• Animations — smooth UI animations with Framer Motion.
• SEO — metadata, Open Graph tags, and per-page keywords.
• UI components — accessible components built on Radix UI / shadcn/ui + Lucide icons.

🛠️ Tech Stack

Layer

Technology

Framework

Next.js 15 (App Router, Turbopack)

Language

TypeScript

UI

React 19, Tailwind CSS 4, shadcn/ui, Radix UI, Lucide Icons

Animations

Framer Motion

CMS

Sanity (next-sanity + Sanity Studio)

Email

Nodemailer (Resend & Formspree also installed)

Notifications

react-hot-toast

Deployment

Vercel

📁 Project Structure

├── app/ # Next.js App Router (pages, API routes, layout)
│ ├── api/send-order/ # Order submission endpoint (Nodemailer)
│ ├── checkout/ # Checkout page
│ ├── product/[slug]/ # Product detail page
│ ├── products/ # Products listing page
│ └── components/ # Header, Footer, Cart UI, etc.
├── components/ui/ # shadcn/ui components
├── lib/ # Sanity client, GROQ queries, utilities
├── sanity/ # Sanity Studio (schemas: product, category, colors)
├── public/ # Static assets
└── types.ts # Shared TypeScript types

🚀 Getting Started

Prerequisites

• Node.js 18.18+
• A Sanity project (project ID + dataset)
• SMTP credentials for order emails (e.g., Gmail, Mailgun, SendGrid)

Installation

# Clone the repository
git clone https://github.com/rezk20/mensty-store.git
cd mensty-store

# Install dependencies
npm install

Environment Variables

Create a .env.local file in the project root:

# Base URL of the site (used in order emails)
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# SMTP settings for sending order emails
EMAIL_HOST=smtp.example.com
EMAIL_PORT=587
EMAIL_SECURE=false
EMAIL_USER=your@email.com
EMAIL_PASS=your-password
EMAIL_FROM=noreply@example.com
EMAIL_TO=shop@example.com

# Set to "true" to also send a confirmation email to the customer
SEND_CUSTOMER_CONFIRMATION=false

The Sanity project ID (oioxmpkn) and dataset (production) are currently configured in lib/sanity.ts and sanity/sanity.config.ts. Move them to environment variables (NEXT_PUBLIC_SANITY_PROJECT_ID, NEXT_PUBLIC_SANITY_DATASET) for production best practice.

Run the Development Server

npm run dev

Open http://localhost:3000 to view the storefront.

Sanity Studio

Run the studio locally to manage products, categories, and colors:

cd sanity
npm install
npx sanity dev

Then open http://localhost:3333.

Production Build

npm run build
npm start

📜 Available Scripts

Command

Description

npm run dev

Start the dev server with Turbopack

npm run build

Build for production

npm start

Start the production server

npm run lint

Run ESLint

🧾 Order Flow

1. A customer adds products (with size/color) to the cart.
2. At checkout, they enter their details (name, email, WhatsApp number, address).
3. The order is POSTed to /api/send-order.
4. A formatted HTML email with the order summary is sent to the store owner.
5. Optionally, a confirmation email is sent to the customer, who is contacted via WhatsApp to finalize the order.

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

📄 License

This project is private.