Serviti - Restaurant Ordering Platform

Serviti is a modern, real-time web platform designed to streamline the ordering process in restaurants. It allows customers to place orders directly from their table using a QR code, and provides restaurant staff with a powerful dashboard to manage orders, menus, and tables efficiently.

✨ Features

For Customers

• QR Code Onboarding: Scan a QR code at the table to instantly access the menu
• Autonomous Ordering: Browse the digital menu, add items to a cart, and place orders directly from your smartphone
• Real-time Order Status: Track the status of your order in real-time, from "placed" to "served"
• Service Requests: Easily call a waiter or request the bill with the tap of a button
• Persistent Session: Your session is maintained on your device, so you can close and reopen your browser without losing your order

For Restaurant Staff

• Admin Dashboard: A comprehensive dashboard to manage all restaurant operations
• Order Management: View and manage incoming orders in real-time, organized by table and status
• Kitchen View: A dedicated, simplified view for kitchen staff to see and manage orders that need to be prepared
• Menu Management: Easily create, update, and manage menu items, categories, prices, and availability
• Table Management: Configure tables, zones, and generate unique QR codes for each table
• User Roles: Support for different user roles (admin, staff) with different levels of access

⚡️ Why Convex?

This project serves as an excellent example of how to leverage Convex for building real-time web applications. Convex provides an all-in-one solution for backend development that includes:

• Real-time Database: Get live updates without any configuration
• Serverless Functions: Query, mutation, and action functions in TypeScript
• Authentication: Built-in auth with flexible providers
• File Storage: Easy file upload and management
• Type Safety: Full TypeScript support across frontend and backend

🛠 Tech Stack

• Frontend: React, TypeScript, Vite, Tailwind CSS, Radix UI
• Backend: Convex for real-time database and serverless functions
• Authentication: Convex Auth
• Additional Features: Resend for email integration, QR code generation

📁 Project Structure

.
├── convex/                 # Convex backend: schema, functions, auth
│   ├── schema.ts           # Database schema definition
│   ├── auth.ts             # Authentication setup
│   ├── *_*.ts              # Convex functions (mutations, queries, actions)
│   └── ...
├── public/                 # Static assets
├── src/                    # Frontend: React application
│   ├── components/         # React components
│   ├── contexts/           # React contexts (AuthContext, etc.)
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utility functions and Convex client setup
│   ├── pages/              # Main application views
│   └── types/              # TypeScript type definitions
├── package.json            # Project dependencies and scripts
└── README.md               # This file

🚀 Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/cver-me/serviti.git
   cd serviti

2. Install dependencies:

   npm install

3. Set up Convex:

   • Install the Convex CLI (if not already installed):

     npm install -g convex

   • Sign up for a free Convex account at convex.dev
   • Log in and create a new project:

     npx convex dev --once
     npx convex deploy

   • Follow the prompts to set up your Convex project

4. Configure email service (optional):

   • Sign up for Resend
   • Add your API key to Convex environment variables:

     npx convex env set AUTH_RESEND_KEY "your_resend_api_key"

Running the Application

To run the application locally, you need to run both the frontend (Vite) and the backend (Convex) development servers concurrently.

The project is configured to run both with a single command:

npm run dev

This will:

• Start the Convex local development server
• Start the Vite frontend development server and open the application in your browser

📜 Available Scripts

• npm run dev: Starts both the frontend and backend development servers
• npm run dev:frontend: Starts only the Vite frontend server
• npm run dev:backend: Starts only the Convex backend server
• npm run build: Builds the frontend application for production
• npm run lint: Lints the codebase to check for errors
• npm run format: Formats the codebase with Prettier

🤝 Contributing

Contributions are welcome! Here are some areas that could use help:

• Performance improvements
• Additional UI components
• More comprehensive testing
• Documentation enhancements
• New features based on issues

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

💡 Key Learnings with Convex

This project demonstrates several key capabilities of Convex:

• Real-time subscriptions: The entire app updates in real-time without complex WebSocket setup
• Seamless authentication: Integration with Convex Auth provides secure authentication with minimal code
• Serverless functions: All business logic lives in Convex functions with full database access
• Type safety: Generated types ensure backend and frontend stay in sync
• File storage: Convex Storage makes file uploads and management straightforward

🔗 Links

• Convex Documentation
• Convex Dashboard
• Project Live Demo (if deployed)
• Technical Documentation