Final Project – Completed App

30/6/2024 - 27/7/2024 / Week 11 - Week 14
Tee Jia Ern / 0348512
Application Design 2 / Bachelor of Design in Creative Media
Final Project – Completed App

---

INSTRUCTIONS

1. Product List, Product Details & Add Multiple Items to Cart + Cart Counter

Fig 1.1 Add Multiple Items to Cart*

Fig 1.2 Firestore

Product List: In the first row of featured product presented in the home page contains a list of products in a structured consistent list design along with their individual product name, price and before discount price. 

Fig 1.3 Product List in Home

Fig 1.4 Product List After Scroll in Home

Product Details: After clicking on the product of the product of your choice, a standardized page appears with additional related details to the product, like brand and category tags, points of the order and product description. 

Fig 1.5: Product Details 1

Fig 1.6: Product Details 2

Add Multiple Items to Cart + Cart Counter

Clicking on the add to cart button at the bottom of the product details page would update the cart number and the cart items when tapping on the cart button on the top right. 

(View Fig 3.1)

2. Search Feed Product Details

The product details changes information according to the product selected in the grid view. Though the add to cart function only reserved for home page first row of products, because both of them are in 2 different query. To show this, the cart doesn't update nor turn colour. 

Fig 2.1 Search Feed Product Details

Fig 2.2 Search Feed Product Details 1

Fig 2.3 Search Feed Product Details 2

3. Remove from Cart

After adding items in the product detail page which is where the add too cart button is placed, clicking on the top right corner is the cart page. There is an x button at the most right side of each product alongside with their name and price. Clicking on the x button would remove the item from the cart.  

Fig 3.1 Remove from Cart

4. Order Tracking Quantity and List of Products

After completing the checkout, there will be order confirmation page with a button that reads track order. The user will be lead to the tracking order page with the quantity of items in the right side of the page. There is two linked actions, one is to see the tracking progression, and one is to see all of the products added to the cart. 

Fig 4.1 Order Tracking Quantity and List of Products

5. Authenticated Login & Sign Up Screen

The login screen mimics the typical login process requiring an actual email and a password with at least 6 characters. It is responsive and shows what went wrong with the details with a pop up at the bottom. 

Fig 5.1 Authenticated Login & Sign Up Screen

6. Responsive Navigation Bar

The cart icon's has a real time update which displays the list of products added to cart. While interacting with the app, if the navigation bar is present, users can click home and be redirected to the home page. 

Fig 6.1 Responsive Navigation Bar

FINAL SUBMISSION

https://app.flutterflow.io/project/lotus3-fr5wr4?tab=pageSelector&page=HomePage

(View in 390x844)

Flutterflow Web Link: https://lotus-teejiaern3.flutterflow.app/

(The splash screen sometimes lag, try hard refreshing)

Windows/Linux:

Hold down the Ctrl key and press F5. 

Alternatively, hold down Ctrl + Shift and press R. 

Mac:

Hold down the Cmd + Shift keys and press R. 

Alternatively, some browsers allow you to hold down the Shift key and click the Reload button

App Name: Lotus 3

Video Walkthrough

---

FEEDBACK

Week 14

General Feedback: The app should be like a completed mobile application. The functions should be responsive as if it's a published app. 

---

REFLECTION

Experience: I learned and applied the features that Mr Razif taught us in our lecture class like backend query to create a unified product description page, add to cart and remove from cart. I also tried to learn other features of an e commerce app and only managed to get the cart counter working. 

Observations: Flutterflow is really new to me and I prefer Mr Razif's tutorial rather than online one. I managed to create an app without code thanks to the lecturer. 

Findings: It's my first time using Flutterflow so for features that I want to implement I have to figure it out myself by watching tutorials and testing it for myself. Learning to implement a new feature is quite time consuming so I end up only implementing the features that are taught in class.