Workspace Reservation System SPA

A modern Single Page Application (SPA) designed to manage shared corporate workspaces, schedule meetings, and optimize office resources without scheduling conflicts.

---

Project Overview

This application simulates a real-world workspace reservation system where users can authenticate, navigate through protected routes, and manage booking data consumed from a simulated REST API.

Key Learning Objectives

• SPA Architecture: Building dynamic interfaces without page reloads.
• Authentication & Session Persistence: Managing secure user states via LocalStorage.
• Role-Based Access Control (RBAC): Restricting features based on user permissions.
• API Consumption: Simulating live database operations with a mock REST server.
• Modular Codebase: Structuring scalable, organized JavaScript files.

---

Problem Context & Roles

A company provides multiple shared environments such as Meeting Rooms, Private Offices, Coworking Spaces, and Auditoriums. To prevent schedule overlapping and improve organizational efficiency, this platform divides users into two distinct roles:

Administrator (admin)

• View and manage all reservations across the company.
• Create, edit, and delete any workspace reservation.
• Approve or reject pending reservation requests.
• Manage corporate workspaces (add, update, or remove rooms).
• Access administrative dashboards and metrics.

Standard User (user)

• Browse available workspaces and schedules.
• Create new reservations.
• View and track their personal reservations only.
• Modify their own pending reservations.
• Cancel their own active reservations.

---

Tech Stack

• Core: JavaScript (ES6+), HTML5, CSS3
• Bundler & Build Tool: Vite
• Styling Framework: TailwindCSS
• Mock Backend: JSON Server
• Process Manager: Concurrently

---

Project Structure

src
├── assets
├── components
│   └── Sidebar.js            # Shared navigation sidebar component
├── controllers
│   └── login.controller.js   # Login business logic and event handlers
├── router
│   └── router.js             # Client-side router and route guards
├── views
│   ├── loginView.js          # Authentication interface
    ├── usersView.js          # Users List interface
│   ├── homeView.js           # Main landing dashboard
│   └── notFound.js           # 404 Error page
├── utils.js                  # LocalStorage helpers and session state management
├── main.js                   # Application entry point
└── style.css                 # Global styles and Tailwind directives

Architectural Breakdown

• Components: Reusable UI elements. The Sidebar.js centralizes app navigation and dynamically updates depending on the user role.
• Controllers: Handles application logic, captures DOM events, validates forms, and interacts with the API layer.
• Views: Functional templates that return raw HTML strings injected dynamically into the main layout wrapper.
• Router: Intercepts navigation, updates URL states, evaluates route security guards, and renders the appropriate view or 404 screen.
• Utils: Core helper functions dedicated to saving, retrieving, and clearing session tokens.

---

⚡ Getting Started

1. Prerequisites

Ensure you have Node.js installed on your machine.

2. Installation

Clone the repository and install the development dependencies:

npm install

3. Running the Application

Launch both the Vite development server and the JSON Server database simultaneously using:

npm run dev

---

Configuration & Scripts

The project uses concurrently to orchestrate both front-end and back-end processes under a single terminal window.

"scripts": {
  "client": "vite",
  "server": "json-server --watch db.json --port 3000",
  "dev": "concurrently \"npm run client\" \"npm run server\""
}

Test Credentials

You can use the following mock accounts pre-configured in db.json to test role features:

Role	Email	Password
Admin	admin@test.com	123456
User	user@test.com	123456

---

Development Status

Included Core Features

• Fully functional login interface.
• REST API integration via JSON Server.
• Session persistence using LocalStorage.
• Global logout state management.
• Client-side SPA Router.
• Basic Route Guards (protecting private pages from unauthenticated guests).
• Pre-configured TailwindCSS layout.

🚧 Pending Implementation (Your Tasks)

Developers must build upon this foundation to deliver the following modules:

• Full CRUD capabilities for Reservations.
• Full CRUD capabilities for Workspaces.
• Advanced Route Guards and role validation triggers.
• Administrative Dashboard with data filters and search bars.
• Visual booking statistics and calendars.
• Real-time notifications or toast alerts for status updates.
• Strict corporate business rule validations (e.g., preventing double-booking).