Bookly is a modern, full-stack room booking application built with Next.js. It provides a seamless and highly customizable interface for users to view room availability and make bookings, along with a powerful administrative dashboard for complete control over the application.

This project was bootstrapped with Firebase Studio.

• Interactive Room Grid: A dynamic home page that provides a visual overview of room availability at a glance for the entire week.
• Detailed Slot Information: Click on any time slot on the home page grid to instantly view its status (Available/Booked) and booking details in a pop-up dialog.
• Color-Coded Legend: Quickly distinguish overlapping meetings with a configurable legend and optional strike overlay that highlight booked slots by title.
• Flexible Weekly View: Easily navigate between weeks using arrow buttons. The grid can be configured by an admin to show either a 5-day work week or a full 7-day week.
• Customizable Start of Week: The weekly view can be configured to start on either Sunday or Monday to match user preferences.
• Streamlined Booking Process: A dedicated /book page allows users to select a room, date, and time from a list of real-time available slots.
• Booking Insights: Review the current day's reservations for any room directly from the booking form before submitting a new request.
• Account-Aware Actions: Optional sign-in requirements ensure booking, editing, and deletion flows respect the authentication rules configured by administrators.

• Centralized Management: A secure, password-protected dashboard at /admin for all administrative functions.
• Full Bookings Overview: View a comprehensive list of all bookings across all rooms, sorted by date and time.
• Room Configuration: Easily add, edit, or delete meeting rooms and their capacities.
• Account Management: Create, rename, reset, or delete end-user accounts from the dashboard, and provide a self-service password change view for signed-in users.
• Secondary Admin Controls: Primary administrators can provision, rename, reset, or remove secondary admin accounts without leaving the app.
• Application Customization:
  • Branding: Change the application's name, subtitle, and upload a custom logo.
  • Booking Logic: Set the default booking slot duration (15, 30, or 60 minutes) and define the start and end of the workday to constrain booking times.
  • Appearance: Adjust the size of room cards on the home page (Small, Medium, Large) to suit your display needs, and toggle the booking legend or strike overlay.
  • Access Rules: Decide whether anonymous visitors can book, edit, or delete reservations before authentication is required.
  • Database: Set the path to the SQLite executable used for data storage.
• Data Portability: Export all application data (settings, rooms, and bookings) to a single JSON file for backup, or import from a backup file to instantly restore the application's state.
• Security: Manage access by changing the primary admin password or rotating secondary admin credentials through dedicated workflows.

Home Page - Weekly Room Availability Grid

Admin Dashboard - Room Management

Admin Dashboard - Data Management (Import/Export)

Admin Dashboard - Application Configuration

• Framework: Next.js (using the App Router)
• UI Library: React
• Styling: Tailwind CSS
• Component Library: ShadCN UI
• Language: TypeScript
• Backend Logic: Next.js Server Actions for all data mutations and queries.
• Database: SQLite (via the sqlite3 CLI) for bookings, configuration, and user credential storage.

To get the application running locally, follow these steps:

Make sure you have Node.js (version 18 or higher) and npm installed on your machine. This project persists data using the sqlite3 command line tool. Ensure sqlite3 is installed and available in your PATH before running the app.

1. Clone the repository:

   git clone <your-repository-url>

2. Navigate to the project directory:

   cd <project-directory>

3. Install the dependencies:

   npm install

Execute the following command to start the development server:

npm run dev

Open http://localhost:9002 in your browser to view the application.

The development server listens on port 9002. To experiment with the Turbopack-powered dev server shipped with Next.js, append the --turbo flag when starting the app:

npm run dev -- --turbo

Once dependencies are installed you can use the following scripts to build and validate the project:

• npm run build — Create an optimized production build in the .next/ directory.
• npm start — Serve the production build locally after running npm run build.
• npm run lint — Lint the codebase with next lint to catch stylistic and common issues.
• npm run typecheck — Run the TypeScript compiler in no-emit mode to ensure type safety.

Running the lint and typecheck commands before committing helps maintain consistent code quality, especially when working with Server Actions and shared UI components.

• src/app/: Contains the main pages and layouts for the application (e.g., page.tsx for the home page and admin/page.tsx for the admin dashboard).
• src/components/: Houses all React components.
  • src/components/ui/: Auto-generated UI components from ShadCN.
  • src/components/bookly/: Custom components specific to the Bookly application.
• src/lib/: Core logic and utilities.
  • actions.ts: Contains all the Next.js Server Actions that interact with the data layer and enforce authentication rules.
  • config-store.ts, sqlite-db.ts, mock-data.ts: Persist configuration, bookings, and credentials to SQLite while exposing helper functions for rooms and backups.
• src/context/: Shared React context such as the UserProvider that keeps lightweight client state in sync with authentication cookies.
• data/: Persisted application data.
  • bookly.sqlite: SQLite database storing bookings, configuration, admin accounts, and app user credentials.
  • rooms.json: JSON definition for available rooms used by the booking grid and import/export flows.
• public/: Static assets, including the uploaded application logo.

Bookly divides its persisted data between a lightweight JSON file and a structured SQLite database so that each store handles the tasks it is best suited for:

• Room definitions (data/rooms.json): All room metadata—IDs, display names, and capacities—is kept in a JSON file. The room server actions (getRooms, addRoom, updateRoom, deleteRoom) exclusively read from and write to this file, ensuring room changes are quick to load and easy to export.
• Bookings, configuration, and accounts (data/bookly.sqlite): The SQLite database contains tables for bookings, application configuration, and both admin and end-user credentials. Helper modules (config-store, sqlite-db, mock-data) wrap all access to these tables so that CRUD operations, import/export routines, and authentication flows operate against the database as the source of truth.
• Import/export bridge: Backup routines gather configuration (from SQLite), rooms (from rooms.json), and bookings (from SQLite) into one JSON payload. Restores perform the inverse, pushing each dataset back into its native store to keep the JSON file and database synchronized.

The application shells out to the sqlite3 binary for data access. Ensure the executable is available on your PATH before launching the app. Administrators can override the binary location from the Admin → Configuration → Database section if it lives elsewhere on your machine. After updating the path, Bookly will automatically use the new location for all subsequent imports, exports, and server actions.

This project is licensed under the MIT License. See the LICENSE file for more details.