Skip to content

tashiad/brewtalk

Repository files navigation

BrewTalk

For introverted craft beer lovers who need help being social again in a post-COVID world.

Table of Contents

Introduction

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.

Motivation & Goals

  • 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.

Technologies

JavaScript, React, React Router, RESTful APIs, Cypress, Travis CI, Local Storage, HTML, CSS
Build Status


Deployment

Deployment Link

To run locally:

  1. Clone down this repo
  2. npm install
  3. npm run start

Features

Search Breweries

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.

Homepage

Under the Hood On enter, a fetch is made to the Open Brewery DB API search endpoint. Individual brewery cards are rendered with the data received.

Generate A Random Dad Joke

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.

Generate a dad joke

Under the Hood On click, a fetch is made to the Dad Jokes API random joke endpoint. A joke card is rendered with the data received.

Save A Dad Joke

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.

Saved dad jokes

Under the Hood Saved jokes are also saved to localStorage so you can come back to them later.

Get Directions

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.

Get Directions

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.

Accessibility

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.

Future Improvements

  • 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

Author

Tashia Davis GH
Ms. Davis

About

Solo project for a niche audience built in 5 days. A React app for introverted craft beer lovers who need help being social again in a post-COVID world.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published