Bartenders and cocktail fans will be excited to have this useful app on hand as they look for drink recipes based on a spirit they have on hand. This Showcase project was assigned as part of Turing School of Software Design Module 3 Front End curriculum. Our task was to design an app and implement all of the technologies we have been learning over the course of the last 5 weeks. MixMaster makes network requests to TheCocktailDB api to access cocktail data and recipe data in response to user input. A user can select a spirit to get a listing of cocktails that include that spirit. Clicking on a chevron of a particular cocktail card reveals the recipe and instructions for how to make it.
Use the technology you’ve been working with over the course of the module to demonstrate mastery of the following:
- React
- Router
- Asynchronous JavaScript
- End to end testing with Cypress
- Install the prerequisites: Node.js npm Git
- Clone the repository: Open a terminal window. Navigate to the directory where you want to clone the repository. Run the following command:
git clone https://github.com/ganuza/MixMaster
- Install the dependencies: Run the following command in the cloned repository directory:
npm install
- Run the React app: Run the following command in the cloned repository directory:
npm start
- Open the app in your web browser by navigating to
http://localhost:3000
- JavaScript
- CSS
- HTML5
- React
- React Router
- Cypress
- GitHub
- GitHub Projects
- Putting together newly learned technologies of React, Router, and Cypress testing to showcase all of my learning this module
- A beautiful app that is deployed and usable!
- Time constraint: This project was built in the span of less than a week
- Cypress testing: It takes a bit of time to do robust testing