scuola.bar Case Study
A comprehensive, multi-tenant PWA for streamlining school cafeteria orders.
Category
Full-Stack Web Application, SaaS, E-commerce
Technologies
Next.js, React, TypeScript, Prisma
Domain
Education, Food Service, E-commerce
Project Overview
scuola.bar is a modern, installable Progressive Web App (PWA) designed to replace outdated paper-based ordering systems in school cafeterias. It provides a seamless digital experience for students to order food and a powerful, multi-tenant management dashboard for cafeteria staff and administrators to oversee the entire operation—from inventory and pricing to order fulfillment and user management.
The platform is architected to support multiple schools and domains from a single codebase, making it a scalable SaaS solution. It features a complete e-commerce workflow, including a product catalog, shopping cart, a credit-based wallet system with online top-ups, and detailed order tracking.
The Problem
Traditional school cafeterias often rely on manual, inefficient processes for taking orders, such as paper slips collected in the morning or verbal orders. This system is prone to errors, creates logistical headaches for staff, offers no real-time inventory tracking, and provides a poor experience for students.
Inefficiency and Errors
Manual order collection is slow and susceptible to lost tickets, illegible handwriting, and miscommunication.
Poor Inventory Management
Staff have no easy way to track daily stock levels, leading to unavailable items and food waste.
Inconvenient Payment
Handling cash daily is cumbersome and difficult to track for both students and the cafeteria.
Lack of Scalability
A single system couldn't easily be adapted for different schools or branches, each with unique products, prices, and schedules.
The Solution
scuola.bar addresses these challenges with a three-tiered application structure: a student-facing PWA, a comprehensive management dashboard, and a super-admin panel.
1. Student-Facing Progressive Web App (PWA)
A mobile-first, installable application for students and school staff to place orders.
Product Catalog: Browse daily items with descriptions, images, and allergen info
Customizable Orders: Select variations and add-ons
Credit Wallet: Recharge via PayPal and integrated gateways
Order Tracking: Real-time status updates and history
2. Multi-Tenant Management Dashboard
A powerful back-office for cafeteria managers to run daily operations. Each school/domain can be managed independently.
Order Fulfillment: Real-time dashboard for order management
Product Management: Create and manage products with options
Inventory & Availability: Track stock levels automatically
Analytics & Reporting: Sales data and business insights
3. Super-Admin Panel
A centralized dashboard for platform administrators to manage the entire SaaS ecosystem.
School & Domain Management: Onboard new schools
Global User Oversight: Manage accounts across tenants
System-Wide Analytics: Platform growth and revenue data
Key Challenges & Learnings
1. Architecting for Multi-Tenancy
The biggest challenge was designing a system that could serve multiple independent schools from a single application instance.
Solution:
Implemented a robust data model in Prisma where Users, Products, and Orders are all tied to a specific Domain, which in turn belongs to a School. Server actions and API routes were carefully designed to be tenant-aware, ensuring strict data isolation.
Learning:
This project solidified my understanding of SaaS architecture, data modeling for scalability, and the importance of context-aware logic in the backend.
2. Real-Time Inventory Management
Ensuring that product availability was accurately reflected and that stock couldn't be oversold during peak ordering times was critical.
Solution:
Leveraged Prisma's transactional capabilities within server actions. When an order is created, the database transaction includes decrementing the amount or preorderQuantity on the ProductAvailability table, ensuring the operation is atomic.
Learning:
Gained practical experience in handling potential race conditions and designing a reliable inventory system that forms the backbone of the e-commerce functionality.
3. Complex Business Logic for Orders & Payments
The system needed to handle various scenarios: partial payment with credit, full payment with credit, cash payments, and correct credit refunds upon cancellation.
Solution:
Developed a set of utility functions to accurately calculate totals based on the cart state, user's credit, and item statuses. Server actions for order creation and cancellation contain precise logic to update user credit and order records atomically.
Learning:
Excellent exercise in translating complex business rules into reliable, testable code, especially concerning financial calculations where precision is paramount.
4. Building a Comprehensive Test Suite
To ensure the stability and reliability of a platform handling real orders and payments, robust testing was non-negotiable.
Solution:
Wrote an extensive suite of end-to-end tests using Playwright. The tests cover critical user flows such as registration, login, adding items to the cart, checkout with different payment scenarios, and the core functionalities of the management and admin dashboards.
Learning:
Learned how to structure a large E2E test suite using the Page Object Model (POM) pattern for maintainability and how to effectively seed a database to create complex test scenarios.
My Role
As the sole full-stack developer on this project, I was responsible for the entire development lifecycle, including:
System Architecture & Database Design
Designing the multi-tenant schema in Prisma and planning the overall application structure.
Backend Development
Implementing all server-side logic using Next.js Server Actions, including authentication, payment processing, and all CRUD operations.
Frontend Development
Building the entire user interface for the student PWA, management dashboard, and admin panel using React and Mantine UI.
Testing
Writing and maintaining a comprehensive suite of end-to-end tests with Playwright to ensure application reliability.
DevOps
Creating Dockerfiles and Docker Compose configurations for easy development setup and production deployment.
Tech Stack
Framework
Next.js 14 (with App Router)
Language
TypeScript
Database & ORM
PostgreSQL with Prisma
Backend Logic
Next.js Server Actions (next-safe-action)
UI & Styling
Mantine UI, Tabler Icons
State Management
Zustand
Validation
Zod
Authentication
Custom (argon2, JWT-like tokens)
Payments
PayPal, Pago In Rete integration
Nodemailer with React Email
File Storage
Backblaze B2 (AWS S3 SDK)
Testing
Playwright for E2E testing
Deployment
Docker & Docker Compose
Project Tags
Ready to Start Your Project?
Let's discuss how we can help bring your vision to life with our expertise and innovative approach.