feat: add React frontend and README documentation - #1
Conversation
- Create a new React + TypeScript application in the `frontend` directory using Vite. - Install and configure TailwindCSS for styling. - Create a basic "Media Tracker" landing page. - Add a multi-stage Dockerfile for the frontend to build the app and serve it using Nginx. - Update `compose.yaml` to include the new `frontend` service, exposing it on port 80. - Create a comprehensive root `README.md` explaining the application architecture, prerequisites, and instructions for running the app using Docker Compose or locally. Co-authored-by: m24ih <38833884+m24ih@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
This PR introduces an initial React/Vite/TypeScript frontend for MediaTracker (with TailwindCSS styling) and adds Docker Compose + README documentation so the full stack can be run more easily.
Changes:
- Added a new
frontend/Vite + React + TypeScript app with TailwindCSS and a basic landing page. - Added a frontend multi-stage Docker build that serves the built static assets via Nginx.
- Added root-level documentation and updated
compose.yamlto include the newfrontendservice.
Reviewed changes
Copilot reviewed 17 out of 24 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| README.md | Adds root documentation for architecture and run instructions (Docker + local dev). |
| compose.yaml | Adds a frontend service to the existing Compose stack. |
| frontend/Dockerfile | Builds the Vite app in a Node stage and serves dist/ via Nginx. |
| frontend/README.md | Template README for the Vite/React scaffold. |
| frontend/index.html | Vite HTML entrypoint for mounting the React app. |
| frontend/package.json | Frontend scripts and dependencies (React/Vite/Tailwind/TS). |
| frontend/package-lock.json | Lockfile for deterministic frontend dependency installs. |
| frontend/vite.config.ts | Vite configuration enabling the React plugin. |
| frontend/tsconfig.json | TS project references for app + node configs. |
| frontend/tsconfig.app.json | TS config for the browser app build. |
| frontend/tsconfig.node.json | TS config for node-side tooling (e.g., Vite config). |
| frontend/tailwind.config.js | Tailwind content scanning and theme configuration. |
| frontend/postcss.config.js | PostCSS config wiring Tailwind + autoprefixer. |
| frontend/.oxlintrc.json | Oxlint rules configuration for React + TypeScript. |
| frontend/.gitignore | Frontend-specific ignores (node_modules, dist, editor files). |
| frontend/.gitkeep | Placeholder file. |
| frontend/src/main.tsx | React entrypoint creating the root and rendering App. |
| frontend/src/App.tsx | Basic landing page component scaffolded as a starting UI. |
| frontend/src/index.css | Tailwind directives for base/components/utilities layers. |
| frontend/src/assets/react.svg | Scaffolded React logo asset. |
| frontend/src/assets/vite.svg | Scaffolded Vite logo asset. |
| frontend/public/favicon.svg | Frontend favicon asset. |
| frontend/public/icons.svg | SVG sprite sheet for icons used by the frontend. |
Files not reviewed (1)
- frontend/package-lock.json: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 3. The services will start on the following ports: | ||
| * **Frontend:** http://localhost:5173 | ||
| * **Backend API:** http://localhost:8080 |
| 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): |
| FROM node:22-alpine as build | ||
| WORKDIR /app | ||
| COPY package*.json ./ | ||
| RUN npm install |
| <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> |
This PR introduces a new frontend application for the Media Tracker project and provides necessary documentation.
Key Changes:
frontenddirectory using Vite and TypeScript.App.tsxto serve as a starting point.Dockerfilehas been added to build the frontend and serve it with Nginx. Thecompose.yamlhas been updated to include thefrontendservice, making the entire stack runnable with a single command.README.mdhas been added, detailing the system architecture (Spring Boot backend, PostgreSQL, Redis, Kafka, React frontend) and providing clear instructions on how to start the application using Docker Compose and how to run services locally for development.PR created automatically by Jules for task 7007728299916976299 started by @m24ih