Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abengl/coffee-listing
This is a coffee listing page designed to showcase various coffee products. The application uses Axios and features a reusable card component.
https://github.com/abengl/coffee-listing
axios css html javascript
Last synced: about 1 month ago
JSON representation
This is a coffee listing page designed to showcase various coffee products. The application uses Axios and features a reusable card component.
- Host: GitHub
- URL: https://github.com/abengl/coffee-listing
- Owner: abengl
- Created: 2024-07-25T00:28:32.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-03T23:25:56.000Z (6 months ago)
- Last Synced: 2024-08-04T23:39:15.615Z (6 months ago)
- Topics: axios, css, html, javascript
- Language: CSS
- Homepage: https://coffee-listing-navy.vercel.app
- Size: 780 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Coffee Listing Page
This project is a coffee listing page ☕ designed to showcase various coffee products. The application uses Axios and features a reusable card component. The card component displays essential information about each coffee, including an image, name, pricing, rating, and number of votes. Additionally, the card can conditionally render popular tags and availability status.
The project includes functionality to fetch data from a provided API and allows users to filter the coffee list based on availability.
## User Stories
- **Create a Coffee Listing Page:** Develop a page that matches the given design for listing coffee products.
- **Reusable Card Component:** Create a card component that displays:
- Coffee picture | Coffee name | Pricing | Rating | Number of votes (if available) | Popular tag (conditionally rendered) | Availability status (conditionally rendered)
- **Fetch Data from API:** Retrieve coffee data from the API and render the coffee list accordingly.
- **Filter Options:** Allow users to view all products or filter to display only available products.
## API
The coffee data can be fetched from the following API 💻 :
- **API URL:** [Coffee Data API](https://raw.githubusercontent.com/devchallenges-io/web-project-ideas/main/front-end-projects/data/simple-coffee-listing-data.json)
## Technologies Used
- **HTTP Requests:** Axios
- **Deployment:** Vercel
## Setup and Installation
1. **Clone the Repository:**
```bash
git clone [repository-url]
```
2. **Navigate to the Project Directory:**
```bash
cd [project-directory]
```
3. **Install Dependencies:**
```bash
npm install
```
4. **Run the Application:**
```bash
npm start
```
## Contributing
Feel free to open issues or submit pull requests if you have suggestions or improvements for this project.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgments
DevChallenges.io for providing the project idea.