A modern, frontend-first queue management application built with React + Vite and styled with Tailwind CSS.
QueueFlow Pro helps teams track customer flow in real time with a clean, dashboard-like interface for adding customers, updating service status, and monitoring queue health.
- Live queue tracking with status transitions:
waiting→serving→completed
- Quick customer intake form with service selection
- Operational stats cards (total, waiting, serving)
- Instant actions:
- Start serving
- Mark complete
- Remove customer
- Branded UI update with an integrated QueueFlow Pro logo
- Dark mode support with seamless theme switching
- Persistence of queue state and theme preference using
localStorage - Enhanced responsive experience for mobile, tablet, and desktop screens
- Mobile-first spacing and typography adjustments across forms, cards, and queue items
- Smooth layout scaling through
mdandlgbreakpoints (single-column to two-column dashboard) - Adaptive action controls in queue cards (compact icon actions on smaller screens, full text actions on larger screens)
- Improved header/stat card wrapping for better usability on narrow and medium-width devices
- React 19
- Vite 7
- Tailwind CSS 4
- React Icons
- ESLint 9
Live URL: https://queue-management-five.vercel.app/
- Node.js 18+ (recommended)
- npm 9+
npm installnpm run devOpen the local URL shown in your terminal (typically http://localhost:5173).
npm run buildnpm run previewnpm run lint.
├── public/
│ ├── images/
│ │ └── socials/
│ │ ├── github-color-svgrepo-com.svg
│ │ ├── linkedin-svgrepo-com.svg
│ │ └── x.svg
│ └── vite.svg
├── src/
│ ├── assets/
│ │ ├── logo.png
│ │ ├── Desktop_View_2026_04_21.png
│ │ └── Mobile_View_2026-04-24.png
│ ├── components/
│ │ ├── CircularLogo.jsx # Reusable animated brand logo
│ │ ├── Header.jsx # Header + queue stats + theme toggle
│ │ ├── QueueForm.jsx # Customer intake form
│ │ ├── QueueDisplay.jsx # Queue list + status/action controls
│ │ └── Footer.jsx
│ ├── context/
│ │ ├── ThemeContext.jsx # Theme provider + persistence
│ │ ├── themeContext.js # Theme context definition
│ │ └── useTheme.js # Custom theme hook
│ ├── App.jsx # Main app state and layout orchestration
│ ├── App.css
│ ├── index.css
│ └── main.jsx
├── index.html
├── package.json
├── tailwind.config.js
└── vite.config.js
App.jsxmanages queue state, localStorage persistence, and top-level layout composition.- UI responsibilities are split into focused components (
Header,QueueForm,QueueDisplay,Footer, andCircularLogo). - Theme behavior is centralized through context (
ThemeContext.jsx,themeContext.js) and consumed via the reusableuseThemehook.
- Add a customer and choose a service.
- Customer enters the queue with
waitingstatus. - Move to
servingwhen service starts. - Mark as
completedwhen done. - Remove entries from the list when no longer needed.
| Script | Description |
|---|---|
npm run dev |
Start local development server |
npm run build |
Create production build |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint checks |
This project is currently a client-side application (no backend persistence).
Potential next steps:
- Add API + database persistence
- Add authentication/roles (admin, staff)
- Add estimated wait times and analytics
- Add tests (unit + integration + E2E)
Contributions are welcome.
If you plan to contribute:
- Fork the repository
- Create a feature branch
- Commit your changes
- Open a pull request with a clear summary and screenshots (for UI changes)
- React, Vite, Tailwind CSS, and React Icons for the amazing tooling ecosystem.
- The broader React community and documentation for best practices and inspiration.
- Created as part of a frontend learning journey focused on modern React and UI design.
Abdikadir Mohammed(Dadir Dev)
This project is open source and available under the MIT License.