View Demo

Overview

The My-flixx Angular application is a single-page, responsive web app developed to interface with the existing My-flixx server-side code. It provides a dynamic user experience for movie enthusiasts to access and interact with a wide range of movie information, including details about movies, directors, and genres.

Purpose and Context

In an evolving remote work environment, effective communication and collaboration are key. This project, developed using Angular, focuses on building the client-side interface for My-flixx, complementing the server-side developed earlier. It emphasizes the importance of creating detailed documentation and handoff deliverables for seamless collaboration among developers and designers.

Objectives

The primary goal was to develop a user-friendly client-side application for My-flixx that allows users to interact with the movie database. Key goals included enabling users to view movie details, register, manage their profiles, and save favorite movies, all supported by comprehensive documentation.

Process:

Client-Side Development:

The application was developed using Angular (version 9 or later), with Angular Material for design. It features user registration and login forms, and a variety of interface views for displaying movie information.

Technologies used:

html5

javascript

typescript

angular

parcel

sass

Feel free to look at the source code in the Github’s Repository .

Key Functionalities and Views:

Welcome view for user login or registration. Main view displaying all movies. Single Movie view with additional movie details and features for director and genre information. Documentation using Typedoc and JSDoc.

Technical Requirements:

Written in Angular (version 9 or later). Latest version of Node.js and npm package. User registration and login functionality. Design using Angular Material. Hosting on GitHub Pages.

Retrospective:

Developing the My-flixx client-side application in Angular highlighted the framework’s suitability for large projects and complex interfaces. Challenges included ensuring a responsive design and integrating various API endpoints efficiently.

Challenges

Integrating client-side views with the server-side API and maintaining a responsive design across different devices were significant challenges.

Successes

Successfully creating a functional and engaging user interface that interacts seamlessly with the server-side API was a major accomplishment, demonstrating skills in client-side development with Angular.

Future Steps

Future enhancements include adding more interactive features, such as social sharing and advanced movie filtering options, to enhance user engagement.

Final Thoughts

Building the client-side of My-flixx was a rewarding experience that enhanced my skills in Angular and client-side development, further solidifying my capabilities in full-stack JavaScript development.