Public
Fullstack ecommerce: Hono API + React + SQLite
ecommercehonoreactsqlite
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 fullstack ecommerce demo on Val Town. Val Town runs Deno (TypeScript), not Python, so this uses Hono — a lightweight web framework with the same route/middleware feel as FastAPI — instead of FastAPI itself.
- Backend: Hono REST API (
api/routes.ts), cookie-based session cart - Database: Val Town SQLite (
db/schema.ts) — products, cart, orders, order_items - Frontend: Client-side React SPA (
frontend/), Twind for styling
Rendering mermaid diagram...
| Method | Path | Description |
|---|---|---|
| GET | /api/products | List all products |
| GET | /api/products/:id | Get one product |
| GET | /api/cart | Get current session's cart |
| POST | /api/cart | Add item to cart { productId, quantity } |
| PATCH | /api/cart/:productId | Update quantity { quantity } (0 removes) |
| DELETE | /api/cart/:productId | Remove item from cart |
| POST | /api/checkout | Place order { name, email }, clears cart |
| GET | /api/orders/:id | Get an order + its line items |
index.ts ← Hono entrypoint (serves frontend + /api)
api/routes.ts ← All REST API routes
db/schema.ts ← SQLite schema + seed data
frontend/
root.tsx ← HTML shell
index.tsx ← React entrypoint
lib/api.ts ← Typed fetch client for the API
components/
App.tsx ← Root layout / view router
ProductList.tsx ← Product grid
CartPanel.tsx ← Cart sidebar
Checkout.tsx ← Checkout form
OrderConfirmation.tsx ← Post-order confirmation
- Add product images/categories
- Add an admin view to manage inventory
- Add auth so orders are tied to real user accounts instead of a cart cookie