02/12/2024 - 30/12/2024 / Week 11 - Week 14
Joey Lok Wai San / 0350857
Application Design II / Bachelor of Design (Hons) in Creative Media
Final Project: Completed App
TABLE OF CONTENTS
LECTURES
All lectures and exercises completed in Application Design II - Lectures & Exercises
INSTRUCTIONS
https://drive.google.com/file/d/159_U4ajXP-Km8y8h6Gh64JjTjVKQ6xEX/preview
FINAL PROJECT: Completed App
For the final project, we will synthesise the knowledge gained in tasks 1, 2 and 3 for application in task 4. We will create and integrate visual assets and refine the prototype into a complete working and functional product experience.
Building on the progress from Task 3: Interactive Component Design & Development, I focused on creating the two remaining screens, enhancing the app's interactivity with animations, and linking all the screens together. The main things left to be done are shown below, alongside some minor changes to every screen to ensure everything is consistent and functioning.
Building on the progress from Task 3: Interactive Component Design & Development, I focused on creating the two remaining screens, enhancing the app's interactivity with animations, and linking all the screens together. The main things left to be done are shown below, alongside some minor changes to every screen to ensure everything is consistent and functioning.
Things to be done for Final Project:
- Link all the different screens together
- Make the 'Restaurant Page' with 'Reserve Now' button
- Make the 'Reservation Page' to show confirmed reservation
Creating Remaining Pages
There really isn't much to do in the final project since I tried to create as much as I could in the previous project. The main thing was to create these "in-between" pages necessary to complete the task flow of the application.
Restaurant Page
The restaurant page was not the most difficult thing to do, as it consisted of repeating components I have already developed before, such as the carousel and buttons. The only changes I had to make were using CSS to style the carousel and buttons the way I wanted. Other than that I just referenced the prototype layout I created for this page to the best of my abilities.
Fig. 1.1 Restaurant Page Progress, Week 13 (16/12/2024)
Restaurant Page
The restaurant page was not the most difficult thing to do, as it consisted of repeating components I have already developed before, such as the carousel and buttons. The only changes I had to make were using CSS to style the carousel and buttons the way I wanted. Other than that I just referenced the prototype layout I created for this page to the best of my abilities.
Fig. 1.1 Restaurant Page Progress, Week 13 (16/12/2024)
Fig. 1.2 Adding Padding to End of Carousel, Week 13 (16/12/2024)
One thing I was unable to do in my prototype was have the navigation that links the sections. I created it in my Figma prototype but unfortunately, it didn't work so I wanted to try and see whether I could do it using HTML, CSS and JavaScript. To make this work, I named each section with a unique ID, then linked the buttons to them. When clicking on the section title you want to view, it will scroll to the desired section.
Fig. 1.3 Scroll to Section, Week 13 (21/12/2024)
Fig. 1.4 Basic Code for Navigation, Week 13 (18/12/2024)
.gif)
Fig. 1.5 Final Restaurant Page, Week 13 (18/12/2024)
Fig. 1.4 Basic Code for Navigation, Week 13 (18/12/2024)
When I completed the main components of the screen, I changed the font size of some of the text to be more consistent with the other pages. I added the back icon to lead back to the previous screen. I also tried to add the favorites heart icon but the svg was broken and in my mind it wasn't really important since I didn't have the 'Favorites' page so there was no point putting it in.
.gif)
Reservation Page
For the reservation page, I wanted to use DaisyUI and change the code according to what I wanted it to look however none of the components looked like what I wanted. This led me to get some help from Blackbox AI and ChatGPT as I wasn't sure how to switch between tabs with JavaScript and GSAP. Basically, the tab titles are buttons and clicking the inactive tab will open it up.
For the reservation page, I wanted to use DaisyUI and change the code according to what I wanted it to look however none of the components looked like what I wanted. This led me to get some help from Blackbox AI and ChatGPT as I wasn't sure how to switch between tabs with JavaScript and GSAP. Basically, the tab titles are buttons and clicking the inactive tab will open it up.
Fig. 1.7 Code from AI, Week 13 (21/12/2024)
Fig. 1.8 Final Reservation Page - Before Reservation, Week 13 (18/12/2024)
.gif)
Fig. 1.9 Final Reservation Page - After Reservation, Week 13 (18/12/2024)
Fig. 1.10 Final Search Page, Week 13 (19/12/2024)
When the basic functions were done, I moved on to styling it the way I wanted using CSS and adding some other animations. Next, I duplicated the page in a separate file and changed the upcoming tab to have a reservation instead of just a button. This is for after a reservation has been made and users can click to see their reservation and get feedback.
.gif)
Fig. 1.9 Final Reservation Page - After Reservation, Week 13 (18/12/2024)
Search Page
I created an additional page for the sake of it, there isn't anything functioning here, it is only the search bar taken from the home page as well as the remaining content I took from my prototype in Figma. This page is just to show a page when the 'Search' icon is clicked on the navigation bar.
I created an additional page for the sake of it, there isn't anything functioning here, it is only the search bar taken from the home page as well as the remaining content I took from my prototype in Figma. This page is just to show a page when the 'Search' icon is clicked on the navigation bar.
Fig. 1.10 Final Search Page, Week 13 (19/12/2024)
Finalizing Screens
Fig. 2.1 Root File to Link Screens, Week 14 (28/12/2024)
Other than that I learned the most important code to link screens is using this ../ for the path. Based on my file structures, I used ../ at all times instead of the others below
Before linking the screens together I went through each page and made sure everything was finalized one by one, including all the animations and styling. I'm glad I did that because somewhere along the line some of my code was not working right and the styling was off, so I managed to fix it and sleep better knowing all my screens are finalized.
For the page transitions, I already applied the macro transitions using GSAP's `to`, `from`, and `fromTo` functions for each page. The animations make the app feel more engaging when navigating.
Linking Screens
Now onto linking the screens, it seemed simple enough until it wasn't. When I tried to link my loading screen to my first onboarding screen, it kept saying the file could not be fetched. Long story short it turns out I did not have a root file so it was not able to call the file I wanted. After some asking around for help, the solution to this was to make a new HTML file which would load the content and this would be sort of like the 'parent' (idk how to explain it).
For the page transitions, I already applied the macro transitions using GSAP's `to`, `from`, and `fromTo` functions for each page. The animations make the app feel more engaging when navigating.
Linking Screens
Now onto linking the screens, it seemed simple enough until it wasn't. When I tried to link my loading screen to my first onboarding screen, it kept saying the file could not be fetched. Long story short it turns out I did not have a root file so it was not able to call the file I wanted. After some asking around for help, the solution to this was to make a new HTML file which would load the content and this would be sort of like the 'parent' (idk how to explain it).
Fig. 2.1 Root File to Link Screens, Week 14 (28/12/2024)
- / is the root of the current drive
- ./ is the current directory
- ../ is the parent of the current directory
Fig. 2.2 Path Code, Week 14 (28/12/2024)
When I gave up and called it a day, right as I was about to sleep, I realized I made a dumb mistake of creating the pop up as a separate page. Of course, it would not open as an overlay on top of the screen, because it is already called the page so it does not have a background to overlay on top of. I then remembered one of my friends made a popup in their prototype and that DaisyUI has the code exactly for what I need, I would just need to replace the content with my animation. I fell asleep with my hopes that it would now work.
Fig. 2.4 DaisyUI Component for Popup, Week 14 (29/12/2024)
Fig. 3.2 Netlify Performance, Week 14 (30/12/2024)
Linking the screens back and forth was relatively easy after I figured that out. It was just copy-pasting the code, putting the code on the element you want to click on and finally changing the file path.
Fig. 2.3 Linking Screens - Load to Onboarding, Week 14 (28/12/2024)
*Everything I'm about to say here may sound dumb but I spent the whole day coding and this last thing was done at 3AM so my brain was not braining*
I was about to be done with everything when one issue kept persisting. I could not open the 'Confirmation Popup' as an overlay on top of the 'Reservation Screen'. I was pretty desperate and motivated for it to work because it was the last thing I needed to do to complete the app and then I could sleep. However, no matter how many codes I tried and the help I got from AI, it would not open as an overlay even when I linked it as an iframe and changed the background transparency. I even tried to put the reservation screen as a background for the popup.
Fig. 2.3 Linking Screens - Load to Onboarding, Week 14 (28/12/2024)
*Everything I'm about to say here may sound dumb but I spent the whole day coding and this last thing was done at 3AM so my brain was not braining*
I was about to be done with everything when one issue kept persisting. I could not open the 'Confirmation Popup' as an overlay on top of the 'Reservation Screen'. I was pretty desperate and motivated for it to work because it was the last thing I needed to do to complete the app and then I could sleep. However, no matter how many codes I tried and the help I got from AI, it would not open as an overlay even when I linked it as an iframe and changed the background transparency. I even tried to put the reservation screen as a background for the popup.
When I gave up and called it a day, right as I was about to sleep, I realized I made a dumb mistake of creating the pop up as a separate page. Of course, it would not open as an overlay on top of the screen, because it is already called the page so it does not have a background to overlay on top of. I then remembered one of my friends made a popup in their prototype and that DaisyUI has the code exactly for what I need, I would just need to replace the content with my animation. I fell asleep with my hopes that it would now work.
Fig. 2.4 DaisyUI Component for Popup, Week 14 (29/12/2024)
The next morning, I took the component from DaisyUI and imported it into my file. The component works and I swapped out its content for my animation and luckily it works too.
Fig. 2.5 Importing Animation and Code into the Component, Week 14 (29/12/2024)
Fig. 2.6 Final Pop-Up Box Animation as Overlay, Week 14 (29/12/2024)
Netlify Upload
Fig. 3.1 Netlify Upload, Week 14 (30/12/2024)
Finally, once the app was done and fully functioning, I deployed it in Netlify using a few tutorials online and some of what I remembered from our previous module.
Fig. 3.1 Netlify Upload, Week 14 (30/12/2024)
Fig. 3.2 Netlify Performance, Week 14 (30/12/2024)
Netlify Link
https://eatigo.netlify.app/
Task Flow
Google Drive Link- Login to Eatigo
- Make a reservation on the Reservations page
- Browse restaurant details
- Click on 'Reserve Now' on the Restaurant page
- Choose the number of pax, date, time and any available promos
- Enter promo code
- Click 'Confirm' to confirm the booking
- View reservation details and reservation code
- Return to the Reservations page to view the upcoming reservation
- Users can also view home page and search page
Fig. 5.1 Final Project: Completed App - Presentation Video, Week 14 (30/12/2024)
Fig. 5.2 Final Project: Completed App - Walkthrough Video, Week 14 (30/12/2024)
FEEDBACK
WEEK 12
The screens look fantastic. For the splash screen choose the second animation as it looks a lot cleaner.
The screens look fantastic. For the splash screen choose the second animation as it looks a lot cleaner.
REFLECTION
Experience
I actually had fun doing this module, it felt really good to complete the app page by page and see it develop from a prototype into a functioning one. I had some challenges here and there with the code because of how complex it is but nonetheless, I'd say this was my favourite module this semester by far.
Observations
From this module, I observed the importance of organising the files, especially when it comes to the linking part of the project. It takes a lot of patience when you come across an error, sometimes its an easy fix over missing a semicolon or comma, sometimes you have to scrap the entire code and throw it away and do that a few rounds. It really gives a sense of satisfaction once everything is completed and functioning.
Findings
Comments
Post a Comment