🛒 create-ecom-app

A Zero-config CLI to bootstrap a full-featured, production-ready Next.js Ecommerce application (GenZ Shop).

create-ecom-app is the fastest way to kickstart a modern ecommerce project. It automatically generates a beautifully designed, highly performant web application featuring a stunning White & Navy Blue theme, smooth CSS animations, and robust state management—all fully configured and ready to scale.

✨ Why is this the best starter template?

Building an ecommerce platform from scratch is time-consuming. create-ecom-app skips the tedious setup and provides a premium foundation instantly.

• ⚡ Zero Setup & Native Performance: No manual boilerplate. Run one command and get a fully functional frontend instantly.
• 🛡️ Zero External Dependencies (Images): All static assets (like placeholder product images and hero backgrounds) are strictly bundled locally (public/images/). No more external URL 404 errors or slow load times!
• 🐻 Built-in Global State: Forget React.Context hell. Global state for Cart, Wishlist, Order tracking, Authentication, and Reviews are cleanly managed using Zustand.
• 🦋 Premium UI/UX out of the box: Features a cohesive White + Navy Blue "GenZ Shop" aesthetic with custom framer-motion-style CSS bubble animations without the hydration errors.
• 📦 SEO & Production Ready: Built strictly on the Next.js 14 App Router with clean .tsx structures, ready to be indexed by search engines.

🚀 Features

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS + Custom Keyframe Animations
• Icons: lucide-react (Clean, professional SVG icons)
• State Management: zustand (Lightweight and fast)
• Routing: Full support for Dynamic Routes (e.g., /product/[id])
• Pages Included: Home, Shop, Cart, Wishlist, Login, Register, Checkout, Order Tracking, Profile, About, Contact.

🛠️ Quick Start

You don't need to clone any repositories. The CLI handles everything for you.

Run the following command in your terminal:

npx create-ecom-app@latest my-store

The CLI will scaffold the project inside a folder named my-store. Once it completes, navigate into the directory and run it:

cd my-store
npm install
npm run dev

Open http://localhost:3000 in your browser. Welcome to your new store!

📁 Project Structure

Here's an overview of the generated project structure:

my-store/
├── app/                  # Next.js App Router pages (Home, Login, Shop, Checkout, etc.)
├── components/           # Reusable UI components (ProductCard, Header, Filters, etc.)
├── data/                 # Local mock data (products.json)
├── public/               # Local static assets and optimized images
├── store/                # Zustand global state hooks (Cart, Auth, Wishlist)
├── lib/                  # Helper utilities and LocalStorage wrappers
├── types/                # TypeScript interface definitions 
└── ...

🎨 Easy Customization

This template is built to be altered and extended.

1. Changing Brand Colors: Open tailwind.config.ts and modify the primary color palette. The entire app will adapt immediately.
2. Adding Products: Simply drop your product images into /public/images/products/ and update the array inside /data/products.json. The Shop page, Filters, and Product Details page will automatically render your new items.
3. Modifying Animations: Want to tweak the floating bubbles? Check app/globals.css where the highly-optimized keyframes are stored.

🌱 Future Enhancements

While this template gives you an incredibly robust frontend architecture, here are recommendations for adding a backend to make it a full-stack product:

1. Database Integration: Connect to MongoDB checkout processes or PostgreSQL (via Prisma) by replacing the mock data/products.json with API fetch calls in Server Components.
2. Payment Gateway: Integrate Stripe or Razorpay within the /checkout route for secure real-time payments.
3. Authentication: The current Auth flow is mocked using Zustand & LocalStorage. You can easily plug in NextAuth.js (or standard JWTs) into the existing useAuthStore to manage real user sessions.

📄 License

This project is licensed under the MIT License. Feel free to use it for personal or commercial projects.

Made with ❤️ for developers who want to ship fast.