A complete, responsive eCommerce website built with Hono backend and React frontend, styled with TailwindCSS.

• Homepage: Hero section, product categories, featured products, testimonials
• Product Listing: Grid layout with filters, sorting, and pagination
• Product Details: Image gallery, reviews, related products
• Shopping Cart: Item management with quantity controls
• Checkout: Complete order flow with forms
• Authentication: Login, signup, password reset
• Admin Dashboard: Product and order management
• Responsive Design: Mobile-first approach with TailwindCSS
• Dark Mode: Toggle between light and dark themes

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   ├── auth.ts         # Authentication routes
│   │   ├── products.ts     # Product CRUD operations
│   │   ├── cart.ts         # Cart management
│   │   └── orders.ts       # Order processing
│   └── index.ts            # Main server entry point
├── frontend/
│   ├── components/
│   │   ├── layout/         # Navigation, footer, layout components
│   │   ├── pages/          # Page components
│   │   ├── ui/             # Reusable UI components
│   │   └── App.tsx         # Main app component
│   ├── index.html          # HTML template
│   └── index.tsx           # Frontend entry point
└── shared/
    ├── types.ts            # Shared TypeScript types
    └── utils.ts            # Shared utility functions

• Backend: Hono (TypeScript)
• Frontend: React 18.2.0 with TypeScript
• Database: SQLite
• Styling: TailwindCSS (Townie)
• Storage: Val Town Blob for images
• Authentication: JWT tokens

The application is automatically deployed on Val Town. The backend serves both API endpoints and the frontend application.

• GET / - Homepage
• GET /shop - Product listing
• GET /product/:id - Product details
• GET /cart - Shopping cart
• GET /checkout - Checkout page
• GET /login - Login page
• GET /signup - Signup page
• GET /admin - Admin dashboard
• POST /api/auth/login - User authentication
• POST /api/auth/signup - User registration
• GET /api/products - Get products with filters
• POST /api/cart/add - Add item to cart
• POST /api/orders - Create order

• Mobile-first approach with TailwindCSS
• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)

• System preference detection
• Manual toggle with localStorage persistence

• React Context for global state (cart, user, theme)
• Local storage for persistence

• Lazy loading for images
• Component code splitting
• Optimized bundle size