This project is a full-stack front-end showcase built around a simple but realistic scenario: a customer selects a category, chooses available additives, and sends an order. Administrators manage categories, ingredients, and availability through a secure admin panel.
The application demonstrates clean, scalable React architecture, modern UI/UX patterns, and real-world data flows.
🛠 Highlights
- Zero-trust data access: Postgres Row Level Security strictly separates public (anon) reads from admin writes.
- Atomic writes: a single RPC create_order(category_id, addons[]) inserts an order + its add-ons in one transaction, validating availability and category linkage server-side.
- Server notifications: Edge Function (order-notify) composes a readable summary and sends it to Telegram with proper CORS handling.
- Lean, fast UI: React + Vite + TS, mobile-first layout, SPA routing, and GitHub Pages deploy (with 404 fallback).
Extendable: optional OCR (Tesseract.js) to parse grocery receipts and auto-mark items “in stock,” with fuzzy matching & synonym learning.
Key principles followed
KISS: small, predictable functions
DRY: shared hooks, utilities, UI components
SOLID: separation of concerns, single-responsibility functions
🚀 Features
-
User
Select a category (e.g., Eggs, Porridge, Toast).
View available additives for the chosen category.
Multi-select or deselect add-ons, confirm order → success screen.
Fast, responsive UI. -
Admin
Secure, email-based access (Supabase Auth).
Manage categories and ingredients.
Search ingredients.
See live updates without reloading (optimistic UI).
Order log (via SQL view or direct query) — category + selected add-ons. -
Messenger alert on each order, example:
📅 15.08.2025
🍳 Eggs
➕ Cheese, Ham
🧱 Tech stack
- Frontend: React 18, Vite, TypeScript, CSS (mobile-first).
- Backend: Supabase (Postgres + RLS, Edge Functions, Auth, Realtime).
- Integration: Telegram Bot API (via Edge Function fetch).
- CI/CD: GitHub Actions → GitHub Pages.
💡 Why This Project Matters
This application reflects how modern production React apps are built:
- .data-driven
- .modular
- .fully typed
- .optimistically updated
- .clean state transitions
- .real backend communication
- .separate customer/admin flows
- .feature-based architecture