QueueMind

dashboard sb10
Check local bank branch data
add check-in sb10

Inspiration

Our journey began with a simple observation at banking branches across Vietnam: customers often face long wait times while some branches remain underutilized. During peak hours, queues can extend to over 30 minutes, frustrating customers and overwhelming staff. Meanwhile, other branches nearby sit nearly empty. This inefficiency stems from the lack of real-time visibility into branch traffic patterns and inability to predict demand surges.

We asked ourselves: What if customers could know exactly which branch has the shortest wait time right now? What if branches could predict their busiest hours and prepare accordingly?

This inspired us to build QueueMind — an AI-powered solution that transforms historical transaction data, real-time check-ins, and predictive analytics into actionable insights for both customers and branch managers.

What it does

QueueMind is a dual-platform solution that addresses branch congestion from two perspectives:

For Customers:

Real-time branch traffic visualization showing current congestion levels across all branches
AI-powered predictions of optimal visit times based on historical patterns, day of week, and seasonal factors
Smart queue management with real-time wait time estimates
"Best Time to Visit" recommendations that can save customers up to 40% of waiting time
Check-in functionality to reserve spots and receive notifications

For Branch Managers:

Predictive analytics showing expected traffic 24-48 hours in advance
Staff optimization recommendations based on forecasted demand
Real-time queue monitoring with alert systems for congestion
Transaction type breakdown to understand service patterns
Data-driven insights for branch network planning and resource allocation

Key Features:

Traffic Prediction Engine: Uses Qwen AI to analyze 30+ days of historical data, time of day, day patterns, and real-time check-ins
Smart Queue Management: Dynamic queue estimation with multiple service lanes
Branch Optimization Dashboard: Comparative analytics across branches
Mobile-Friendly Interface: Accessible via web and mobile browsers

How we built it

QueueMind was built with a modern, scalable architecture designed for production deployment:

Frontend Stack:

Next.js 16.2.4 with App Router for optimal performance and SEO
React 18 with TypeScript for type safety and developer experience
Tailwind CSS for responsive, mobile-first design
Real-time updates using Server Actions and API routes

Backend & AI Integration:

Next.js API Routes handling RESTful endpoints for branches, predictions, and check-ins
Qwen AI API for generating intelligent traffic predictions
Mock data layer simulating real branch networks, traffic patterns, and historical data
TypeScript interfaces ensuring data consistency across the application

Key Technical Decisions:

Chose Next.js for its built-in API routes, server-side rendering, and excellent developer experience
Implemented async/await patterns for all API calls to handle the Promise-based params in Next.js 16
Used TypeScript throughout to catch errors early and maintain code quality
Designed modular components for reusability (BranchCard, ForecastChart, CheckInButton, etc.)
Created separate API routes for each major function (branches, predictions, check-ins)

Development Process:

Built core data models and mock data reflecting real banking branch scenarios
Implemented API endpoints for branch listing and traffic history
Integrated Qwen AI for predictive analytics with fallback to local algorithms
Created responsive UI components with real-time data visualization
Tested deployment to Vercel for production readiness

Challenges we ran into

Technical Challenges:

Next.js 16 Migration: Upgrading from Next.js 14 to 16 broke our route handlers due to the new Promise-based params API. We had to refactor all dynamic route handlers to use await params instead of direct params access.
Windows Path Compatibility: Initial builds failed on Windows due to path scheme issues. Resolved by updating to the latest Next.js version that handles Windows paths correctly.
TypeScript Type Safety: Ensuring type safety across API routes, especially with dynamic params and complex prediction models, required careful interface design and generic types.
AI Integration Reliability: Balancing between using Qwen AI API and having robust fallback mechanisms when the API is unavailable or slow.

Business Logic Challenges:

Prediction Accuracy: Determining the right balance between historical data weight and real-time check-in data for accurate predictions.
Data Scarcity: Creating realistic mock data that reflects actual banking traffic patterns including daily, weekly, and seasonal variations.
User Experience: Designing an interface that's informative without overwhelming users with too much data.

Accomplishments that we're proud of

Production-Ready Deployment: Successfully deployed to Vercel with a working live demo accessible to judges and stakeholders.
Complete End-to-End Solution: Built a fully functional system from data models to AI predictions to user interface in a compressed timeframe.
Type-Safe Codebase: Maintained 100% TypeScript coverage with strict type checking, resulting in a robust and maintainable codebase.
Real-Time Predictions: Implemented AI-powered traffic predictions that respond to changing conditions and historical patterns.
Mobile-First Design: Created a responsive interface that works seamlessly on desktop, tablet, and mobile devices.
Scalable Architecture: Designed the system to easily integrate with real banking APIs and production data sources.
Comprehensive API Documentation: Provided detailed API documentation for future integration and development.

What we learned

Technical Skills: