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.)
- Solution URL: Github Repo
- Live Site URL: Coffee Roasters
- 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
- My learning takeways written in my blog post here on Dev.to!
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.
- 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.
- Frontend Mentor - @kebin20
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.