Application Design 2 / Final Project - Completed App
on
Get link
Facebook
X
Pinterest
Email
Other Apps
7th July 2025 - 27th July 2025 (Week 12 - Week 14)
Sin Jun Ming 0364638
Application Design 2 / Bachelor of Design in Creative Media / Taylor's University
Final Project - Completed App
Instructions
Final Project - Completed App
Students will synthesise the knowledge gained in Task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.
Requirements:
Presentation video uploaded to YouTube
Online posts in your E-portfolio as your reflective studies
A. Previous Progress in Flutterflow
In Task 3, I focused on building the structural foundation of the Encode app using FlutterFlow. At that point, I had already designed and implemented several core screens including the Sign Up, Login, Homepage etc. The navigation flow was functional, allowing users to create an account, log in, and land on the homepage.
Fig 1.1 Animation Overview of Splash Screen
Fig 1.2 Home Page Overview
Fig 1.3 Lesson Flow
Fig 1.4 Challenge Flow
Fig 1.5 Progress Tracking Flow
B. Modification of App Development in Flutterflow
Building on the progress made in the earlier stages, I continued refining and expanding the Encode app in FlutterFlow to move closer to a complete and functional product. In addition to these refinements, I also focused on completing the app by developing two new core sections: the Community Page and the Profile Page.
1. Home Page
The Encode app’s homepage was refined to offer a more personalized user experience. Previously, the welcome message was hardcoded as “Welcome, Jun Ming”. After integrating Firebase Authentication and Firestore, the app now stores each user’s username during sign-up and retrieves it dynamically on login, displaying a personalized message like “Welcome, [username]”.
Fig 2.1 Welcome Message Modification
2. Community Page
Animations of fade-in and slide-up on page load were added to make the page feel smooth and responsive.
Fig 3.1 Community Page Load Animation
I enhanced the structure by using FlutterFlow’s Tab Bar feature to combine both the "Discussion" and "Leaderboard" into a single, seamless screen.
Fig 3.2 Tab Bar on Community Page
In the "Discussion" section, forum cards can be clicked to view questions by other users and view replies to figure out solution on certain questions. User can also create a new post by clicking "+" button on bottom right corner to get help from other users on the app.
Fig 3.3 Full Features on "Discussion" Section
3. Profile Page
Animations of fade-in and slide-up on page load were added to make the page feel smooth and responsive.
Fig 4.1 Profile Page Load Animation
Username in profile page is determined by the "username" user entered when signing up and it's stored in Firebase Firestore.
Fig 4.2 "Username" Variable in Firebase
Users are able to return back to recent learning by clicking "Continue" on "Latest Learn" section. ">" button on "Achievement Badges" section can be clicked to view all badges earned by user and user can choose to share them through social medias.
Finally, I’ve completed the Encode app. Looking it back, it took a lot of effort, time, and trial and error to reach this stage. From setting up the basic screens to refining dynamic features using Firebase, and building full pages from Home Page to Profile Page, every part of the process came with its own challenges. There were moments where things didn’t work as expected, especially when connecting backend data to UI elements, but pushing through those issues taught me a lot about both FlutterFlow and app development in general.
I’m really glad to see everything come together in the end. The animations, personalized elements, and smooth navigation have made the app feel complete and functional. Completing this project has given me a real sense of accomplishment, and I’m proud of the progress I’ve made since the beginning. This experience not only helped improve my technical skills, but also taught me patience, problem-solving, and how much detail goes into building a fully working app.
Comments
Post a Comment