Case Study

Studio Ghibli Movie App (Angular Version)

Main Dispaly of the Studio Ghibli Movie App

Setting the Stage

Overview

The Studio Ghibli Movie App (Angular Version) is a vibrant, user-friendly web application designed to celebrate the rich filmography of Studio Ghibli. It serves as a digital platform where fans can explore, interact, and engage with their favorite Studio Ghibli movies.

Purpose & Context

The project was initiated to address the lack of specialized platforms for Studio Ghibli enthusiasts. It was developed as part of my academic coursework, with guidance from instructors, yet aimed at achieving professional standards akin to industry-level applications.

Image of the Studio Ghibli Movie App
Image of the Studio Ghibli Movie App Favorites List

Objective

The primary objective was to create an intuitive, responsive, and comprehensive application that enhances the movie browsing experience for Studio Ghibli fans, with features like movie favoriting and profile customization.

Duration

The development of the app spanned over a period of two months, adhering closely to the project timeline with efficient planning and execution.

Credits

As the sole developer, I was responsible for the entire project lifecycle, from conception to deployment, with valuable inputs from my academic mentor and tutor.

Tools, Skills, and Methodologies

The project utilized Angular (v16.2.0), TypeScript, and various Angular-specific tools like Animations, CDK, and Material. My skills in front-end development, particularly in Angular, were significantly enhanced during this project.

VSCode Display

The Development Process

Wireframing Example

Conceptualization and Planning

  1. Importance: Establishing a clear vision for the application.
  2. Goal: To create a detailed plan that aligns with the project's objectives.
  3. Skills/Tools Used: Wireframing, Angular CLI.
  4. Challenges and Decisions: Choosing the right features and design that resonate with Studio Ghibli's theme.

API Development and Integration

  1. Importance: Essential for dynamic data handling and user interaction.
  2. Goal: Seamless integration of user and movie data.
  3. Skills/Tools Used: Angular Services, Custom API development.
  4. Challenges and Decisions: Implementing efficient data retrieval and storage mechanisms.
Postman Query Example
Image of the Studio Ghibli Movie App User Interface

User Interface Design

  1. Importance: Ensuring an engaging and accessible user experience.
  2. Goal: Create an intuitive and visually appealing interface.
  3. Skills/Tools Used: Angular Material, Responsive Design Techniques.
  4. Challenges and Decisions: Designing a layout that is both aesthetic and functional across devices.

Testing and Refinement

  1. Importance: Guaranteeing application reliability and performance.
  2. Goal: Identify and fix bugs, enhance user experience.
  3. Skills/Tools Used: Karma for unit testing, End-to-End testing with Angular.
  4. Challenges and Decisions: Balancing thorough testing with project timeline constraints.
Image of the 'Scripts' Section of the App

Reflection & Future Directions

Wireframe to Completed App

Objective vs. Final Results

The project successfully met its objectives, delivering a highly responsive and feature-rich application that offers a unique platform for Studio Ghibli fans.

Endpoint Code Examples

Most Challenging Aspect

The integration of a custom API posed a significant challenge, requiring meticulous planning and execution to ensure smooth data handling.

Trello Board Example

Future Improvements

In future iterations, I plan to incorporate user feedback features, such as movie ratings and reviews, and expand the movie database to include more in-depth information

See the code on GitHub See the live site
Return to Portfolio