Gen Pet Shop — Full Ecommerce + Admin

Overview

Gen Pet Shop is a modern ecommerce for pet products. It features category browsing, faceted filters, rich product pages, cart/checkout, account area, and a robust admin to manage catalog, orders, customers, reviews, pages, and discounts.

Architecture

• Frontend: React + Vite + Tailwind; TanStack Query for data, Radix UI for primitives
• Backend: Express + MongoDB (Mongoose), structured logs (pino), security middleware (helmet, rate‑limit)
• Admin: SPA routed under /admin using the same frontend app with admin pages/guards

[client]  → pages: Home, Shop, ProductDetails, Cart, Checkout, Account, Blog
           admin pages: Dashboard, Orders, Products, Customers, Discounts, Pages, Reviews, Settings
[server]  → routes: products, cart, order, account, blog, content, reviews, seo, admin/*
           models: Product, Order, User, Review, Page, Collection, Discount, Settings, BlogPost

Storefront Features

• Responsive homepage with featured, categories, new arrivals, testimonials, UGC
• Product pages: gallery, variants, price/compare, specs, reviews
• Faceted shop filters with drawer on mobile
• Cart drawer + full cart page; checkout success and order detail

Admin Features

• Products: CRUD with variants, collections, media, pricing, stock
• Orders: statuses, detail view with items, customer info, timeline
• Customers: accounts, addresses, orders
• Content: pages and blog posts with sanitized HTML
• Marketing: discounts/coupons; subscribers; basic metrics

Advanced Implementation

Frontend data layer and cart UX

// client/src/lib/queryClient.js (pattern)
import { QueryClient } from '@tanstack/react-query'
export const queryClient = new QueryClient({ defaultOptions:{ queries:{ staleTime: 30_000 } }})

// client/src/components/CartDrawer.jsx (pattern)
// Optimistic updates to local store, then persist to server

Backend controllers and security

// server/src/index.js (pattern)
app.use(helmet()); app.use(rateLimit({ windowMs: 60_000, max: 300 })); app.use(morgan('tiny'));

// server/src/controllers/productController.js (pattern)
// pagination, sorting, collection filters, review aggregation

SEO & Branding

• SEO routes for public metadata; client lib for titles, descriptions, OG/Twitter
• Friendly pet‑centric branding (soft palette), playful cursor paws, approachable UI components
• Newsletter capture and blog for organic reach

What made it work

• Clear separation between shopper flows and admin operations
• Strong baseline: data fetching, state stores, and guard components
• Opinionated content/marketing support baked in from day one