tristandenyer / brewery-search

A brewery search app using the Open Brewery DB

Brewery Search

A brewery search project using the Open Brewery DB, Axios promise based HTTP client and Bootstrap.

A work in progress demo can be viewed here: https://tristandenyer.github.io/brewery-search/

You can also import a version of this as a collection in Postman, and view the response using the Visualizer feature.

An Open Source project for first-timers and non-techincal

This is now an active open source project with the mission to be an approachable project for first-timers, designers, and non-technical contributors. Your time and feedback on this is very much warranted. I want this project to be an open collaboration, and approachable so people new to Git, GitHub, Git flow, PRs and whathaveyou are willing to come work on it and get their feet wet. THAT approachability is more important than anything else with the project.

The other reason is to help me get my feet wet on being an Open Source project owner.

All feedback is welcome.

Goals of this project

To keep our little project from getting too bloated and heading into the weeds, here are some acceptance criteria:

• we are using the Open Brewery DB, please read the very short docs to understand the capabilites and limitations of the data we get from their endpoints.
• I want to be able to search for breweries by keyword and see a list
• I want to be able to discover breweries
• I would like the search results to be clear, easy to scan, and allow for me to click thru to their website and or a map for directions.

Suggestions for features and enhancements that support those basic user needs are welcome--just make an issue in the Issues tab above and explain your idea and how it helps.

Important

Before you make a pull request, please comment on the issue saying that you would like to work on it. That way, we can avoid duplicate PRs and a first-timer can have enough time to work on this.

FYI: there is a great write-up on how to work on this type of project and make your first PR here

Designers are welcome! A PR doesn't necessarily have to be code. You can use the comments section to suggest design changes. If someone else would like to work on it, they may take your designs and implement them. Collaboration is awesome!

Features

• search for terms to get back a list of cards showing breweries in the U.S.
• sort results A-Z, Z-A, or group by brewery type
• color coded brewery types
• highlight text you searched for in results
• address and link to a map
• storing keyword highlighter state in session storage

Future features, maybe

• filter by brewery type
• filter by state (though you can just search for state name)
• map with pins showing breweries
• a list of my last 3 searches that I may click on to re-run that search (sessionStorage)
• a list of 3 suggested searches that I may click on to quickly run that search
• contributors section, because I am stoked you all want to help work on this!

brewery-search's Issues

Fonts are boring—let's update them!

The current fonts used are basic, and don't really convey much personality that goes with the context of a brewery search site.

Using a fast-loading font, or fonts, from Google, let's add some personality to the site!

@CCekla made some font suggestions in #15, breaking it out into a separate issue/ticket to make it smaller.

If you want to work (or are working) on this issue, be sure to leave a comment here so others know.

Minor style suggestions and geoloc. search

Hi,
I'd like to pitch some ideas regarding the styling.

• Different font combination. Maybe a slab serif for the h elements (like Rokkitt from google fonts) and a serif (like Open Sans or Roboto) for the other texts. Slab serifs give that touch of retro that I thinks pairs well with beers. The current font is not bad btw, but maybe it's a little "default-y".

• Moving the "hide highlight" button. On mobile appears just above the search results and below the "we found" statement.

• For the .card-link elements. Dropping the default blue color and maybe using the underlined text as cue for clickable element. Or maybe even making them buttons with a font icon instead of the text.

• The OpenBrewery docs have a little icon in the browser tab, I think it would be nice also for the app to have one instead of the default image.

Again these are suggestions I would made, say, to a friend showing me his project: the app is totally fine!
I also came up with a different landing page, I really don't want to be disrespectful, I just have fun doing basic css and your project gave me the inspiration, so it's just for "sport". Totally ok if you're fine with the current one (btw, the hero animation is very cool!).

Then I noticed in the docs that the json call returns also the coordinates (well of course you also put a "map" link!), would it be useful to sort the results also by proximity to the user?

Hope I haven't bored you o wrote something wrong.
Thank you for your patience.
CC

Missing favicon

We need to design, implement and test a favicon.

design

Something simple that connotes "brewery search". Can just be a beer mug, or hops, or ?

implement

I highly recommend using the https://realfavicongenerator.net/ to get a robust and bulletproof list of meta tags and image assets to control how the favicon appears across devices. (One meta tag is not enough these days.) Once the design is made, simply upload the image and walk through the options on the next page. Vast majority of it is self-explanatory, but feel free to reach out here if you have questions.

test

Once the favicon assets (there will be a lot) and the meta tags (equally a lot) are implemented, you can test that they work locally by showing up in the browser tab. Then we need to push it master branch which in turn pushes it to https://tristandenyer.github.io/brewery-search/. There we can runn that url through https://realfavicongenerator.net/favicon_checker to test that all the assets and meta tags are implemented correctly.

Thanks for spotting this @CCekla! (Broken out of #15 to make smaller.)

If you want to work (or are working) on this issue, be sure to leave a comment here so others know.

Improve color palette

This request is for

[x] Beginners
[x] First Timers
[x] Non-Coders (Designers welcome! We are looking for better colors here.)

I'm submitting a...

[ ] Bug report
[ ] Feature request
[x] Enhancement on design/UI

Current behavior

The demo can be viewed here: https://tristandenyer.github.io/brewery-search/

The hero area (top) is a beer-colored gradient, while the tops of the cards (do a search!) are just some random pale colors assigned to each of the following brewery types:

• Micro
• Contract
• Brewpub
• Large
• Regional
• Planning
• Proprietor

Expected behavior

Choose better colors for the hero area and tops of cards.

Important

Before you make a pull request, please comment on the issue that you would like to work on it. That way, we can avoid duplicate PRs and a first-timer can work on this.

FYI: there is a great write-up on how to work on this type of project and make your first PR here

Designers are welcome! A PR doesn't necessarily have to be code. You can use the comments section to suggest colors or design updates to the hero area and tops of cards. If someone else would like to work on it, they may take your color choices and implement them. Collaboration is awesome!

Why is this an issue?

A couple reasons. One is that I want to support the first-timers-only label, by offering up an approachable issue that I really need help with.

Another is that I have never been on this side as an OSS project owner, and would like to get my feet wet.

Add Ability to search by state

It would be cool to be able to find breweries by state.