BASKET

This was a final project for the CSC4151/4152 course. Developed in React Native JavaScript and Expo.

Project Details

This was a final group project for the CCSC4151/4152 Software Engineering course. My group consisted of 4 members, myself, Daniela Castro, Nicholas Sutanto, and Pravitha Pratheep. My role as the ScrumMaster was to ensure that the progress was running smoothly and accordingly with the timeline. I was also responsible for the back-end coding for this project.

BASKET is a grocery delivery application mainly to serve all stakeholders around King County, WA. The application will provide functionalities like searching up for stores nearby, looking up items, ordering and delivery. During such trying times, local stores are struggling to survive and make ends meet. Unlike most grocery delivery applications that only covers chain grocery stores, BASKET provides a platform for “mom and pop” stores and other grocery stores that are not covered by competing delivery applications.

Project Outcome

The landing page of our application. The ‘Login’ button allows users to login with their registered email and password, while the ‘Sign Up’ button allows the users to create an account.

This is where the users are able to search for stores. In this simulation, we decided to add 3 stores to the list. The search bar allows users to search for a specific store (filter function).

This page stores the list of categories the store offers, in this case, the categories are offered at Asian Family Market Seattle. The data is stored in a local JSON file.

This page stores the items of the selected category. The user is able to search for a specific brand of food by using the search bar.

Once the user is done shopping, they can press the green basket icon at the top-right corner of the screen to continue to the Checkout page. Here, all the items’ prices are shown as well as the subtotal and total price. The user can then press ‘Continue’ to continue to the Delivery page.

On this page, the user can confirm their delivery address and phone number. Once the user inputs their delivery address, they can press ‘View’ to view the route between the store and the delivery address. The map’s interface uses a React Native maps plugin, while the search for the delivery address uses the Bing Map API.

When the user has confirmed their delivery address and phone number (by pressing the ‘Confirm Order’ button, they can press the image button at the center to return to the ‘Search Stores’ page.