Grocery Shopping App

A full-stack grocery shopping list application built with React and Hono.

Features

  • ✅ Add new grocery items
  • ✅ Mark items as purchased/unpurchased
  • ✅ Edit item names and quantities
  • ✅ Delete items
  • ✅ Persistent storage with SQLite
  • ✅ Real-time updates
  • ✅ Clean, responsive UI

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   └── items.ts         # Grocery items API routes
│   └── index.ts             # Main Hono server
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main app component
│   │   ├── GroceryItem.tsx  # Individual item component
│   │   └── AddItemForm.tsx  # Form to add new items
│   ├── index.html           # Main HTML template
│   └── index.tsx            # Frontend entry point
└── shared/
    └── types.ts             # Shared TypeScript types

API Endpoints

  • GET /api/items - Get all grocery items
  • POST /api/items - Create a new item
  • PUT /api/items/:id - Update an item
  • DELETE /api/items/:id - Delete an item

Getting Started

This app runs on Val Town. The backend serves the frontend and provides a REST API for managing grocery items.