Skip to content
arsyad®

work/fbnstore · 01/04

Full point-of-sale for cafés & retail

Role
Design + fullstack
Client
fbnstore.id
Stack
Vite, React, TypeScript, Hono
Platform
Web + Tablet
Year
2024
Link
fbnstore.id ↗
fbnstore POS — product grid with cart panel
[01]overview.md

Overview

01 — problem

Small cafés and shops juggle cashiering, stock and reports across tools that don't talk to each other.

02 — what I did

Designed and built the whole product end to end — cashier UI, catalogue, cart and checkout flow, back-office and the Hono API behind it.

03 — outcome

One fast web POS that runs on any tablet or laptop at the counter, owned and shipped by a single engineer.

[02]screens/
fbnstore cashier view with product grid and cart
fbnstore back-office screen
fbnstore tablet layout
[03]under_the_hood.ts

Under the hood

Cashier UIBack-officeHono APIDatabasePayments
fig — system overview
api/routes/orders.tsts
const app = new Hono<Env>()app.post('/orders', zValidator('json', OrderInput), async (c) => {  const input = c.req.valid('json')  const order = await c.var.db.transaction(async (tx) => {    const lines = await reserveStock(tx, input.items)    return createOrder(tx, { ...input, lines })  })  return c.json(order, 201)})
Stock is reserved and the order written in one transaction — a counter never sells what it doesn't have.

Stack

  • Vite
  • React
  • TypeScript
  • Hono
[04]results.log

Whatshipped.

  • End-to-end ownership: product, design, frontend, API.
  • Runs on commodity tablets — no dedicated POS hardware.
next project → cd ../muslimappMuslimAppDaily companion app for Muslim users