SitMe Frontend

SitMe Frontend is a web application built with Next.js 14 and TypeScript.
It provides the user interface for SitMe, a room and table reservation system for corporate environments.

The frontend communicates with the SitMe Backend API to handle authentication, reservations, and space management.

---

Table of Contents

• Features
• Tech Stack
• Prerequisites
• Getting Started
• Environment Variables
• Project Structure
• Available Scripts
• Backend Integration
• Team
• License
• Support

---

Features

• Home page with branding and CTAs.
• Spaces: list and detail pages for rooms and tables.
• Login with JWT (session persisted via cookies).
• Reservations:
  • Users can create reservations for a selected space.
  • Admin-only listing of all reservations.
• Role-based UI (visibility based on USER or ADMIN).
• Route Handlers under app/api/* acting as a thin proxy to the backend.
• Responsive UI built with Tailwind CSS.

---

Tech Stack

• Next.js (App Router)
• React + TypeScript
• Tailwind CSS
• JWT (issued by backend, stored in cookie)
• Node.js (for local development)
• Docker (optional)

---

Prerequisites

• Node.js ≥ 18 (LTS recommended)
• npm or yarn
• Running instance of the SitMe Backend (Spring Boot) or a reachable backend URL

---

Getting Started

Clone the repository:

git clone https://github.com/femcoders-sitme/sitme-frontend.git
cd sitme-frontend

Install dependencies:

npm install
# or
yarn install

Start the development server:

npm run dev

Open http://localhost:3000 with your browser.

---

Environment Variables

Create a .env.local file at the project root:

NEXT_PUBLIC_BACKEND_API_URL=http://localhost:8080
JWT_COOKIE_NAME=pt_jwt

NEXT_PUBLIC_BACKEND_API_URL — URL of the SitMe backend (must be prefixed with NEXT_PUBLIC_ to be available on the client).

JWT_COOKIE_NAME — Name of the cookie where the JWT is stored (used by route handlers and hooks).

Note: In production, set these values in your hosting provider’s environment settings.

---

Project Structure

src/
 ├─ app/
 │   ├─ api/
 │   │   ├─ auth/
 │   │   │   ├─ login/route.ts     # POST login
 │   │   │   ├─ logout/route.ts    # POST logout (clear cookie)
 │   │   │   └─ logout/route.ts    # POST register
 │   │   │  reservations/route.ts  # GET/POST reservations
 │   │   └─ spaces/route.ts        # GET/POST spaces
 │   ├─ login/page.tsx             # Login page
 │   ├─ my-reservations/page.tsx   # User reservations page
 │   ├─ profile/page.tsx           # User profile page
 │   ├─ register/page.tsx          # Register page
 │   ├─ reservations/page.tsx      # Admin-only reservations page
 │   ├─ spaces/                    # Spaces
 │   │   │  id/page.ts             # GET space by id
 │   │   │   └─ edit/page.tsx      # UPDATE space
 │   │   │  create/route.ts        # POST space
 │   │   └─ page.tsx               # GET spaces
 │   └─ page.tsx                   # Home page
 ├─ components/
 │   └─ Header.tsx                 # Shared header / nav
 ├─ context/
 │   └─ AuthContext.tsx            # Auth Context for the app
 ├─ hooks/
 │   └─ useAuth.ts                 # Auth state & helpers
 └─ styles/                        # Global styles (Tailwind)

---

Available Scripts

npm run dev       # Start development server
npm run build     # Create production build
npm run start     # Start production server (after build)
npm run lint      # Run linter

---

Backend Integration

The frontend communicates with the SitMe backend (Spring Boot + MySQL). Typical endpoints consumed:

# Authentication
POST   /api/auth/login           # Authenticate and receive JWT
POST   /api/auth/logout          # Clear the session cookie
GET    /api/auth/me              # Retrieve current logged-in user info

# Users (ADMIN only)
GET    /api/users                # Fetch all registered users
DELETE /api/users/{username}     # Delete a user by username
PUT    /api/users/{username}/image  # Update user profile image (Cloudinary upload)

# Spaces
GET    /api/spaces               # Fetch available spaces
GET    /api/spaces/{id}          # Fetch details of a specific space

# Reservations
POST   /api/reservations         # Create a reservation
GET    /api/reservations         # List all reservations (ADMIN only)
DELETE /api/reservations/{id}    # Cancel a reservation (allowed for the owner or ADMIN)

# Base URL
${NEXT_PUBLIC_BACKEND_API_URL}

Route Handlers (under app/api/*) forward requests to the backend and attach the Authorization: Bearer header when a JWT cookie exists.

---

Team

• Débora Rubio – Team Leader and Scrum Master and Developer
• Lara Pla – Product Owner and Developer
• Mariia Sycheva – Developer
• Mayleris Echezuria – Developer
• Vita Poperechna – Developer
• Saba Ur Rehman – Developer

---

License

This project is part of a learning bootcamp and is intended for educational purposes.

---

Support

For questions or issues, please create an issue in the repository or contact the development team.

---

Built with 💜 using Next.js