kebin20/coffee-roasters-website

A fictional coffee beans ordering website built with React, routing via React Router, where you are able to subscribe to a coffee beans order plan and being able to customize it. Jest was used as a testing tool for simple testing of async function.

Coffee Roasters Website

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Main Use Case

Users should be able to:

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site
• Make selections to create a coffee subscription and see an order summary modal of their choices
• See the different types of coffee, with information fetched from a third party API. (NOTE: There may be irregularities with the information shown and it is due to the source of the API.)

Links

• Solution URL: Github Repo
• Live Site URL: Coffee Roasters

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• CSS Modules
• Mobile-first workflow
• TypeScript - TypeScript - Strongly typed programming language on top of JS
• React - JS library
• React Router - React routing library
• Jest - Testing suite

What I learned

• My learning takeways written in my blog post here on Dev.to!

Continued development

This website will be an ongoing project and function as a sandbox to implement new techniques and concepts.

Future implementations:

- Create a "Types of Coffee" page to display common coffee types by fetching data from a Coffee API. (COMPLETED)

- Migrating the project to TypeScript. (COMPLETED)

• Enable user to create a personal account. (WIP)

• Enable user login to check their account by using BaaS like Firebase for the backend.

• Create another "Shop" page to display around 6 items for sale and the ability to add it to the custom order plan.

• Add a "add to shopping cart" functionality.

Useful resources

• Coffee API - This coffee API sample is being used to display the different types of coffee available in the world.
• Scaler - This helped me for creating the text gradient for the title within the homepage.
• MDN - CSS - This doc helped me to create the transparent looking style of the hamburger menu.
• Stack Overflow - This SO thread helped me to understand how to add a br tag in React
• Stack Overflow - This thread helped me with conditional styling
• MDN - CSS - This mdn doc helped me to disable the elements within the button element.

Author

• Frontend Mentor - @kebin20

Frontend Mentor - Coffeeroasters subscription site solution

This is a solution to the Coffeeroasters subscription site challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.