Application Design II - Final Project: Completed App
15.12.2024 - 07.01.2025 / Week 13 - Week 15
Lim Rui Ying / 0358986
Application Design II / Bachelor of Design (Hons) in Creative Media
Final Project Interactive Component Design & Development
INSTRUCTIONS
Final Project: Completed App
This is the final stage of the application project where we are required to completely render the task flow of the app to be functional.
Process
Since this task continued from Task 3, I continued the remaining coding
process. Please refer to the
Task 3 post for details on the earlier progress.
Completed components:
- Splash Screen & Start Page: Logo animation
- Home Page: Calories intake overview (progress bar animations) and water intake (droplet fill animation)
- Sidebar: Slide in/out animation and logout confirmation popup
- Quick Log Menu: Slide in/out animation
- Food Log Panel: Slide up/down animation
1) Food Log Panel
The Food Log Panel includes a food database that allows users to search for
foods they have eaten. It also displays saved and recently logged food
items.
 |
| Fig. 1.1 Food Log Panel - Recent and saved food items |
In the previous task, I created the animation for switching between the recent and saved tabs. I then added the list of food items to the panel using JavaScript for content and structure, minimising lengthy HTML code. Next, I developed animations for the food items, controlled by tapping the tabs. Above is the outcome. The outcome is shown above.
 |
| Fig. 1.2 Food Log Panel - Food items, JavaScript |
 |
| Fig. 1.3 Food Log Panel - Tab switching animation, JavaScript |
2) Food Item Page
The Food Item Page displays detailed information about a food item,
including its ingredients and nutrition facts. This page allows users to
specify the serving portion they have consumed. Additionally, a save button
is provided for users to save the food item.
Save Button
When the save button is tapped, a pop-up notification appears, confirming
that the food item has been saved.
|
| Fig. 2.1 Food Item Page - Save button animation |
I used SVG codes for the save button and modified its fill colour and size to create the pop-up effect when saving the food item.
 |
| Fig. 2.2 Food Item Page - Save button animation, JavaScript |
Serving Portion Input
The page includes an input field for the serving portion where users are
required to enter the quantity and select the serving unit.
|
| Fig. 2.3 Food Item Page - Serving portion input |
The serving portion input utilizes <input> and <select> tags for the quantity and unit fields respectively. Meanwhile, the Nutrition Facts section is managed using JavaScript for its content and structure.
 |
| Fig. 2.4 Food Item Page, HTML |
 |
| Fig. 2.5 Food Item Page - Nutrition facts section, JavaScript |
3) Confirmation Page
The Confirmation Page notifies users that a food item has been successfully added to their meal. It features a checkmark at the center, with the added food item displayed below.
|
| Fig. 3.1 Confirmation Page |
The checkmark animation is imported using Lottie Files assets.
 |
| Fig. 3.2 Confirmation Page - Checkmark animation, Lottie Files |
 |
| Fig. 3.3 Confirmation Page, HTML |
The description text, "Fried Rice has been added to your lunch" dynamically displays the food name based on the user's input. For example, on the Food Log Panel, users can tap the add button to quickly add a pre-saved food item such as "Grilled Chicken Salad", and the corresponding food name will be shown in the description text on the Confirmation Page. This is executed using sessionStorage in JavaScript to store the food name and display it on the Confirmation Page.
 |
| Fig. 3.4 Quick add food item |
 |
| Fig. 3.5 Confirmation Page - Session storage, JavaScript |
 |
| Fig. 3.6 Food Log Panel - Session storage, JavaScript |
4) Page Transitions
Page transitions, such as fade and slide in/out effects, are used to ensure
smooth animations while navigating between different pages in the app.
Fade
A subtle fade transition is applied when users navigate from the Start Page
to the Home Page.
|
| Fig. 4.1 Home Page - Fade transition |
Slide In/Out
The slide in/out transition is applied to the Food Item Page and Confirmation
Page.
Fig. 4.2 Food Item Page & Confirmation Page - Slide in/out transition
I created the transitionToPage function for the slide-in transition and the reverseTransition function for the slide-out transition. This approach allows me to apply the transitions to multiple pages without repeating the code.
 |
| Fig. 4.3 Page transitions, JavaScript |
Challenges and Limitations
Although the flow is mostly complete, there are certain aspects that I was unable to fully implement due to time constraints. For instance, the swipe-to-delete action and search results on the Food Log Panel, as well as the calorie intake update after logging a food item, could not be achieved as intended. Despite multiple attempts with ChatGPT to resolve these issues, it seems the information could not be transferred to the Home Page as expected.
 |
| Fig. 5.1 Attempt at JavaScript function for updating the lunch section on the Home Page |
Netlify Upload
After completing all the pages and reviewing the flow, I uploaded the files to Netlify. I then checked the app performance using a plugin called Lighthouse.
 |
| Fig. 5.2 Upload to Netlify |
 |
| Fig. 5.3 App performance, Lighthouse |
Final Submission
* Recommended for viewing on iPhone XR/iPhone 12 Pro sizes
Presentation Video
Presentation Video - Final Project: Completed App
Walkthrough Video
NutriFit App Walkthrough - Final Project: Completed App
REFLECTION
Reflecting on this project, it was definitely challenging, especially with JavaScript. I have learned to use JS to generate content, which helped avoid a lot of repetitive HTML code. That said, I still have a lot to learn. While I can understand the code, I’m not yet confident enough to write it independently without struggling with the logic. ChatGPT was a big help throughout the process, guiding me through some tricky parts. The most frustrating part was not being able to update the calorie intake after logging a meal, which left the task flow feeling incomplete. Other than that, I’m quite satisfied with how the rest turned out.
Comments
Post a Comment