Coffee Docket

From top-up to coffee served.

Staff manage customer accounts, add prepaid credits and deduct a credit when serving a coffee. Customers can view their remaining balance and transaction history.

• Customer search, profile creation and account updates.
• Bulk top-ups with drink, size, add-on and discount selection.
• Configurable menu items, sizes, add-ons and prices.
• Transaction histories and dashboard summaries of customer activity, outstanding credits and daily top-up revenue.
• Responsive layouts, pull-to-refresh and progressive web app support.

A React interface over a managed backend.

Next.js provides the application shell. React components handle the staff and customer workflows, while a shared TypeScript service centralises database access through the Supabase JavaScript client.

An authentication context manages session state and role-based navigation, integrating with Supabase Auth. Database requests originate from the browser through the shared service; Supabase provides the backend API and persistence.

Coffee credits and purchase amounts.

Customer records hold coffee balances. Transactions link to customers and record credit quantities, monetary amounts and drink details. Separate menu tables define drinks, sizes and add-ons.

Balances count coffees rather than currency. Pricing is calculated from the selected drink, size and add-ons, multiplied by quantity and adjusted for any discount.

A top-up records a transaction and increases the balance. Serving a coffee records a serving transaction and reduces the balance. The interface refreshes the relevant customer and activity views after the operation.

TypeScript across the interface and service layer.

• Next.js 15, React 19 and TypeScript for the application.
• Tailwind CSS, shadcn/ui and Radix UI for styling and interface components.
• Supabase Auth and PostgreSQL for authentication and stored data.
• A web app manifest and service worker for PWA support.

Mobile interactions include touch gestures and pull-to-refresh. iOS modal handling adjusts focus and available height when the keyboard appears, keeping forms usable on smaller screens and in landscape orientation.