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

gracie1

Beadebag

Public
Like
Beadebag
Home
Code
4
backend
3
frontend
4
shared
1
README.md
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
/
Code
/
Search
index.ts
https://gracie1--6ea28bc23f9c11f0890276b3cceeab13.web.val.run
README.md

Beaded Bags E-commerce Website

A complete e-commerce platform for selling handcrafted beaded bags with shopping cart functionality, order management, and customer features.

Features

  • Product Catalog: Browse beautiful beaded bags with detailed descriptions and images
  • Shopping Cart: Add/remove items, adjust quantities, view totals
  • Customer Orders: Place orders with contact information
  • Admin Panel: Manage products and view orders (basic implementation)
  • Responsive Design: Works on desktop and mobile devices

Project Structure

β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ database/
β”‚   β”‚   β”œβ”€β”€ migrations.ts    # Database schema setup
β”‚   β”‚   └── queries.ts       # Database query functions
β”‚   β”œβ”€β”€ routes/
β”‚   β”‚   β”œβ”€β”€ products.ts      # Product API endpoints
β”‚   β”‚   β”œβ”€β”€ orders.ts        # Order API endpoints
β”‚   β”‚   └── static.ts        # Static file serving
β”‚   └── index.ts             # Main Hono server
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ App.tsx          # Main React application
β”‚   β”‚   β”œβ”€β”€ ProductCard.tsx  # Individual product display
β”‚   β”‚   β”œβ”€β”€ Cart.tsx         # Shopping cart component
β”‚   β”‚   └── OrderForm.tsx    # Checkout form
β”‚   β”œβ”€β”€ index.html           # Main HTML template
β”‚   β”œβ”€β”€ index.tsx            # Frontend entry point
β”‚   └── style.css            # Custom styles
β”œβ”€β”€ shared/
β”‚   └── types.ts             # Shared TypeScript types
└── README.md

Technology Stack

  • Backend: Hono (TypeScript API framework)
  • Frontend: React 18.2.0 with TypeScript
  • Database: SQLite for product and order storage
  • Styling: TailwindCSS
  • Deployment: Val Town platform

Getting Started

  1. The backend automatically sets up the database on first run
  2. Sample beaded bag products are pre-loaded
  3. Visit the main page to start shopping
  4. Add items to cart and proceed to checkout

API Endpoints

  • GET /api/products - Get all products
  • POST /api/products - Add new product (admin)
  • GET /api/orders - Get all orders (admin)
  • POST /api/orders - Place new order
  • GET /api/orders/:id - Get specific order

Database Schema

Products Table

  • id (INTEGER PRIMARY KEY)
  • name (TEXT)
  • description (TEXT)
  • price (REAL)
  • image_url (TEXT)
  • category (TEXT)
  • in_stock (BOOLEAN)
  • created_at (DATETIME)

Orders Table

  • id (INTEGER PRIMARY KEY)
  • customer_name (TEXT)
  • customer_email (TEXT)
  • customer_phone (TEXT)
  • shipping_address (TEXT)
  • items (TEXT) - JSON array of cart items
  • total_amount (REAL)
  • status (TEXT)
  • created_at (DATETIME)

Future Enhancements

  • Payment integration (Stripe/PayPal)
  • User authentication and accounts
  • Product reviews and ratings
  • Inventory management
  • Order tracking
  • Email notifications
  • Advanced admin dashboard
HTTP
  • index.ts
    gracie1--6e…13.web.val.run
Code
backendfrontendsharedREADME.md
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.