CoffeeRoasters

Description

An online subscription service for a Coffee brand. The website contains a landing page, an About Us page, and a “Create Your Plan” page, where the user has a guided experience for choosing the perfect subscription package including type of coffee and how much in terms of weight , type of grind, and rate of recurring shipments.

Live site

Code

Stack

React

Sass

Vercel

Project Purpose and Goal

The aim of this project was to develop an online coffee ordering platform with an emphasis on delivering the best user experience possible. The goal was to simplify the decision-making process for customers, allowing them to easily navigate through various coffee options and streamline their purchasing flow.

Web Stack and Explanation

For the 'create plan' feature, React was indispensable due to its dynamic capabilities, enhancing the overall user experience on the website. The combination of React's powerful state management with the sophisticated architecture of Sass allowed for handling the complexity of user choices within a five-step form. This setup was critical for maintaining a seamless interface that could accurately track the intricate web of potential user decisions throughout the ordering process.

Problems and Thought Process

The main challenge was coding the 'plan creation' feature, which comprised three primary components: a controlled step-by-step form, a progress guide to indicate the current step, and a summary display of chosen options. This feature became a deep dive into the complexities of state management and the unpredictability of user actions. Developing a robust solution required consideration to prevent bugs and ensure a fluid user experience. Initially, the state management logic in Plan.js started simple but quickly expanded as I accounted for the variety of possible user scenarios. For example Despite the complexity, I managed to synchronize the components effectively, though I still wonder how to improve the implementation.

Lessons Learned

Developing the 'Create plan' section was a revealing experience in identifying and resolving potential bugs from what appeared to be a straightforward concept. The form, divided into five parts, introduced unique challenges, such as disabling a section based on previous selections and managing the form guide to reflect these changes accurately. This task underscored the importance of considering every possible user interaction and its implications on the form's functionality. I am proud of how I navigated these complexities and achieved a bug-free experience. However, I still wonder about the extensive use of conditional logic within the reducer and if there are more streamlined approaches to achieve the same outcome.