MixMaster 🍸

PROD [Live] : https://react-mixmaster-v2-prod.netlify.app/

MixMaster consists of a straight forward user interface where there is a

• List of cocktails by default, a search form to search for specific cocktails, and along with the routes to the Home , About , NewsLetter in the navigation bar.
• To get more details of a specific cocktail in the list, click on the Details.
• For each page render the Loading component has been implemented and unknown route URLs are handled by the Error component.
• Routing is implemented using React Router, React Query is used for caching the data requests and Styled Components for CSS.
• To run the project locally, clone the repo, npm install to install the dependencies, and npm run dev to start up the development server on default port 5173.

Languages

HTML, CSS, JavaScript, React - Hooks

API

https://www.thecocktaildb.com/api.php

Deployment / Hosting

Netlify

Notes

SPA

SPA stands for Single-Page Application, which is a web application that dynamically updates its content without requiring a full page reload. It achieves this by loading the initial HTML, CSS, and JavaScript resources and then dynamically fetching data and updating the DOM as users interact with the application.

React Router is a JavaScript library used in React applications to handle routing and navigation. It provides a declarative way to define the routes of an application and render different components based on the current URL. React Router allows developers to create a seamless, client-side navigation experience within a SPA by mapping URLs to specific components and managing the history and URL changes.

React Router

Styled Components

• CSS in JS
• Styled Components
• have logic and styles in component
• no name collisions
• apply javascript logic
• only responsible for styling
• Styled Components Docs

---

Note: I have developed this project ~ [19] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga.