Dev Challenges – Simple Coffee Listing

This is a solution for a challenge from

Simple Coffee Listing Preview


This website was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

  • 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

Built With



Mobile Screenshot


Tablets Screenshot

Desktop – All Products

Desktop Screenshot

Desktop – Available Now

Desktop Screenshot

How To Use

To clone and run this application, you’ll need Git and Yarn installed on your computer. From your command line:

# Clone this repository
$ git clone

# Install dependencies
$ yarn

# Run the app
$ yarn dev

Recommended IDE Setup



View Github