Angular 21 frontend for the Neo4flix movie recommendation platform. Communicates with a Spring Boot microservices backend through an API gateway.
- Movie Discovery: Paginated grid of movies with high-quality posters and metadata.
- Advanced Search: Filter movies by title, genre, and release year range with real-time URL synchronization.
- Interactive Ratings: 5-star rating system with instant feedback (create, update, or delete your ratings).
- Secure Authentication: JWT-based auth with Login and Registration (rendered as modal overlays).
- Two-Factor Authentication (2FA): Support for TOTP (Google Authenticator, etc.) for enhanced account security.
- Optimized Images: LQIP (Low Quality Image Placeholder) blur-up effect for smooth poster loading.
- Dark/Light Mode: Full theme support with a dedicated toggle.
- Responsive Design: Mobile-first UI built with Tailwind CSS v4.
- Server-Side Rendering (SSR): Improved SEO and initial load performance using Angular SSR.
- Framework: Angular 21 (Standalone Components, Signals)
- Styling: Tailwind CSS v4
- State Management: Angular Signals for reactive, fine-grained state.
- Rendering: Angular SSR + Express 5.
- API Communication:
HttpClientwith functional interceptors for base URL prepending and JWT injection. - 2FA:
qrcodefor generating TOTP setup codes.
- Node.js 20+
- npm 10+
- Angular CLI 21:
npm install -g @angular/cli - The backend services running (see backend README)
git clone https://github.com/johneliud/neo4flix-frontend
cd neo4flix-frontend
npm installng serveOpens at http://localhost:4200. The app proxies all /api/* requests to the API gateway at http://localhost:8081.
src/app/core: Singleton services, guards, and interceptors.src/app/features: Domain-specific feature modules (auth, movies, search, settings).src/app/shared: Reusable UI components (rating, lazy-image, pagination, etc.).src/app/layouts: Shell layouts (MainLayout with header).
ng buildOutput goes to dist/neo4flix-frontend. The production build uses relative URLs — the reverse proxy handles routing to backend services.
# Unit tests
ng test
# End-to-end tests
ng e2eThe app uses src/environments/ to configure the API base URL:
| File | apiUrl |
Used for |
|---|---|---|
environment.ts |
http://localhost:8081 |
Local development |
environment.production.ts |
'' (relative) |
Production build |
No .env file is needed for the frontend. All secrets are on the backend.
The full backend stack (API gateway + microservices + Neo4j + PostgreSQL) is started with:
cd ../ # repo root
./start-services.shThis opens individual terminal windows for Docker Compose and each Spring Boot service.
docs/ARCHITECTURE.md— project structure, services, routing, components, design systemguide/ISSUES.md— milestone progress tracker