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