It’s been a year since the COVID pandemic changed the world as we knew it. In terms of our social lives, we all stayed home a lot more, which was generally good news for us introverts—at first. Now, as more and more people are getting vaccinated, it’ll soon be time to emerge from our homes and venture out into the light.
With BrewTalk, craft beer-lovers can search for a brewery to visit IRL by name or city and view results from the Open Brewery DB API. Then, they can generate and save dad jokes from the Random Dad Joke API and come prepared with a G-rated, crowd-pleasing dad joke to help ease them back into having a social life in person again. Finally, they can get directions to their selected brewery in Google Maps with the Google Maps API. The project specifications can be found here.
- Demonstrate mastery of: React, Router, Asynchronous JavaScript, & End to end testing with Cypress
- Work within constraints to deliver a product for a niche audience, which helps solve a problem unique to them.
- Create personas and user stories to describe a target audience.
JavaScript, React, React Router, RESTful APIs, Cypress, Travis CI, Local Storage, HTML, CSS
To run locally:
- Clone down this repo
npm install
npm run start
Search for a brewery directly by name or browse breweries by city. Click "Select" to commit to going to that brewery, which will allow you to get directions to it in Step 3. If you're afraid of commitment (or if you simply change your mind), you can unselect the brewery to go back to the search results, or start a new search.
Under the Hood
Onenter
, a fetch
is made to the Open Brewery DB API search endpoint. Individual brewery cards are rendered with the data received.
Click the "Generate dad joke" button to generate a random dad joke. If you want to find another dad joke, simply click the "Generate dad joke" button again.
Under the Hood
Onclick
, a fetch
is made to the Dad Jokes API random joke endpoint. A joke card is rendered with the data received.
If you like a joke, you can click save to add it to your saved jokes. You can visit the Saved Jokes page to view all your saved dad jokes and remove them if they didn't hit right with your audience.
Under the Hood
Saved jokes are also saved tolocalStorage
so you can come back to them later.
Now that you've selected a brewery to go to and saved a dad joke or two, you're ready to go be social! Hit "Get Directions" to get directions to your selected brewery in Google Maps. Remember, you can always access your saved dad jokes on mobile, in case you want to brush up on them during the Uber ride there.
Under the Hood
The brewery name is interpolated into the Google Maps API endpoint so that user is taken directly to that location page in Google Maps.This app was built with all users in mind. I used Lighthouse and WAVE to work towards including as broad of an audience as I could. Of course, as I am committed to including all users, I am ready to make future edits to address any areas that I may have missed.
- Allow users to save breweries
- Bring in the Open Brewery DB autocomplete search endpoint
- Allow users to search dad jokes so they can have a conversation starter on a specific topic when they visit a brewery
Tashia Davis GH |