myMovies App (Angular)
Case Study
Introduction
myMovies Angular was a project to have a first glance into Angular.
The app has similar functions to those in the React project: information
about movies, directors, and genres.
Users can create a profile, update their data, and collect their favorite movies.
The project involved using a RESTful API and the database that was created for the React project
and building the client-side using Angular and Angular Material.
myMovies App in use
Objective
The aim of the project was build a web application using full-stack JavaScript technologies to
showcase for my portfolio.
The problem to be solved was building the client-side with Angular.
This was to be achieved by rebuilding the React application to have a comparison.
My goal was also to stay close to the UI of the other app to learn how to manipulate the
elements of Angular Material.
Screenshot of finished app (main view with movie list)
Context
The myMovies application was part of the web development course at CareerFoundry to build skills
in Angular, connecting to a self created API, and implement Angular Material for the UI.
The project brief described the features and the requirements accurately and the exercises were
structured to follow this guideline.
Project brief Careerfoundry (source: Careerfoundry)
Approach
To build an app that serves movie fans with information, there had to be the client-side, that has the user interface to enable movie fans to interact with all the information.
Creating the endpoints in the API
1. Step: Create the components
The components were created automatically using the following command in the cli:
ng generate component
2. Step: Create the User Interface
For the user interface, Angular Material was used.
I've removed some flags for buttons and form elments,
to experiment and understand how things work and how
elements can be customized.
Main view with movie list
During work on the login modal
Working on the login modal: the updated style
Modal with details about movie director
Welcome view with movie list