Esteem Collections Mobile App

A modern, mobile-first e-commerce progressive web app for the fashion brand Esteem Collections.

• Clean, minimalist design with brand-specific styling
• Bottom tab navigation: Home, Categories, Cart, Profile, Wishlist
• Onboarding flow for first-time users
• Product browsing with search, filters, and categories
• Shopping cart with quantity management
• User authentication with multiple sign-in options
• Wishlist and recently viewed items
• Order management and history
• Push notifications for updates

• Product management (add, edit, delete products)
• Inventory tracking and management
• Order processing and fulfillment
• Analytics dashboard with sales and engagement metrics
• Promotion management

• Frontend: React 18 with TypeScript
• Backend: Hono.js API framework
• Database: SQLite for data persistence
• Storage: Val Town Blob for images and assets
• Styling: TailwindCSS for responsive design
• Authentication: JWT-based auth system
• PWA: Service worker for offline functionality

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   ├── auth.ts         # Authentication routes
│   │   ├── products.ts     # Product management
│   │   ├── orders.ts       # Order processing
│   │   ├── admin.ts        # Admin dashboard
│   │   └── static.ts       # Static file serving
│   └── index.ts            # Main API entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx         # Main app component
│   │   ├── Navigation.tsx  # Bottom tab navigation
│   │   ├── Home.tsx        # Home screen
│   │   ├── Categories.tsx  # Product categories
│   │   ├── Cart.tsx        # Shopping cart
│   │   ├── Profile.tsx     # User profile
│   │   ├── Wishlist.tsx    # Wishlist management
│   │   ├── ProductCard.tsx # Product display component
│   │   ├── ProductDetail.tsx # Product detail page
│   │   ├── Checkout.tsx    # Checkout process
│   │   ├── Onboarding.tsx  # First-time user flow
│   │   └── AdminDashboard.tsx # Admin interface
│   ├── index.html          # Main HTML template
│   ├── index.tsx           # Frontend entry point
│   ├── style.css           # Custom styles
│   ├── manifest.json       # PWA manifest
│   └── sw.js              # Service worker
└── shared/
    ├── types.ts            # TypeScript interfaces
    └── utils.ts            # Shared utilities

1. The app is accessible via HTTP trigger
2. First-time users will see onboarding screens
3. Admin access is available at /admin route
4. All data is persisted in SQLite database

• GET /api/products - Get all products
• GET /api/products/:id - Get product details
• POST /api/auth/login - User authentication
• POST /api/cart - Add to cart
• GET /api/orders - Get user orders
• POST /api/admin/products - Add new product (admin)
• GET /api/admin/analytics - Get sales analytics (admin)

• Responsive design for all screen sizes
• Touch-friendly interface elements
• Fast loading with optimized images
• Offline functionality via service worker
• Native app-like experience on mobile devices