CUB Film Data (Angular) is an Angular application developed as part of CareerFoundry's Full-Stack Web Development Course. This project showcases proficiency in full-stack JavaScript development within the MERN stack.
The web app allows users to explore information about specific arthouse movies, directors, and genres. Users can create an account, update their personal information, or delete their account as needed.
To visit App, click here.
The objective of this project was to build a client-side Angular application to complement the existing server-side API, the databases and the business logic.
Client-Side Development:
The Angular framework was utilized for the client-side development of this application. The implementation involved defining routes for various endpoints and structuring code logic across different components, including the main view, navigation bar, movie view, login/signup view, movie card, profile view, and logout link.
- Users are greeted with a welcome view where they can log in or register an account
- Displays all movies from the database.
- Provides navigation to the profile view.
- Offers the option to log out.
- Includes a search feature for filtering the list of movies.
- Allows users to select a movie for detailed information.
- Presents additional movie details, including director information, genre details, and synopsis.
- Additional details are displayed via modals for a seamless user experience.
- Shows user registration details.
- Enables users to update their information (username, password, email, date of birth).
- Allows existing users to delete their profiles.
The development process for the Angular app was enjoyable and straightforward. Leveraging React concepts as a foundation facilitated a quicker grasp of the key Angular framework concepts, despite its steep learning curve.
I particularly appreciated the structured system and separation of services inherent in Angular. The component-based architecture and data-binding capabilities simplified development compared to the complexities of state handling and prop drilling in React.
In addition, I deepened my understanding of CSS/SCSS and the significance of consistent styling. Adopting a systematic approach to defining font sizes and spacing ratios using rem units enhanced design consistency across various media.
- Typescript
- Angular Cli
- MongoDB
- Express
- HTML
- SCSS
- JavaScript
Prior to implementation, user stories were created to visualize necessary interfaces and routes, aiding in the understanding of required operations and serving as a visualization tool for stakeholders.
User Story 2: As a user, I want to be able to create a profile so I can see data about my favorite movies.
User Story 3: As a user, I want to be able to receive information on movies, directors, and genres so that I can learn more about movies I’ve watched or am interested in.
