A real-time crowd-aware itinerary planner that helps visitors maximize their time at amusement parks by minimizing wait times.

ParkPal Preview HTML CSS JavaScript

Amusement parks suffer from uneven crowd distribution — popular rides attract massive queues while other attractions stay empty. Visitors often waste 50–70% of their park time waiting in lines, missing rides entirely. ParkPal solves this by building an optimized, time-slotted itinerary based on live crowd data fed in by park operators.

parkpal/
├── index.html # App shell & semantic markup
├── css/
│ ├── reset.css # Modern CSS reset
│ ├── variables.css # Design tokens (colors, spacing, radius...)
│ ├── layout.css # App shell, header, step nav, page structure
│ ├── components.css # All UI components (cards, buttons, timeline...)
│ └── animations.css # Keyframes & utility animation classes
├── js/
│ ├── utils.js # Pure functions (time conversion, crowd math)
│ ├── planner.js # Core scheduling algorithm
│ ├── ui.js # All DOM rendering — no business logic
│ ├── admin.js # Operator panel (modal, slider, save)
│ ├── background.js # Canvas particle background
│ └── app.js # Root controller — state & event wiring
└── data/
 └── rides.js # Ride definitions + live crowd state

Design principles:

• Separation of concerns — data, logic, rendering are fully decoupled
• Module pattern — each file exposes a single IIFE namespace
• Event delegation — single listener on the grid container vs one per card
• No framework dependency — vanilla JS, ships as a single folder

planner.js implements a greedy scheduling approach:

1. Filter the visitor's selected rides
2. Sort by ascending crowd score (lowest wait → do first)
3. Slot rides sequentially with walk buffers (5 min) between each
4. Skip any ride that would overrun the departure time
5. Insert 15-minute rest breaks every 3 rides

Wait time model:

No build step required. Open index.html in any modern browser:

git clone https://github.com/harshitha-809/smart-queue-optimizer.git
cd parkpal
open index.html # macOS
# or
start index.html # Windows
# or serve with any static server:
npx serve .

The data/rides.js file is the only integration point. To connect a live backend:

// Replace static data in data/rides.js with a fetch call:
async function loadRides() {
 const res = await fetch('https://your-api.com/rides/live');
 window.RIDES_DATA = await res.json();
}

Suggested stack: Firebase Realtime Database (operators update crowd %, visitors see changes instantly via WebSocket).

• QR code entry with pre-assigned visitor ID
• Backend integration (Firebase / REST)
• Park map with walking directions between rides
• Push notifications: "Head to Thunder Coaster now — queue just dropped!"
• Historical crowd analytics dashboard for park managers
• Multi-language support

Pull requests are welcome. For major changes, please open an issue first.

1. Fork the repo
2. Create your branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m 'Add my feature'
4. Push and open a PR

MIT — see LICENSE for details.

Built as a solution to real crowd management problems in high-traffic entertainment venues.