DEVELOPMENT

Role:
Solo Student Project

Strategies:
Visual Design, Coding

Tools:
Figma, HTML/CSS/Bootstrap/React

Timeline:
3 weeks

The Project

Within the span of three weeks, I practice the workflow of developing an interactive interface. I chose a concept and built it with React JS by creating a list-based interface.

Project Scope

I chose to do a bakery concept for the web application. The SweetHaus Bakes application serves to provide users a way to be infoemed of the business's goods and products. Users will have a easier time navigating the application using the interactive components that is handled with React state variables.

PROCESS

Features

In my web application, there are different features handled by compoennts, props, and states.

Users are able to..

add items to their cart.
remove items from their cart.
filter items using the dietary restricton category, types category, and the search bar component.
sort items by price.
see the total price of the items added to cart.
see the subtotal of the items in the cart.

PROCESS

Architecture

To build the interactive interface, I divided the work of the features and tasks into elements in my code.

In my code, I have the following files..

Cart component. All of the logic involved to develop the cart page happens in this file (i.e displaying bakery items added or removed from the cart).
Filter component. The logic used to develpp the filters section found in the left side of the page, all of the logic goes into this file (i.e sorting prices).
Header component. In this file, filtering for the search bar, visual aspect of the interactive cart button, and the nav-brand is coded.
Home component. In the home component, the props and the states ensures the filtering/sorting functionalities is connected to the products that is displayed in the home page.
Bakery item component. All of the logic involved to ensure everything that is inside the card components works (i.e displaying the price, name, and description of each item).
Context.js file. Context.js is used as the foundation for all the context and bakery-related data found in other files.
Reducer.js file. Reducer.js helps update complicated states of the components in the application.

The website is able to handle any combination of filters, and all filters and sorting method works togther without breaking the web application. All of the components and the files work together to create the current application that you are seeing now!

Bakery Website

Click the image or link to view the website!

Rectrospective

What I would do differently next time?

Start the project early. As I'm still a beginner in coding, learning React was difficult for me. The language was confusing. Days before the deadline, I was cramming in JavaScript and React so I still have a hard time figuring and coming up with the logic for these languages.
Practing your fundamentals. Throughout the project, my basics and core concepts of JavaScript wasn't there. There were times where I struggle coming up with the logic of my code because I didn't know what functions or components of JS were avaiable to me. For future projects, I will take my time learning the foundational concepts of the language before jumping straight into it.