https://github.com/pktcodes/mixmaster-react-project-v2

MixMaster Project using React - React Router, React Query
https://github.com/pktcodes/mixmaster-react-project-v2

actions cocktail-db error-handling john-smilga loader mixmaster react-query react-router react-toastify single-page-app styled-components vite

Last synced: 7 days ago
JSON representation

MixMaster Project using React - React Router, React Query

• Host: GitHub
• URL: https://github.com/pktcodes/mixmaster-react-project-v2
• Owner: pktcodes
• Created: 2023-10-17T03:07:26.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-23T08:08:33.000Z (12 months ago)
• Last Synced: 2024-08-12T23:21:33.018Z (3 months ago)
• Topics: actions, cocktail-db, error-handling, john-smilga, loader, mixmaster, react-query, react-router, react-toastify, single-page-app, styled-components, vite
• Language: JavaScript
• Homepage: https://react-mixmaster-v2-prod.netlify.app/
• Size: 213 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://reactrouter.com/en/main)

#### 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](https://styled-components.com/)

---

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