📖 myFlix-Angular-client

The present repository is the client-side app generated with Angular that connects with a movie database: movie_api. Together they form CineFlix, a responsive single-page application allowing user to find information about movies and bookmark them in a personal list.

Objective

Using Angular, build the client-side of an app based on its existing server-side code (REST API and database).

Project Link

Link to CineFlix App: https://louloulinck.github.io/myFlix-Angular-Client/
Link to API: https://github.com/LoulouLinck/movie_api

🛠 Built With

Angular CLI version 16.2.10

Tech Stack

Client

• MongoDB (NoSQL database for storing movie and user data)
• Express (Backend framework for creating RESTful APIs and server-side functionalities)
• Angular (Frontend web framework for building the user interface and interactions)
• Node.js (backend JavaScript runtime for running the development server.)


• TypeScript (Superset of JavaScript used for developing Angular applications)
• Angular Material: UI component library providing pre-built, customizable UI elements.

Server

• MongoDB Atlas Database

Key Features

• Welcome View with Signup / Login options
• Allows users to add a movie to their list of favorites
• User profile view to:
  • Update user information
  • See their favorite movie list
  • Delete their account

• List of Movies (fetched from my own API)

• Movie Views displaying details on:

  • Director
  • Genre
  • Synopsis

Responsive Layout & Accessibility

The app was tested to suit a wide spectrum of devices and with accessibility in mind.

For a clean and usable design Bootstrap was implemented to the app. Thanks to this framework the layout of the library is set with optimal responsivity for a pleasant experience regardless of screen size.

💻 Getting Started

`npm install -g @angular/[email protected]`
Run ng new app-name to create a new app. Run ng generate component component-name to generate a new component.
Run `ng serve --open` to prompt Angular build the project and navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Open src/app/app.module.ts and add import { HttpClientModule } from '@angular/common/http';. The HttpClientModule is a simplified API for Angular applications that makes it possible for the client app to communicate with the API or server-side. After the import, add HttpClientModule in the @NgModule imports.

👥 Author

Laure Lincker

• GitHub: @LoulouLinck

This was a solo project guided by tutors and mentors from CareerFoundry.

back to top