beadedbag
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.
A complete e-commerce platform for selling handcrafted beaded bags. Features product management, shopping cart, order processing, and admin panel.
- Product Catalog: Browse beautiful beaded bags with high-quality images
- Category Filtering: Filter by bag type (clutches, totes, crossbody, shoulder bags)
- Shopping Cart: Add/remove items, adjust quantities
- Checkout Process: Simple order form with customer details
- Responsive Design: Works perfectly on all devices
- AI-Generated Images: Automatic product images using AI
- Product Management: Add, edit, delete products
- Order Management: View and update order status
- Inventory Tracking: Monitor stock levels
- Customer Information: Access customer details and order history
- Hero section with call-to-action
- Category filters
- Product grid with hover effects
- Shopping cart sidebar
- Checkout modal
- Product management table
- Order management with status updates
- Add/edit product modal
- Real-time inventory tracking
id
: Primary keyname
: Product namedescription
: Product descriptionprice
: Product pricecolors
: Available colorsbead_style
: Type of beads usedimage_url
: Product image URLcategory
: Product categoryin_stock
: Stock availabilityactive
: Product visibilitycreated_at
,updated_at
: Timestamps
id
: Primary keycustomer_name
: Customer full nameemail
: Customer emailphone
: Customer phone (optional)address
: Shipping address (optional)total
: Order total amountstatus
: Order status (pending, processing, shipped, delivered, cancelled)created_at
: Order timestamp
id
: Primary keyorder_id
: Foreign key to ordersproduct_id
: Foreign key to productsproduct_name
: Product name snapshotquantity
: Item quantityprice
: Item price snapshot
GET /api/products
- Get all active productsGET /api/products/:id
- Get single productPOST /api/products
- Add new product (admin)PUT /api/products/:id
- Update product (admin)DELETE /api/products/:id
- Delete product (admin)
POST /api/orders
- Submit new orderGET /api/orders
- Get all orders (admin)PUT /api/orders/:id
- Update order status (admin)
The system comes pre-loaded with sample products:
- Moonlight Clutch - Elegant silver and pearl evening clutch
- Bohemian Dreams Tote - Colorful glass beaded tote with ethnic patterns
- Vintage Rose Crossbody - Rose-colored vintage beaded crossbody bag
- Ocean Breeze Shoulder Bag - Blue and green crystal beaded shoulder bag
- Backend: Hono framework with TypeScript
- Database: SQLite with automatic schema creation
- Frontend: Vanilla HTML/CSS/JavaScript
- Styling: TailwindCSS with custom components
- Images: AI-generated product images
- Storage: Local storage for shopping cart persistence
- Persistent cart using localStorage
- Real-time quantity updates
- Cart badge with item count
- Smooth sidebar animations
- Auto-generate AI image URLs based on product details
- Rich product information (colors, bead styles, categories)
- Stock management
- Product activation/deactivation
- Simple checkout flow
- Order status tracking
- Customer notification system
- Admin order management
- Mobile-first approach
- Touch-friendly interface
- Optimized for all screen sizes
- Smooth animations and transitions
- The database will be automatically initialized with sample products
- Visit
/
to browse the shop - Visit
/admin
to manage products and orders - Add products to cart and test the checkout process
Perfect for artisans, boutique owners, and anyone selling handcrafted beaded accessories online! 🎨✨