The client side of the myFlix app using Angular that's using the server-side movie_api (REST API and Database).
myFlix is a full-stack (MEAN: MongoDB, Express, Angular, Node.js) single-page web application that serves as a movie database. Users can browse a curated list of movies with detailed information including descriptions, directors, and genre details. Registered users can create a profile, manage their account, and add movies to their favorites and watch lists.
This project was generated with Angular CLI version 18.2.9.
- Welcome to the myFlix Client (Angular)
- Your app should display a welcome view where users will be able to either log in or register an account.
- Once authenticated, the user should now view all movies.
- Upon clicking on a particular movie, users will be taken to a single movie view, where
additional movie details will be displayed. The single movie view will contain the following
additional features:
- A button that when clicked takes a user to the director view, where details about the director of that particular movie will be displayed.
- A button that when clicked takes a user to the genre view, where details about that particular genre of the movie will be displayed.
-
Test account:
Username: testportfolio Password: 12345678
The project technical requirements include:
- The application must be written in Angular (version 9 or later)
- The application requires the latest version of Node.js and npm package
- The application must contain user registration and login forms
- The application must be designed using Angular Material
- The application's codebase must contain comments using Typedoc
- The project must contain technical documentation using JSDoc
- The project must be hosted on GitHub Pages
- Node.js (version 14.0.0 or higher)
- npm (version 6.0.0 or higher)
- Clone the repository:
git clone https://github.com/eahowell/myFlix-Angular-client.git cd myFlix-Angular-client - Install dependencies:
npm install
- Start the development server:
ng serve
- Open your browser and navigate to http://localhost:4200 (or the port specified in your terminal)
- @angular/animations: ^18.2.0
- @angular/cdk: ^18.2.12
- @angular/common: ^18.2.0
- @angular/compiler: ^18.2.0
- @angular/core: ^18.2.0
- @angular/forms: ^18.2.0",
- @angular/material: ^18.2.12
- @angular/material-moment-adapter: ^18.2.13
- @angular/platform-browser: ^18.2.0
- @angular/platform-browser-dynamic: ^18.2.0
- @angular/platform-server: ^18.2.0
- @angular/router: ^18.2.0
- @angular/ssr: ^18.2.9
- express: ^4.18.2
- moment: ^2.30.1
- ng: ^0.0.0
- rxjs: ~7.8.0
- tslib: ^2.3.0
- zone.js: ~0.14.10
- @angular-devkit/build-angular: ^18.2.9
- @angular/cli: ^18.2.9
- @angular/compiler-cli: ^18.2.0
- @types/express: ^4.17.17
- @types/jasmine: ~5.1.0
- @types/node: ^18.18.0
- angular-cli-ghpages: ^2.0.3
- jasmine-core: ~5.2.0
- json-to-scss: ^1.6.2
- karma: ~6.4.0
- karma-chrome-launcher: ~3.2.0
- karma-coverage: ~2.2.0
- karma-jasmine: ~5.1.0
- karma-jasmine-html-reporter: ~2.1.0
- sass: ^1.80.6
- typedoc: ^0.27.4
- typescript: ~5.5.2
|
Users can access information about movies, directors, and genres.
|
Users can create a profile to save data about their favorite movies
|
- Home: Browse all movies
- Sign Up: Create an account
- Login: Access profile
- Movie Details: View full info
- Profile: Manage favorites & to-watch list
| Command | Description |
|---|---|
ng serve |
Starts dev server |
ng build |
Creates a production bundle in dist/ |
ng test |
Executes the unit tests with Karma |
ng deploy |
Deploys the app |
- Run
ng servefor a dev server. - Navigate to
http://localhost:4200/. - The application will automatically reload if you change any of the source files.
Note: Seeing movies and creating favorites require login, you can sign up and create a profile or you can use the test profile:
Username: testportfolio
Password: 12345678- Run
ng generate component component-nameto generate a new component. - You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module.
- Run
ng buildto build the project. - The build artifacts will be stored in the
dist/directory.
- Run
ng testto execute the unit tests via Karma.
- Run
ng e2eto execute the end-to-end tests via a platform of your choice. - To use this command, you need to first add a package that implements end-to-end testing capabilities.
- To get more help on the Angular CLI use
ng helpor go check out the Angular CLI Overview and Command Reference page.
The client communicates with the myFlix API hosted on Heroku. Key endpoints include:
-
GET/moviesRetrieve all movies -
GET/movies/:movieIdGet a specific movie by ID -
GET/users/:UsernameGet user information -
POST/usersRegister a new user -
PUT/users/:UsernameUpdate user information -
PUT/users/:Username/favorites/:MovieIDAdd a movie to favorites -
DELETE/users/:Username/favorites/:MovieIDRemove a movie from favorites -
PUT/users/:Username/toWatch/:MovieIDAdd a movie to watch list -
DELETE/users/:Username/toWatch/:MovieIDRemove a movie from watch list
For a complete list of endpoints and documentation, visit the API Repository.
JWTs are stored in localStorage.
Send as header:
Authorization: Bearer <token>
myFlix-Angular-client/
├── e2e/
│ ├── src/
│ └── protractor.conf.js
├── node_modules/
├── public/
│ ├── myFlixLogo-brand.png
│ └── wireflow.png
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── movie-card/
│ │ │ │ ├── movie-card.component.ts
│ │ │ │ ├── movie-card.component.html
│ │ │ │ └── movie-card.component.scss
│ │ │ ├── movie-view/
│ │ │ ├── director-view/
│ │ │ └── genre-view/
│ │ ├── services/
│ │ │ └── fetch-api-data.service.ts
│ │ ├── models/
│ │ │ └── movie.ts
│ │ ├── app-routing.module.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets/
│ ├── environments/
│ │ ├── environment.ts
│ │ └── environment.prod.ts
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.scss
│ └── test.ts
├── .gitignore
├── angular.json
├── karma.conf.js
├── package.json
├── tsconfig.json
└── README.md
- myFlixDB is stored in MongoDB
- Collections include:
- Users
- Movies
- Genres
- Directors
- Actors
- Fork the repo
- Create a feature branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m "Add some feature" - Push to branch:
git push origin feature/your-feature-name - Open a pull request
- API uses ISC
- Angular uses MIT https://angular.dev/license
- RxJS uses Apache-2.0 http://www.apache.org/licenses/
- tslib uses 0BSD
Developer: Elizabeth Howell
Website: Portfolio
Twitter: ehowell_webdev
GitHub: eahowell
Thank you for checking out myFlix! This application was developed as part of the Career Foundry Full-Stack Web Development Course to demonstrate skills in full-stack development, RESTful API design, authentication, and dynamic frontend rendering.