Job
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data β all from the browser, and deployed in milliseconds.
index.ts
https://Adesanya--ed9d135e3fb311f0b22476b3cceeab13.web.val.run
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
- The app is accessible via HTTP trigger
- First-time users will see onboarding screens
- Admin access is available at
/admin
route - All data is persisted in SQLite database
GET /api/products
- Get all productsGET /api/products/:id
- Get product detailsPOST /api/auth/login
- User authenticationPOST /api/cart
- Add to cartGET /api/orders
- Get user ordersPOST /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