Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thembamtshelwane/summer-mixology
This project was assigned to me during my software internship at Tshimologong
https://github.com/thembamtshelwane/summer-mixology
api api-rest reacjts react tailwind-css tailwindcss
Last synced: about 1 month ago
JSON representation
This project was assigned to me during my software internship at Tshimologong
- Host: GitHub
- URL: https://github.com/thembamtshelwane/summer-mixology
- Owner: ThembaMtshelwane
- Created: 2024-09-02T08:47:38.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-25T18:05:55.000Z (3 months ago)
- Last Synced: 2024-11-21T18:08:09.279Z (about 1 month ago)
- Topics: api, api-rest, reacjts, react, tailwind-css, tailwindcss
- Language: JavaScript
- Homepage: https://summer-mixology.vercel.app
- Size: 43.8 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Summer-Mixology
Welcome to **Summer-Mixology**! This website showcases a variety of cocktail recipes, perfect for the summer season. Inspired by [Kaskad Mixers](https://kaskad-mixers.fr/), we created this site to help users explore and enjoy delicious cocktails with a fun and refreshing vibe.
## Table of Contents
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Installation](#installation)
- [Usage](#usage)
- [Team](#team)
- [Learnings](#learnings)
- [Inspiration](#inspiration)
- [Live Demo](#live-demo)
## Features
- **Cocktail Recipes**: Fetches and displays a variety of cocktails from TheCocktailDB API.
- **Responsive Design**: The site is fully responsive, ensuring a great user experience on both mobile and desktop devices.
- **Interactive Carousels**: Uses the Embla library to create smooth and interactive carousels for showcasing cocktail images.
- **Animations**: Leverages Framer Motion to add delightful animations across the site.
- **User-Friendly UI**: Clean and intuitive interface designed for easy navigation.
## Tech Stack
- **React**: A JavaScript library for building user interfaces.
- **Tailwind CSS**: A utility-first CSS framework for styling the website.
- **TheCocktailDB API**: The API used to fetch cocktail recipes.
- **Embla Carousel**: A library for creating carousels in React.
- **Framer Motion**: A library that simplifies animations in React applications.
## Installation
To run this project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/your-username/summer-mixology.git
2. Navigate to the project directory::
```bash
cd summer-mixology
3. Install the dependencies:
```bash
npm install
4. Start the development server:
```bash
npm start
The application will run on [http://localhost:3000](http://localhost:3000).
## Usage
- Browse through various cocktail recipes.
- Navigate through the cocktail collection and categories.
- Click on any cocktail for more detailed information and recipe instructions.
## Team
- **Themba Mtshelwane**
- **[Nqobile](https://github.com/NqobileBuhle)**
- **[Boitshepo](https://github.com/codycubes)**
## Learnings
Through this project, our team gained experience in:
- Collaborative teamwork and effective task delegation.
- Using Embla for creating responsive and interactive carousels in React.
- Implementing animations with Framer Motion.
- Enhancing productivity by leveraging existing HTML templates.
- Fetching and displaying data dynamically from TheCocktailDB API.
## Inspiration
The design and concept were inspired by [Kaskad Mixers](https://kaskad-mixers.fr/).
## Live Demo
Explore the live site here: [Summer-Mixology](https://summer-mixology.vercel.app/)