MyFlix Client (Angular)
This is a single-page, responsive movie app developed using Angular with routing and several interface views that provide users with access to information about movies, directors, and genres using myFlix API.
Purpose & Context
myFlix was done as part of Careerfoundry coursework to demonstrate my mastery of full-stack JavaScript development.
Duration
The complete project was done in 3 weeks. Most of the time was spent on understanding the Angular framework, as I did not use this framework in any of the earlier work.
myFlix API Details
myFlix is a custom API that contains details about movies and their genre, director, and other details.
​​​
myFlix server github repo: https://github.com/pshegde123/cf_myflix_server
Tech Stack
-
Front-end: TypeScript, Angular, Angular-Material, GitHub-Pages, TypeDoc
-
Backend: NodeJs,Express, MongoDB, Postman, JSDoc
Server Side
The server side consists of a well-designed REST API and an architected database built using JavaScript, Node.js, Express, and MongoDB.
The REST API will be accessed via HTTP methods like GET and POST.
​
Similar methods (CRUD) will be used to retrieve data from the database and store that data in a non-relational way.
To test the app, I used Postman. I also included the basic HTTP authentication and JWT (token-based) authentication.
GET query results on Postman
Client Side
After completing the server API, I built the interface users would need to interact with the server side.
​
It is a single-page, responsive application, developed with Angular and the Angular-Material framework.
The app provides several interface views, including a login view, a registration view, an all movies view, and a profile view (where users can update their user data and list of favorites). Page routing in the app is handled using Angular Router.
Page Views
Login View
All Movies View
Signup View
Director dialog box
Genre Dialog Box
Movie details dialog box
User profile view
Retrospection
The Angular framework was very new for me. I spent most of my time understanding the Angular framework, its built-in functionalities, data flow structure, and routing.
​
Following Material design was also a new experience. It is a complex world, but at its basics, also surprisingly efficient and straightforward. I was expecting to get a similar user flow as in the React app, but the AngularJS workflow automatically led me to create a much easier and more efficient result.
​
I found Stack Overflow threads to be a big help in resolving errors and understanding some basic concepts.
​
Angular’s straightforward workflow and clear, organized structure are very helpful when building and maintaining a complex app, but I feel that for small apps like myFlix, all the features of the framework may not be utilized, and using React will be an easier option.
Credits​
​
Developer: Pradnya Hegde , Tutor : Jay Quach , Mentor: Alfredo Velez