Real-time Order Display & Queue Management System
Features • Installation • Docker • Tech Stack • Contributing
MyNumeri is a real-time order queue display system built with Next.js. Designed for restaurants, cafes, and food events like sagre and festivals, it provides a public-facing screen showing customers when their order is ready, and an internal management panel for staff to advance orders through each preparation stage.
Part of the MySagra ecosystem, MyNumeri integrates seamlessly with backend services to deliver a complete order tracking solution.
- Customer Display Screen — public screen showing order numbers with automatic pagination
- Staff Manager Panel — advance orders through In Preparation → Ready → Picked Up stages
- Real-time Updates — instant order state changes via Server-Sent Events (SSE)
- Announcement Ticker — scrolling marquee banner at the bottom of the display screen
- Workday-aware Filtering — orders are automatically scoped to the current day's shift (08:00–07:59)
ready— shows only orders ready for pickuppreparing— shows only orders currently being preparedhybrid— split-screen with ¾ for preparation and ¼ for ready orders
- Modern UI — built with shadcn/ui components and Radix UI primitives
- Dark/Light Mode — theme switching with next-themes
- Auto Pagination — cycles through pages automatically when orders overflow the grid
- Progress Bar — animated countdown showing time until next page turn
- Responsive Layout — optimized for large TV/monitor displays
- Secure Authentication — NextAuth v4 integration with session management
- Protected Routes — staff pages require authentication; display screen is public
- Node.js 20.x or higher
- npm or yarn
- Access to MySagra backend API
-
Clone the repository
git clone https://github.com/MySagra/mynumeri.git cd mynumeri -
Install dependencies
npm install
-
Configure environment variables
Create a
.envfile in the project root:# Backend API URL API_URL=http://mysagra-backend:4300 # NextAuth Configuration NEXTAUTH_URL=http://localhost:3033 NEXTAUTH_SECRET=your_secure_random_secret_here
Note:
API_URLis used server-side only and is never exposed to the client. -
Run the development server
npm run dev
-
Open your browser
Navigate to http://localhost:3033
MyNumeri includes full Docker support for production deployments.
-
Ensure you have a
.envfile configured (see Installation section) -
Build and run the container
docker compose up -d
-
Access the application
The application will be available at http://localhost:3033
The application uses a multi-stage Dockerfile for optimized builds:
- Dependencies stage — installs npm packages
- Builder stage — builds the Next.js application
- Runner stage — minimal production image running as a non-root user
The container connects to the mysagra_default external network to communicate with the backend.
# Create the network if it doesn't exist yet
docker network create mysagra_default- Next.js 16 — React framework with App Router
- React 19 — UI library
- TypeScript 5 — type safety
- shadcn/ui — re-usable component library
- Radix UI — unstyled, accessible components
- Tailwind CSS 4 — utility-first CSS framework
- Lucide React — icon library
- React Hook Form — form state management
- Zod — schema validation
- @hookform/resolvers — form validation integration
- NextAuth v4 — authentication for Next.js
- @microsoft/fetch-event-source — Server-Sent Events support
- Next.js API Routes — server-side proxy to backend
- clsx — conditional className utility
- tailwind-merge — merge Tailwind classes
- sonner — toast notifications
- vaul — drawer component
- next-themes — dark/light mode
mynumeri/
├── app/
│ ├── (login)/ # Login page
│ ├── api/ # API routes (proxy to backend, SSE, announcements)
│ ├── display/ # Public customer display screen
│ ├── manager/ # Staff order management panel
│ └── settings/ # App settings page
├── components/
│ ├── display/ # Display screen components
│ ├── manager/ # Manager panel components
│ ├── settings/ # Settings card components
│ └── ui/ # Base UI components (shadcn/ui)
├── hooks/ # Custom React hooks
├── lib/ # Auth configuration and shared utilities
├── types/ # TypeScript type definitions
├── utils/ # Shared utility functions
├── public/ # Static assets
├── Dockerfile # Docker configuration
└── docker-compose.yml # Docker Compose configuration
| Route | Description | Access |
|---|---|---|
/ |
Login | Public |
/manager |
Staff order management panel | Authenticated |
/display |
Public customer display screen | Public |
/settings |
Display mode, appearance & event settings | Authenticated |
| Command | Description |
|---|---|
npm run dev |
Start development server on port 3033 |
npm run build |
Build production bundle |
npm start |
Start production server on port 3033 |
npm run lint |
Run ESLint for code quality |
| Variable | Description | Example |
|---|---|---|
API_URL |
Backend API URL (server-side only) | http://mysagra-backend:4300 |
NEXTAUTH_SECRET |
Secret key for NextAuth sessions | Random string (openssl rand -base64 32) |
NEXTAUTH_URL |
Application URL for auth callbacks | http://localhost:3033 |
Contributions are welcome! Please follow these guidelines:
-
Fork the repository
-
Create a feature branch
git checkout -b feature/amazing-feature
-
Commit your changes
git commit -m 'Add some amazing feature' -
Push to the branch
git push origin feature/amazing-feature
-
Open a Pull Request
- Follow the existing code style and conventions
- Write meaningful commit messages
- Update documentation for significant changes
- Test your changes thoroughly before submitting
- Ensure TypeScript types are properly defined
This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).
This means:
- ✅ You can use, modify, and distribute this software
- ✅ You must disclose source code of any modifications
- ✅ You must license derivative works under AGPL-3.0
- ✅ Network use counts as distribution (must provide source)
See the LICENSE file for full details.
- Built with Next.js by Vercel
- UI components from shadcn/ui
- Authentication powered by NextAuth
- Icons from Lucide
- Part of the MySagra ecosystem
If you encounter any issues or have questions:
- 🐛 Open an issue
- 💬 Check existing issues for solutions
- 📧 Contact the MySagra team
Made with ❤️ by the MySagra Team