• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
gracie1

gracie1

beadedbag

Public
Like
beadedbag
Home
Code
3
frontend
4
README.md
H
index.ts
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
README.md
Code
/
README.md
Search
6/2/2025
README.md

Beaded Treasures - E-commerce Website 🛍️✨

A complete e-commerce platform for selling handcrafted beaded bags. Features product management, shopping cart, order processing, and admin panel.

Features

Customer Features

  • 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

Admin Features

  • 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

Pages

Main Shop (/)

  • Hero section with call-to-action
  • Category filters
  • Product grid with hover effects
  • Shopping cart sidebar
  • Checkout modal

Admin Panel (/admin)

  • Product management table
  • Order management with status updates
  • Add/edit product modal
  • Real-time inventory tracking

Database Schema

Products Table

  • id: Primary key
  • name: Product name
  • description: Product description
  • price: Product price
  • colors: Available colors
  • bead_style: Type of beads used
  • image_url: Product image URL
  • category: Product category
  • in_stock: Stock availability
  • active: Product visibility
  • created_at, updated_at: Timestamps

Orders Table

  • id: Primary key
  • customer_name: Customer full name
  • email: Customer email
  • phone: Customer phone (optional)
  • address: Shipping address (optional)
  • total: Order total amount
  • status: Order status (pending, processing, shipped, delivered, cancelled)
  • created_at: Order timestamp

Order Items Table

  • id: Primary key
  • order_id: Foreign key to orders
  • product_id: Foreign key to products
  • product_name: Product name snapshot
  • quantity: Item quantity
  • price: Item price snapshot

API Endpoints

Products

  • GET /api/products - Get all active products
  • GET /api/products/:id - Get single product
  • POST /api/products - Add new product (admin)
  • PUT /api/products/:id - Update product (admin)
  • DELETE /api/products/:id - Delete product (admin)

Orders

  • POST /api/orders - Submit new order
  • GET /api/orders - Get all orders (admin)
  • PUT /api/orders/:id - Update order status (admin)

Sample Products

The system comes pre-loaded with sample products:

  1. Moonlight Clutch - Elegant silver and pearl evening clutch
  2. Bohemian Dreams Tote - Colorful glass beaded tote with ethnic patterns
  3. Vintage Rose Crossbody - Rose-colored vintage beaded crossbody bag
  4. Ocean Breeze Shoulder Bag - Blue and green crystal beaded shoulder bag

Technology Stack

  • 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

Key Features

Shopping Cart

  • Persistent cart using localStorage
  • Real-time quantity updates
  • Cart badge with item count
  • Smooth sidebar animations

Product Management

  • Auto-generate AI image URLs based on product details
  • Rich product information (colors, bead styles, categories)
  • Stock management
  • Product activation/deactivation

Order Processing

  • Simple checkout flow
  • Order status tracking
  • Customer notification system
  • Admin order management

Responsive Design

  • Mobile-first approach
  • Touch-friendly interface
  • Optimized for all screen sizes
  • Smooth animations and transitions

Getting Started

  1. The database will be automatically initialized with sample products
  2. Visit / to browse the shop
  3. Visit /admin to manage products and orders
  4. Add products to cart and test the checkout process

Perfect for artisans, boutique owners, and anyone selling handcrafted beaded accessories online! 🎨✨

FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.