feat: add React frontend and README documentation

README.md

@@ -0,0 +1,74 @@
+# Media Tracker
+
+A full-stack application for tracking your favorite media, featuring a Spring Boot backend, PostgreSQL database, Redis cache, Kafka messaging, and a React frontend.
+
+## Architecture
+
+*   **Backend:** Spring Boot (Java 21) application.
+*   **Frontend:** React with TypeScript and Vite, styled using TailwindCSS.
+*   **Database:** PostgreSQL for persistent data storage.
+*   **Cache:** Redis for caching and temporary data.
+*   **Message Broker:** Kafka for event-driven messaging.
+
+## Prerequisites
+
+*   [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed.
+*   (Optional) Node.js and npm for running the frontend locally outside of Docker.
+*   (Optional) JDK 21 and Maven for running the backend locally outside of Docker.
+
+## Running the Application
+
+The entire application stack can be run easily using Docker Compose.
+
+1.  Make sure Docker is running on your machine.
+2.  From the root directory of the project, run:
+
+    ```bash
+    docker compose up --build
+    ```
+
+3.  The services will start on the following ports:
+    *   **Frontend:** http://localhost:5173
+    *   **Backend API:** http://localhost:8080
+    *   **PostgreSQL:** localhost:5432
+    *   **Redis:** localhost:6379
+    *   **Kafka:** localhost:9092
+
+4.  To stop the application, run:
+
+    ```bash
+    docker compose down
+    ```
+
+## Local Development
+
+### Frontend
+
+To run the frontend locally (useful for faster feedback during UI development):
+
+1.  Navigate to the `frontend` directory:
+    ```bash
+    cd frontend
+    ```
+2.  Install dependencies:
+    ```bash
+    npm install
+    ```
+3.  Start the development server:
+    ```bash
+    npm run dev
+    ```
+
+### Backend
+
+To run the backend locally, you still need the database, Redis, and Kafka running.
+
+1.  Start only the infrastructure services:
+    ```bash
+    docker compose up postgres redis kafka
+    ```
+2.  Navigate to the `backend` directory and run the Spring Boot app (requires Maven):
+    ```bash
+    cd backend
+    ./mvnw spring-boot:run
+    ```

compose.yaml

@@ -87,6 +87,19 @@ services:
       - media-network
     restart: unless-stopped
 
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: media-frontend
+    ports:
+      - "80:80"
+    depends_on:
+      - app
+    networks:
+      - media-network
+    restart: unless-stopped
+
 volumes:
   postgres_data:
   kafka_data:

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/.oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}

frontend/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:22-alpine as build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/README.md

@@ -0,0 +1,32 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>