Application Design II ｜Compilation and Reflection
23 Apr 2026 - 12 July 2026 (Week 1 - Week 14 )
Application Design II | Bachelor of Design (Honours) in Creative Media
Application Design II | Bachelor of Design (Honours) in Creative Media
Chan Xiang Lam | 0358400
Compilation and Reflection
TABLE CONTENT
1. Module Information Booklet (MIB)
2. Task 1 - Task 3
3. Task 4 | Final Application
4. Reflection
Module Information Booklet (MIB)
Task 1 - Task 3
Task 4 | Final Application and E-Portfolio
Introduction
This blog documents the development of the MANGO Fashion Shopping
App, created using FlutterFlow with Firebase Authentication and
Firebase Firestore. It highlights the application's key features,
development process, implementation, and final outcome.
Project Overview
MANGO is a fashion shopping application that provides users with
a simple and personalised shopping experience. Users can browse
products, save favourite items, manage shopping notes, and add
products to the shopping cart.
Core Features
The application includes four main features:
1. User Authentication –
Secure sign up and login using Firebase Authentication.
2. Preference Setup – Save users' fashion
preferences during onboarding.
3. Wishlist – Add, edit notes,
and remove favourite products.
4. Shopping Cart – Select sizes
and manage products before checkout.
Animation Implementation
Micro and macro animations were added to improve user interaction and navigation. These include loading animations, page transitions, form validation, wishlist interactions, and Snackbar notifications.
Micro and macro animations were added to improve user interaction and navigation. These include loading animations, page transitions, form validation, wishlist interactions, and Snackbar notifications.
Firebase Integration
Firebase Authentication manages user accounts, while
Firebase Firestore stores user preferences, wishlist
items, shopping cart information, and product data
with real-time synchronisation.
Challenges & Solutions
During development, several issues were encountered,
including Wishlist icon updates, Firebase data
synchronisation, and workflow configuration. These problems
were resolved through testing, debugging, and improving the
application logic.
Final Outcome
The final application successfully integrates FlutterFlow
with Firebase to provide a functional fashion shopping
experience. The project strengthened my understanding of
mobile application development, database integration, and
user interface design.
Canva Presentation Slide
Presentation Video
Reflection
This assignment provided me with valuable experience in developing a
mobile application using FlutterFlow and Firebase. Throughout the
development process, I improved my understanding of user
authentication, database integration, application workflows, and
interactive animations.
Although I encountered several challenges, such as configuring
workflows and synchronising data with Firebase, I was able to solve
them through testing and debugging. These experiences strengthened
my problem-solving skills and helped me better understand the
application development process.
Overall, this project enhanced both my technical knowledge and
design skills. It has increased my confidence in creating functional
and user-friendly mobile applications, and the experience gained
will be useful for my future studies and career.
Comments
Post a Comment