Developing a Web App to Showcase Movies
Website
Overview
MyFlix is a dynamic web application built using Angular CLI version 14.2.3, showcasing a movie database powered by a REST API. The app allows users to securely register, log in, and update their profiles, with password hashing ensuring data security. It offers detailed movie information, including directors and genres, enhancing the user’s browsing experience.
Users can create and manage a personalized list of favorite movies, with features to easily add or remove titles. The intuitive interface is designed for smooth navigation, making it user-friendly across devices. MyFlix seamlessly integrates functionality and design to provide an engaging platform. It's the ideal app for discovering, exploring, and organizing your favorite films.
Role
Platform
Duration
Technology
Tools
Developer
Desktop
3 months
Angular, Angular CLI, Typedoc ,
Typescript, Angular-cli-ghpages
VS Code
The development process for the MyFlixAngularClient project involved several stages, starting with project planning and setup. The first step was defining the app's core functionality, which included allowing users to register, update/add information, and manage their favorite movies. For security, password hashing was implemented during the user registration and update process. Next, I chose Angular (TypeScript) as the main framework for building the client side of the application. Using the Angular CLI (version 14.2.3), I generated the initial structure of the app. To ensure responsiveness and a clean, modern interface, I implemented SCSS for styling and used HTML for the structure of the user interface.
The core feature of the app is interacting with a REST API that provides movie data. I integrated this API into the Angular app, allowing users to retrieve movie information and interact with their list of favorite movies, including adding and removing titles.
For user authentication, I implemented secure login and registration functionality using password hashing to protect user credentials. This involved integrating services to securely store and manage passwords.
During development, I used VS Code as the primary IDE, ensuring smooth integration and management of the project files. After implementing the core features, I performed testing and debugging to ensure smooth functionality, particularly focusing on the registration process, movie list management, and user interface. Once development was complete, I ran the app locally using npm start, which allowed me to test all features on localhost:4200. After making final tweaks, I ensured that all dependencies were correctly installed with npm install.
#Steps
Developing Process
#Steps
Next
Thoroughly test the current design to identify improvement areas.
Ensure the app is fully responsive and works seamlessly on different devices and screen sizes.
Optimize the user interface for usability, accessibility, and visual appeal.
Integrate with external APIs for features like movie trailers, cast details, or reviews.
#Learning
Takeaways
Getting familiar with the React library for building dynamic, component-based user interfaces. Exploring how to fetch and manage data from a REST API.
Practicing how to create responsive layouts that adapt across the website.
Improving debugging and troubleshooting techniques.
Gaining an understanding of how client-side and server-side components interact.
Learning the steps required to prepare and deploy a React app.