Dev Challenges - Simple Coffee Listing

This is a solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
  • Screenshots
• How to use
• Recommended IDE Setup
• Author

Overview

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

• Vue.js
• Axios
• Tailwind CSS
• Vite Js
• Yarn

Screenshots

Mobile

Tablets

Desktop - All Products

Desktop - Available Now

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 https://github.com/SouleymaneSy7/dev-challenges-simple-coffee-listing.git

# Install dependencies
$ yarn

# Run the app
$ yarn dev

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) .

Author

• GitHub - Souleymane Sy
• Dev Challenges - Souleymane Sy
• Frontend Mentor - @SouleymaneSy7
• Twitter - @Souleymanesy43