Scribd
Upload
7 views3 pages

Coffee Listing Page with React Components

The document outlines a challenge to create a coffee listing page using Front-end libraries like React. It requires implementing a reusable card component that displays various coffee details and conditionally renders tags based on availability. Additionally, it includes instructions for fetching data from an API and deploying the solution with repository and demo URLs.

Uploaded by

Kratos Qlf
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views3 pages

Coffee Listing Page with React Components

The document outlines a challenge to create a coffee listing page using Front-end libraries like React. It requires implementing a reusable card component that displays various coffee details and conditionally renders tags based on availability. Additionally, it includes instructions for fetching data from an API and deploying the solution with repository and demo URLs.

Uploaded by

Kratos Qlf
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

{

"title": "Simple Coffee Listing",


"description": "This challenge is great for working with Front-end libraries like
React, Vue,... You will need to implement a reusable card component with different
variables based on the data given.",
"userStories": [
{
"content": "Create a coffee listing page that matches the given design."
},
{
"content": "Use React or other Front-end libraries for this challenge."
},
{
"content": "Create a Reusable Card component."
},
{
"content": "The card component should include a picture, name, pricing,
rating, and number of votes if exists."
},
{
"content": "The card component should render popular tag, availability status
conditionally."
},
{
"content": "Render Coffee list with given data. The data should come from a
given API or downloaded JSON file."
},
{
"content": "Users can choose to list all products or just available
products."
},
{
"content": "Deploy the solution and submit Repository URL and Demo URL."
}
],
"text": [
{ "content": "Our Collection" },
{
"content": "Introducing our Coffee Collection, a selection of unique coffees
from different roast types and origins, expertly roasted in small batches and
shipped fresh weekly."
},
{ "content": "All Products" },
{ "content": "Available Now" }
]
}

##################################################
Google Fonts links
##################################################

<link rel="preconnect" href="[Link]


<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..
40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;0,9..40,1000;1,9..40,100;1,9
..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,
9..40,900;1,9..40,1000&display=swap" rel="stylesheet">

font-family: 'DM Sans', sans-serif;

###################################################
API Links
###################################################

[Link]
end-projects/data/[Link]

####################################################
API Fetch Contents
####################################################

[
{
"id": 1,
"name": "Cappuccino",
"image": "[Link]
assets/coffee-challenge/[Link]",
"price": "$5.20",
"rating": 4.7,
"votes": 65,
"popular": true,
"available": true
},
{
"id": 2,
"name": "House Coffee",
"image": "[Link]
assets/coffee-challenge/[Link]",
"price": "$3.50",
"rating": 4.85,
"votes": 15,
"popular": true,
"available": true
},
{
"id": 3,
"name": "Espresso",
"image": "[Link]
assets/coffee-challenge/[Link]",
"price": "$2.50",
"rating": 4.9,
"votes": 55,
"popular": false,
"available": true
},
{
"id": 4,
"name": "Coffee Latte",
"image": "[Link]
assets/coffee-challenge/[Link]",
"price": "$4.50",
"rating": 5,
"votes": 23,
"popular": false,
"available": true
},
{
"id": 5,
"name": "Chocolate Coffee",
"image": "[Link]
assets/coffee-challenge/[Link]",
"price": "$4.00",
"rating": "4.65",
"votes": 122,
"popular": false,
"available": false
},
{
"id": 6,
"name": "Valentine Special",
"image": "[Link]
assets/coffee-challenge/[Link]",
"price": "$5.50",
"rating": null,
"votes": 0,
"popular": false,
"available": true
}
]

########################################
HTML Text
########################################

Our Collection

Introducing our Coffee Collection, a selection of unique coffees from different


roast types and origins, expertly roasted in small batches and shipped fresh
weekly.

All Products

Available Now

You might also like