MixMaster is a React-based web application that allows users to explore and search for cocktail recipes. It integrates with external APIs to fetch cocktail data and provides a user-friendly interface for browsing, searching, and learning about various drinks. View the live project here.
- Cocktail Search: Search for cocktails by name or browse by category.
- Detailed Cocktail Information: View detailed information about each cocktail, including ingredients, instructions, and images.
- Newsletter Subscription: Subscribe to a newsletter to stay updated with the latest cocktail recipes.
- Error Handling: Custom error pages for better user experience.
- Responsive Design: Fully responsive and styled using
styled-components.
- Frontend: React, React Router, React Query, Axios
- Styling: Styled Components
- Notifications: React Toastify
- Build Tool: Vite
-
Clone the repository:
git clone https://github.com/leonortu/mixmaster.git cd mixmaster -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173. -
Alternatively, view the deployed application at: https://react-practice-mix-master.netlify.app/
npm run dev: Start the development server.npm run build: Build the project for production.npm run preview: Preview the production build.
mixMaster/
├── public/ # Static assets
├── src/ # Source code
│ ├── assets/ # Styling and wrappers
│ ├── components/ # Reusable components
│ ├── pages/ # Application pages
│ ├── App.jsx # Main application component
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── .gitignore # Git ignore file
├── index.html # HTML template
├── package.json # Project configuration
└── README.md # Project documentation
Enjoy exploring MixMaster! 🍹