Cocktail Search App that let's you search & filter for cocktails built with React.
This project was bootstrapped with Create React App and The Cocktail DB API.
Version 1 is now live! There is still a lot of work to do on this baby. Some stuff I want to implement are
-
Add Search functionalitySearch functionality added!
-
Create more filtersAvailable ingredients filter added!
-
- Always more room for refactoring!
Version 2:
-
- Added more filters to the Available ingredients. Users can now filter by Drink Type, Category and Glass Type.
TODO:
-
- Add Popular cocktails page
-
- Add Most Latest cocktails page
I'm open for contributions to make this app better! Feel free to take a look under the Issues tab and take a stab at one. If there are no current Issues, you can definitely add some ideas/suggestions for new features!
For people who contribute from now up until the end of this year (Dec 31), I will get in contact with you all and I'm gonna let you folks decide what domain name to get for this app!
When you contribute, be sure to edit this README file and add your name to the bottom of the list.
The format should be:
{ Name }, { Title }, { Favorite Drink }
Examples:
Arely Miramontes Rodríguez, Software Engineer, Margarita
Cersei Lannister, Queen of the Seven Kingdoms, Wine
Jane Doe, Student, Orange Juice
In order to run the app, you'll need to edit the configStart.js file and rename it to config.js. My gitnore file will automatically hide that file if you decide to add your own API Key. Right now it has privileges of a normal developer for the API. You can use my app normally with this, but you will not be able to access the Available Ingredients feature of my app since that requires a paid API key.
If you wish to have access to Available Ingredients, you can simply buy one for $2/month on TheDataDB Patreon's Page. When you are given your key, simply find the '1' in the API_KEY in the config file, and replace it with your key, and be sure to change the API_ENDPOINT to '/api/json/v2/'.
npm install
Installs packages needed to run this app.
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
npm run build
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
- Arely Miramontes Rodríguez, Software Engineer, Margarita
- @eynglv