🛒 ShopTal — Modern E-commerce Client

A feature-rich, accessible, and beautifully designed e-commerce platform built with Next.js 14, Tailwind CSS v4, shadcn/radix UI, and more.

---

✨ Overview

ShopTal is a modern e-commerce web application focused on accessibility, performance, and delightful user experience. It features a robust product search, seamless authentication, responsive layouts, and a consistent design system. Built with the latest Next.js App Router, it leverages server components, advanced SEO, and analytics for a production-grade shopping experience.

---

🚀 Features

• Next.js 15 App Router — Fast, scalable, and SEO-friendly architecture
• React 19 — Leveraging the latest React features for better performance and developer experience.
• Tailwind CSS v4 — Custom design tokens, dark mode, and utility-first styling
• shadcn + Radix UI — Accessible, composable UI components
• Authentication — Secure login/signup with NextAuth
• State Management — Lightweight global state with Zustand
• Stripe Integration — Secure checkout and payment flows
• Advanced Search — Keyboard-accessible, debounced, and ARIA-compliant product search
• Responsive & Accessible — Mobile-first layouts, focus management, and WCAG-compliant
• Vercel Analytics — Real user monitoring and performance insights
• Modern Dashboard — Admin panel for managing products, orders, users, and more
• Reusable Components — Modular, documented, and easy to extend

---

🖥️ Tech Stack

• Framework: Next.js 15 (TypeScript, App Router)
• UI Library: React 19
• Styling: Tailwind CSS v4, shadcn/radix UI
• State: Zustand
• Auth: NextAuth.js
• Payments: Stripe
• Testing: Jest, React Testing Library
• Analytics: Vercel Analytics, Speed Insights
• Other: React Hook Form (v7), Zod, Embla Carousel, Recharts

---

📦 Getting Started

1. Install dependencies:

   pnpm install

2. Run the development server:

   pnpm dev

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

---

📝 Development Highlights

• Accessible navigation and keyboard support throughout
• Robust search with instant results and ARIA roles
• Consistent theming (light/dark) and design tokens
• SEO best practices: dynamic metadata, OG tags, resource hints
• Performance: lazy loading, optimized images, and fast initial load
• Admin dashboard for managing products, categories, orders, users, and more

📂 Project Structure

• src/app/ — App Router pages, layouts, and API routes
• src/components/ — Modular UI components (dashboard, cart, checkout, etc.)
• src/hooks/ — Custom React hooks
• src/lib/ — API utilities and helpers
• src/types/ — TypeScript types and interfaces

---

🛠️ Scripts

• pnpm dev — Start development server
• pnpm build — Build for production
• pnpm start — Start production server
• pnpm test — Run tests
• pnpm lint — Lint codebase

---

📢 Credits

• Built by Dipto Karmaker

---

📄 License

This project is for portfolio/demo purposes. For commercial use, please contact me.