create-ecom-app 1.0.0

package/templates/ecommerce/store/useAuthStore.ts

@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { User } from '@/types';
+import { generateId } from '@/lib/utils';
+
+interface AuthStore {
+  user: User | null;
+  isAuthenticated: boolean;
+  register: (name: string, email: string, password: string) => void;
+  login: (email: string, password: string) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthStore>()(
+  persist(
+    (set) => ({
+      user: null,
+      isAuthenticated: false,
+
+      register: (name, email, password) => {
+        const usersRaw =
+          typeof window !== 'undefined'
+            ? localStorage.getItem('ecom-users')
+            : null;
+        const users: User[] = usersRaw ? JSON.parse(usersRaw) : [];
+
+        const exists = users.find((u) => u.email === email);
+        if (exists) throw new Error('Email already registered');
+
+        const newUser: User = { id: generateId(), name, email, password };
+        const updated = [...users, newUser];
+
+        localStorage.setItem('ecom-users', JSON.stringify(updated));
+        set({ user: newUser, isAuthenticated: true });
+      },
+
+      login: (email, password) => {
+        const usersRaw =
+          typeof window !== 'undefined'
+            ? localStorage.getItem('ecom-users')
+            : null;
+        const users: User[] = usersRaw ? JSON.parse(usersRaw) : [];
+
+        const user = users.find(
+          (u) => u.email === email && u.password === password
+        );
+        if (!user) throw new Error('Invalid email or password');
+
+        set({ user, isAuthenticated: true });
+      },
+
+      logout: () => set({ user: null, isAuthenticated: false }),
+    }),
+    { name: 'auth-storage' }
+  )
+);

package/templates/ecommerce/store/useCartStore.ts

@@ -0,0 +1,63 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { CartItem, Product } from '@/types';
+
+interface CartStore {
+  items: CartItem[];
+  addItem: (product: Product) => void;
+  removeItem: (id: string) => void;
+  updateQuantity: (id: string, quantity: number) => void;
+  clearCart: () => void;
+  itemCount: () => number;
+  total: () => number;
+}
+
+export const useCartStore = create<CartStore>()(
+  persist(
+    (set, get) => ({
+      items: [],
+
+      addItem: (product) => {
+        const existing = get().items.find((i) => i.product.id === product.id);
+        if (existing) {
+          set({
+            items: get().items.map((i) =>
+              i.product.id === product.id
+                ? { ...i, quantity: i.quantity + 1 }
+                : i
+            ),
+          });
+        } else {
+          set({ items: [...get().items, { product, quantity: 1 }] });
+        }
+      },
+
+      removeItem: (id) => {
+        set({ items: get().items.filter((i) => i.product.id !== id) });
+      },
+
+      updateQuantity: (id, quantity) => {
+        if (quantity <= 0) {
+          get().removeItem(id);
+          return;
+        }
+        set({
+          items: get().items.map((i) =>
+            i.product.id === id ? { ...i, quantity } : i
+          ),
+        });
+      },
+
+      clearCart: () => set({ items: [] }),
+
+      itemCount: () => get().items.reduce((sum, i) => sum + i.quantity, 0),
+
+      total: () =>
+        get().items.reduce(
+          (sum, i) => sum + i.product.price * i.quantity,
+          0
+        ),
+    }),
+    { name: 'cart-storage' }
+  )
+);

package/templates/ecommerce/store/useOrderStore.ts

@@ -0,0 +1,43 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { CartItem, Address, Order, OrderStatus } from '@/types';
+import { generateId } from '@/lib/utils';
+
+interface OrderStore {
+  orders: Order[];
+  addOrder: (data: {
+    items: CartItem[];
+    address: Address;
+    subtotal: number;
+    shipping: number;
+    total: number;
+  }) => Order;
+  getOrder: (id: string) => Order | undefined;
+  getUserOrders: (userEmail: string) => Order[];
+}
+
+export const useOrderStore = create<OrderStore>()(
+  persist(
+    (set, get) => ({
+      orders: [],
+
+      addOrder: (data) => {
+        const statuses: OrderStatus[] = ['confirmed', 'processing', 'shipped', 'delivered'];
+        const order: Order = {
+          ...data,
+          id: `ORD-${generateId().toUpperCase().slice(0, 8)}`,
+          status: statuses[0],
+          createdAt: new Date().toISOString(),
+        };
+        set({ orders: [order, ...get().orders] });
+        return order;
+      },
+
+      getOrder: (id) => get().orders.find((o) => o.id === id),
+
+      getUserOrders: (userEmail) =>
+        get().orders.filter((o) => o.address.email === userEmail),
+    }),
+    { name: 'orders-storage' }
+  )
+);

package/templates/ecommerce/store/useReviewStore.ts

@@ -0,0 +1,60 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Review } from '@/types';
+import { generateId } from '@/lib/utils';
+
+interface ReviewStore {
+  reviews: Review[];
+  addReview: (data: Omit<Review, 'id' | 'date' | 'helpful' | 'helpfulBy'>) => void;
+  markHelpful: (reviewId: string, userId: string) => void;
+  getProductReviews: (productId: string) => Review[];
+  hasReviewed: (productId: string, userId: string) => boolean;
+  getAverageRating: (productId: string) => number;
+  getUserReviews: (userId: string) => Review[];
+}
+
+export const useReviewStore = create<ReviewStore>()(
+  persist(
+    (set, get) => ({
+      reviews: [],
+
+      addReview: (data) => {
+        const review: Review = {
+          ...data,
+          id: generateId(),
+          date: new Date().toISOString(),
+          helpful: 0,
+          helpfulBy: [],
+        };
+        set({ reviews: [review, ...get().reviews] });
+      },
+
+      markHelpful: (reviewId, userId) => {
+        set({
+          reviews: get().reviews.map((r) => {
+            if (r.id !== reviewId) return r;
+            const alreadyMarked = r.helpfulBy.includes(userId);
+            return alreadyMarked
+              ? { ...r, helpful: r.helpful - 1, helpfulBy: r.helpfulBy.filter((id) => id !== userId) }
+              : { ...r, helpful: r.helpful + 1, helpfulBy: [...r.helpfulBy, userId] };
+          }),
+        });
+      },
+
+      getProductReviews: (productId) =>
+        get().reviews.filter((r) => r.productId === productId),
+
+      hasReviewed: (productId, userId) =>
+        get().reviews.some((r) => r.productId === productId && r.userId === userId),
+
+      getAverageRating: (productId) => {
+        const reviews = get().reviews.filter((r) => r.productId === productId);
+        if (reviews.length === 0) return 0;
+        return reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length;
+      },
+
+      getUserReviews: (userId) => get().reviews.filter((r) => r.userId === userId),
+    }),
+    { name: 'reviews-storage' }
+  )
+);

package/templates/ecommerce/store/useWishlistStore.ts

@@ -0,0 +1,43 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Product } from '@/types';
+
+interface WishlistStore {
+  items: Product[];
+  addItem: (product: Product) => void;
+  removeItem: (id: string) => void;
+  isWishlisted: (id: string) => boolean;
+  toggle: (product: Product) => void;
+  itemCount: () => number;
+}
+
+export const useWishlistStore = create<WishlistStore>()(
+  persist(
+    (set, get) => ({
+      items: [],
+
+      addItem: (product) => {
+        if (!get().isWishlisted(product.id)) {
+          set({ items: [...get().items, product] });
+        }
+      },
+
+      removeItem: (id) => {
+        set({ items: get().items.filter((p) => p.id !== id) });
+      },
+
+      isWishlisted: (id) => get().items.some((p) => p.id === id),
+
+      toggle: (product) => {
+        if (get().isWishlisted(product.id)) {
+          get().removeItem(product.id);
+        } else {
+          get().addItem(product);
+        }
+      },
+
+      itemCount: () => get().items.length,
+    }),
+    { name: 'wishlist-storage' }
+  )
+);

package/templates/ecommerce/tailwind.config.ts

@@ -0,0 +1,44 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: '#fdf4ff',
+          100: '#fae8ff',
+          500: '#a855f7',
+          600: '#9333ea',
+          700: '#7e22ce',
+          900: '#581c87',
+        },
+      },
+      fontFamily: {
+        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.4s ease-out',
+        'slide-up': 'slideUp 0.4s ease-out',
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/templates/ecommerce/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/ecommerce/types/index.ts

@@ -0,0 +1,69 @@
+export type Product = {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  originalPrice?: number;
+  category: string;
+  image: string;
+  rating: number;
+  reviewCount: number;
+  inStock: boolean;
+  tags?: string[];
+};
+
+export type User = {
+  id: string;
+  name: string;
+  email: string;
+  password: string;
+};
+
+export type CartItem = {
+  product: Product;
+  quantity: number;
+};
+
+export type Address = {
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+  city: string;
+  state: string;
+  pincode: string;
+};
+
+export type OrderStatus = 'confirmed' | 'processing' | 'shipped' | 'delivered';
+
+export type Order = {
+  id: string;
+  items: CartItem[];
+  address: Address;
+  subtotal: number;
+  shipping: number;
+  total: number;
+  status: OrderStatus;
+  createdAt: string;
+};
+
+export type Review = {
+  id: string;
+  productId: string;
+  userId: string;
+  userName: string;
+  rating: number;
+  title: string;
+  body: string;
+  date: string;
+  helpful: number;
+  helpfulBy: string[];
+};
+
+export type FilterState = {
+  search: string;
+  category: string;
+  minPrice: number;
+  maxPrice: number;
+  minRating: number;
+};