Drink This
Live at
Check out the app on Heroku Explore the backend repo
Drink This provides cocktail recommendations using a memory-based approach to collaborative filtering. In the front end of this app, we use React in concert with TailwindCSS to provide a clean feel. Movement between pages is smooth and seamless, as opposed to rendering views that may take time to load. Another look and feel to this is the frontend interaction with the backend. We displayed simple thumbnails of the cocktails consumed from the CocktailDB API from the backend.
Check out our Wiki for more info.
Local Setup for Developers
- Fork and Clone the repo
- Install packages:
npm install - Starting on Local:
npm run start - Building the project:
npm run build
React / JS Version
- React 17.0.2
- Node 16.3.0
Package Manager Version
- NPM 6.14.12
External APIs
Internal APIs (consuming the backend
Cocktail Showpage:
Consuming cocktail recommendation from backend on /api/v1/cocktail/recommendation
Consuming cocktail details from backend on /api/v1/cocktail/#{cocktail.id}
- Includes: Name, image, recipe (ingredients and measurements), directions, user rating (if applicable)
-
Requires a
cocktail_idparameter
Create or update a user cocktail rating
Posting a new rating on the backend database /api/v1/cocktails/rating
- Requires
cocktail_idandstarsparameters - Stars parameter must be an integer from 1-5
Display 5 random cocktails for new user to rate
Consuming random cocktails for a new user from the backend on /api/v1/dashboard
Search cocktails by name
Consuming a list of cocktails by search from backend on /api/v1/cocktails/search
-
Requires a
nameparameter with a string or string fragment to search
Search Yelp for locations to find a specific cocktail
Consuming a list of businesses using yelp search from the backend on /api/v1/search/yelp
Testing
Tests with Jest
To Add changes
- Create PR
- Add the PR to the Drink This Frontend project
- Link any issues to the PR and use the PR template provided
- Add Authors as Reviewers