Bayline

A parking operations interface built around a three-level, 96-bay garage. Bookings, arrivals, sessions and versioned tariffs share one browser-side model.

• Best forDevelopers building parking-operator dashboards, garage-management tools and reservation interfaces.

• Garage

  Inspect the three.js garage, isolate or explode levels, select bays and run the complete reservation-to-departure sequence. Occupancy, free bays, revenue and the attention list follow the same model.

• Sessions

  Filter, search and sort active or closed stays, inspect tariff line items and close one or several sessions with a local invoice result.

• Reservations

  Explore a bay-by-hour timeline and create, edit or cancel bookings with overlap, vehicle-compatibility and service-status checks.

• Revenue

  Compare local revenue periods, inspect billed sessions and save a new tariff version while preserving the prices already used for closed stays.

• A garage built in code

  Procedural three.js geometry draws three decks, ramps, barriers, markings and selectable vehicles. Level isolation, rotation, explosion and recenter controls keep the building navigable; an SVG bay plan is provided when WebGL is unavailable.

• One booking-to-billing workflow

  The scripted demonstration reserves a bay, brings a car through the barrier, opens its stay when parked, advances the simulated clock, then bills and releases the bay when it leaves. Every dashboard follows those same events.

• Arrival and reservation rules

  Inline checks cover occupied, held, incompatible or out-of-service bays, duplicate parked plates, overlapping bookings and invalid durations. Late holds become no-shows according to the simulated clock.

• Versioned tariffs and local exports

  Started billing blocks, a free period and daily caps are calculated locally. Closed sessions keep their tariff snapshot and cannot be billed twice. CSV exports use the records displayed by each view.

• Responsive controls and reduced motion

  Keyboard bay navigation, search, phone layouts and reduced-motion states are included. The three.js scene has full and lighter rendering tiers; performance depends on the device and selected tier.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

One fictional garage runs on a simulated browser clock. Arrivals, reservations, billing and invoices are local demonstrations: no barrier, camera, sensor, booking service, payment provider or backend is connected. Reloading restores the seed.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Three.js, Lucide icons
• FontsPlus Jakarta Sans, Geist Mono
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.