MyFlixAngularClient

Overview

MyFlix Angular Client is the frontend for the myFlix movie API. It’s built with Angular (standalone app, routing + SCSS) and includes:

• login/registration
• movie list & single movie view
• profile management.

---

Backend API

• Base URL: https://movie-api-w67x.onrender.com/
• Auth: JWT token returned by POST /login must be sent as Authorization: Bearer <token> for protected routes.

---

Handoff / Setup Manual

Prerequisites

• Node.js 18+ and npm
• Angular CLI:

npm install -g @angular/cli
Copy

Environment

API base URL is configured in src/environments/environment.ts (and environment.prod.ts):

export const environment = {
  production: false,
  apiBaseUrl: 'https://movie-api-w67x.onrender.com'
};
Copy

If your backend changes, update apiBaseUrl accordingly.

Install & Run

npm install
ng serve --open
Copy

App runs at http://localhost:4200/

Documentation

• TypeDoc output (after generation): ./docs/index.html
• GitHub Pages: https://claudias-hub.github.io/myFlix-Angular-client/

Generate docs:

npm run docs
Copy

then open:

docs/index.html

API Service (fetch-api-data.ts) :

Public:

• POST /users — userRegistration(userDetails)
• POST /login — userLogin(userDetails)

Protected (send Authorization: Bearer ):

• GET /movies — getAllMovies()
• GET /movies/:title — getMovieByTitle(title)
• GET /directors/:name — getDirectorByName(name)
• GET /genres/:name — getGenreByName(name)
• GET /users/:username — getUser(username)
• GET /users/:username/movies — getFavoriteMovies(username)
• POST /users/:username/movies/:movieId — addFavoriteMovie(username, movieId)
• PUT /users/:username — editUser(username, updateData)
• DELETE /users/:username — deleteUser(username)
• DELETE /users/:username/movies/:movieId — removeFavoriteMovie(username, movieId)

Notes

• Standalone Angular setup (no app.module.ts).
• HttpClient is provided in app.config.ts via provideHttpClient().
• Generated with Angular CLI 20.3.5

Scripts

• Development server:

ng serve
Copy

then open:

Open http://localhost:4200/.

• Building:

ng build
Copy

Build output in dist/.

• Code scaffolding:

ng generate component component-name
Copy

• For more schematics:

ng generate --help
Copy

Kanban board

GitHub Projects: https://github.com/users/claudias-hub/projects/1/views/1

Known Issues / TODO

• Improve error handling for auth failures (snackbars/messages).
• Add e2e tests when feature set stabilizes.

AI Use Declaration

Parts of this project’s documentation and code comments were drafted with assistance from an AI assistant (Abacus.AI ChatLLM Teams).