Simple Coffee Listing

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of content

• Overview
• Screenshots
• Features
• Contact

Overview

The challenge was to build a web page based on a given picture. The only other requierement was to implement a reusable card component. The data has to be obtained from an API, and the card must adapt to the data throw some variables. I used this challenge as a first React practice. My intention was to use all my recently adquiere knowledges about this framework in a full frontend practice.

Screenshots

Features

The full features list requeried by this challenge is:

• Create a coffee listing page that matches the given design.
• Use React or other Front-end libraries for this challenge.
• Create a Reusable Card component.
• The card component should include a picture, name, pricing, rating, and number of votes if exists.
• The card component should render popular tag, availability status conditionally.
• Render Coffee list with given data. The data should come from a given API or downloaded JSON file.
• Users can choose to list all products or just available products.
• Deploy the solution and submit Repository URL and Demo URL.

Contact

• GitHub FedericoQuarin
• LinkedIn FedericoQuarin