Lessons Learned from Tackling a Frontend Mentor Project: Coffee Roasters themed Edition

Hey everyone! I recently took on a project challenge from Frontend Mentor and wanted to share my learnings with you all. The design files were provided, and I had the freedom to choose whichever tech stack I wanted to use and modify it as I pleased.

Being a coffee addict, I was immediately drawn to the coffee-themed design of the project. Not only did it look amazing, but it was also an excellent opportunity for me to practice using React Router since I was just starting to learn routing.

I've been working on this project for some time now, and it's become one of my main focuses for implementing various features and concepts that I have learned. I even took on the challenge of rewriting the project in TypeScript, which helped me become more familiar with the language.

Recently, I've been exploring testing in React using Jest, and let me tell you, it was a challenging process! I had to work through the complexities of configuring the testing environment with TypeScript, but it was worth it because I learned some valuable skills that will come in handy in the future.

---

Main Challenge

When I was building this website, I faced a major challenge while trying to accommodate the edge cases of the challenge. One of the tasks provided was to calculate prices based on various factors like order frequency and quantity of beans, when a user clicks on a subscription option. Initially, I planned to map the subscription options and render multiple instances of it, but that turned out to be quite difficult. There were multiple factors dependent on each other to calculate prices dynamically.

Eventually, I decided to revise my original solution of mapping all the subscription option sections. Instead, I created separate sections to handle this complex calculation.

           <Method
                id="method"
                plan={planOption[0]}
                onHoldChoice={(id: string, event: MouseEvent) =>
                  holdChoice(planOption[0].id, id, event)
                }
                onButtonClick={handleCoffeeMethodBtn}
              />
              <CoffeeType
                id="coffee-type"
                plan={planOption[1]}
                onHoldChoice={(id: string, event: MouseEvent) =>
                  holdChoice(planOption[1].id, id, event)
                }
                onButtonClick={handleCoffeeTypeBtn}
              />
              <Amount
                id="amount"
                plan={planOption[2]}
                onHoldChoice={(id: string, event: MouseEvent) =>
                  holdChoice(planOption[2].id, id, event)
                }
                onButtonClick={handleAmountBtn}
                onSetWeight={setWeightBoolean}
              />
              <Grind
                id="grind"
                plan={planOption[3]}
                isCapsule={isCapsule}
                onHoldChoice={(id: string, event: MouseEvent) =>
                  holdChoice(planOption[3].id, id, event)
                }
                onButtonClick={handleGrindTypeBtn}
              />
              <Delivery
                id="delivery"
                plan={planOption[4]}
                onHoldChoice={(id: string, event: MouseEvent) =>
                  holdChoice(planOption[4].id, id, event)
                }
                onButtonClick={handleDeliveryBtn}
                onSetFrequency={setFrequencyBoolean}
                weight={weight}
              />

This snippet of code below was an example of one of the challenges presented by the project. Specifically, it tackled the task of calculating shipping prices based on the customer's chosen frequency and weight.

 function displayShippingPrice() {
    let price: number;
    if (frequency.isWeekSelected && weight.firstWeight) {
      price = 7.2 * 4;
    } else if (frequency.isFortnightSelected && weight.firstWeight) {
      price = 9.6 * 2;
    } else if (frequency.isMonthSelected && weight.firstWeight) {
      price = 12.0;
    } else if (frequency.isWeekSelected && weight.secondWeight) {
      price = 13.0 * 4;
    } else if (frequency.isFortnightSelected && weight.secondWeight) {
      price = 17.5 * 2;
    } else if (frequency.isMonthSelected && weight.secondWeight) {
      price = 22.0;
    } else if (frequency.isWeekSelected && weight.thirdWeight) {
      price = 22.0 * 4;
    } else if (frequency.isFortnightSelected && weight.thirdWeight) {
      price = 32.0 * 2;
    } else if (frequency.isMonthSelected && weight.thirdWeight) {
      price = 42.0;
    } else {
      price = 0;
    }
    setShippingPrice(price);
  }

  useEffect(() => {
    displayShippingPrice();
  }, [weight, frequency]);

Since there were multiple variables that were dependent on each other, it was challenging to implement the necessary conditional logic when mapping over the elements.

Of course there's more! I didn't want to just stuff all my learnings into a readme doc, so I decided to share them with you all in this blog post. If you're interested, here are the links to my key takeaways:

1. Building Stronger Foundations with TypeScript: Insights and Takeaways
2. Testing the Waters: My First Steps into Jest for Data Fetching in Frontend Development (WIP)

Thanks for reading, and I hope my learnings help you in your front-end development journey!