Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/min1870/mix-master
https://github.com/min1870/mix-master
react-query react-router reactjs
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/min1870/mix-master
- Owner: Min1870
- Created: 2023-11-22T09:15:30.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-01-04T16:16:38.000Z (11 months ago)
- Last Synced: 2024-01-04T16:50:38.114Z (11 months ago)
- Topics: react-query, react-router, reactjs
- Language: TypeScript
- Homepage: https://mix-master-zeta.vercel.app/
- Size: 91.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mix Master
Mix Master is an application for exploring and discovering cocktails. Whether you're a cocktail enthusiast or just looking for a new drink recipe, Mix Master has you covered. This project utilizes React, React Router, and React Query for a seamless and dynamic user experience.
## Table of Contents
- [Introduction](#introduction)
- [Installation](#installation)
- [Usage](#usage)
- [Folder Structure](#folder-structure)
- [Dependencies](#dependencies)
## Introduction
Mix Master is designed to provide users with a platform to explore a wide variety of cocktails. From classic recipes to trendy mixes, the application aims to be a go-to resource for cocktail enthusiasts. The project leverages React for a responsive and interactive user interface, React Router for smooth navigation, React Query for efficient data fetching, and styled-components for styling to ensure a visually appealing experience.
## Installation
1. Clone the repository:
```bash
https://github.com/Min1870/mix-master.git
```
2. Navigate to the project directory:
```bash
cd mix master
```
3. Install dependencies:
```
npm install
```
## Usage
To start the Mix Master application, run the following command:
` npm start
`
## Folder Structure
- **src:** This directory contains the main source code of the application.
- **pages:** Subdirectory for React components related to different pages.
- `About.js`: Component for the "About" page.
- `HomeLayout.js`: Component for the layout of the home page.
- `Landing.js`: Component for the landing page.
- `Error.js`: Component for handling errors.
- `NewsLetter.js`: Component for the "NewsLetter" page.
- `Cocktail.js`: Component for displaying individual cocktail details.
- `SinglePageError.js`: Component for handling errors on individual pages.
## Dependencies
Major dependencies and their versions:
- [react](https://reactjs.org/) - v18.2.0
- [react-router-dom](https://reactrouter.com/) - v6.19.0
- [@tanstack/react-query](https://react-query.tanstack.com/) - v5.17.1