📚 Library Booking SPA

📄 This README is also available in Spanish 🇪🇸

A simple and interactive Library Booking Single Page Application (SPA) built with vanilla JavaScript, HTML, and CSS. Users can register, log in, reserve books, and manage reservations. Librarians can add, edit, and delete books. Uses json-server as a mock backend.

---

🖼️ Preview

View of the SPA as a visitor (role: visitor).

---

🎯 Key Features

• User registration and login with role validation.
• Interface adapts to a user role (visitor or librarian).
• Book reservation with automatic stock updates.
• Cancel reservations.
• Full CRUD for books (librarians only).
• Global view of reservations with filters by book or user.

---

🚀 How to Run the Project

1. Clone the Repository

git clone https://github.com/your-username/library-booking-spa.git
cd library-booking-spa

2. Install Dependencies

npm install

3. Start the Simulated Backend (json-server)

npm run server

This will launch a JSON server at: http://localhost:3000

4. Start the Application

In another terminal, run:

npm run dev

This will start the SPA in development mode using Vite. Open your browser at: http://localhost:5173

---

🧭 How the App Works

1. Home Page

• Displays two buttons: Log In and Register.
• Direct navigation to protected routes is blocked if not logged in.

2. User Registration

• Anyone can register with:
  • Name
  • Email
  • Password
  • Role (visitor or librarian)
• The email must be unique.
• After registering, the session is saved and the user is redirected to the dashboard.

3. Login

• User must enter email and password.
• If credentials are valid, the user is redirected to the dashboard.

---

🖥️ Dashboard (Main Panel)

The content varies depending on the user role:

👤 Role: Visitor

• Available Books: lists all available books.
  • If a book has copies (available > 0) and hasn't been reserved by the user, it can be reserved.
  • When reserving:
    • The available count is decreased by 1.
    • The reservation is stored for the user.
• My Reservations: shows books reserved by the visitor.
  • Reservations can be canceled (increasing availability).

📚 Role: Librarian

• Book Catalog:
  • Lists all registered books.
  • Allows creation, editing, and deletion of books.
  • Deleting a book also removes its reservations.
• All Book Reservations:
  • Displays a grouped list of reservations by book.
  • Supports filtering by book title or user.
  • Each group shows the book and users who reserved it.

---

🧪 Test Credentials

Librarian

• Email: carlos@library.com
• Password: admin123

Visitor

• Email: ana@books.com
• Password: visitor123

---

🛠️ Technologies Used

• Vite for development tooling.
• Vanilla JavaScript (no frameworks).
• json-server for a mock backend.
• SweetAlert2 for interactive alerts.

---

📁 Project Structure

library-booking-spa/
├── public/                      # Public static files
├── src/                         # Main source code
│   ├── assets/                  # Static assets (e.g., images)
│   │   └── img/
│   ├── auth/                    # User login and registration
│   │   ├── login.js
│   │   └── register.js
│   ├── books/                   # Book management
│   │   ├── bookForm.js
│   │   └── bookList.js
│   ├── reservations/            # Reservation features
│   │   ├── myReservations.js
│   │   ├── reservationAdmin.js
│   │   └── reservationList.js
│   ├── router/                  # SPA routing system
│   │   └── router.js
│   ├── services/                # API functions
│   │   └── api.js
│   ├── utils/                   # Helpers (e.g., session management)
│   │   └── session.js
│   ├── views/                   # Main views
│   │   ├── dashboard.js
│   │   ├── home.js
│   │   └── notFound.js
│   ├── main.js                  # Main entry point
│   └── style.css                # Global styles
├── db.json                      # Mock database (json-server)
├── index.html                   # Main HTML file
├── .gitignore                   # Git ignored files
├── package.json                 # Project dependencies and scripts
├── package-lock.json            # Locked dependencies
├── README.md                    # This file
└── README.es.md                 # README in Spanish

---

⚙️ Prerequisites

• Node.js ≥ 18
• npm ≥ 9

---

📌 Additional Notes

• Session is stored in localStorage.
• Users can't reserve the same book more than once.

📝 License

This project is licensed under the MIT License.