jasonfritsche / breweryfinder Goto Github PK
View Code? Open in Web Editor NEWFind breweries all over the country
Home Page: https://jasonfritsche.github.io/BreweryFinder/
License: MIT License
Find breweries all over the country
Home Page: https://jasonfritsche.github.io/BreweryFinder/
License: MIT License
The footer element in BrewerySearch should be factored out into a component for reusability. Additionally it should be moved into the App component so it is rendered on all the pages and not just the BrewerySearch page.
Somewhere along the way, the site lost it's responsiveness. The site needs to be mobile-friendly/responsive. I feel like this is a good first issue, but it's open to anyone.
Thanks!
Please reference https://github.com/cdrani/anml/blob/master/CODE_OF_CONDUCT.md.
Email might have to be updated with @JasonFritsche contact instead.
It would enhance the UX if we could implement a bottom container at the main page. This container would be dedicated to display media in a synchronized manner as the current animated text is producing it's text.
Some cases for this issue:
Some answers for the cases:
The navbar at the top of BreweryList looks like this:
Things to fix:
Any other changes you deem suitable will also be considered.
The last button used stays highlighted in black.
I noticed the code differentiates between single and double quotes, semicolons and no semicolons, etc. I believe eslint is already included, but add a fix script so that code is fixed according to eslint's configs.
Additionally, a pre-commit hook would be most effective, preventing commits until there are no eslint warnings or errors.
The Footer component should be displayed across all pages. Currently it is only rendered in the BrewerySearch component.
Move the Footer component out of the BrewerySearch component and into the App component.
To make use of those sweet, sweet hooks. Also could lead to refactor of some components.
Create-react-app ships with Jest. Before implementing CI/CD, this project needs to make use of Jest and implement testing. I will be working on this, but if anyone has experience with testing feel free to jump in.
Everything starting from React Stuff and down is not pertinent to this project - it's all about create-react-app. A simple ci/cd file could run build, tests, and deploy the app automatically which is especially good for pull requests reviews.
I recommend travisci: https://medium.com/@sumn2u/automate-create-react-app-deployment-to-gh-pages-using-travis-ci-b2a97203680b.
/cc @JasonFritsche
Noticed this behavior while playing with souce code and looking at other open issues.
There should not be horizontal scroll on the index page as it is currently constructed.
On the home page, there is horizontal overflow due to the contents of the header area text and typing animations containers. Options for testing limited where I'm currently working but at minimum occurs on the following:
Google Chrome
Mozilla Firefox: 66.0.2 (64-bit)
71.0.3578.98 (Official Build) (64-bit)
Ubuntu 18.04
1920x1080 resolution
Applying a container around the offending items causing the overflow resolves the issue. (PR coming)
This is in reference to jestjs/jest#8050. Currently running npm run test
causes the test to fail because of an issue with jest and node at v11.11.0. This is due in part to [email protected] using an older version of jest. Issue seems to be fixed in next major version of react-scripts.
Will update react-scripts@next tag for now until official major release.
url
does not need to be stored in state. There's no apparent reason for it to be there.
async fetchBreweryData() {
try {
this.setState({ isLoaded: false });
const { searchTerm, searchByParam } = this.state;
const url = `https://api.openbrewerydb.org/breweries?by_${searchByParam}=${searchTerm}`;
const data = await fetch(url);
const jsonData = await data.json();
const cleanData = this.filterResults(jsonData);
this.setState({
isLoaded: true,
items: cleanData
});
} catch (error) {
console.log(error);
}
}
Additionally, isLoaded
could also be replaced with React.Suspense, although there's no real benefit from this change other than not needing to worry about another state value.
The Open Brewery DB API (https://www.openbrewerydb.org/) includes filter/search parameters such as by_city, by_name, by_state, by_type, by_tag. We should find a way to implement these in to the project. Currently the project is only searching by city.
My idea was to include a radio group or checkbox that asks the user if they want to search by city, state, etc. All ideas are welcome.
Brewery does not need to be a class component as it does not make use of state or lifecycles. This is to adhere to react best practices.
Line 38 in 72b3f14
!item.name.toLowerCase().includes('brewery in planning.')
The radio buttons should use tooltips to help describe the criteria. The Type and Tag radio buttons are not useful if people don't know the criteria.
It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files.
In the readme you already state to use npm, therefore the yarn files should be removed
displayResult(brewery) {
if (!brewery.length) {
return (
<h1 className="Kreon-Text text-center">
We couldn't find anything in that location...
</h1>
);
} else {
return brewery.map(item => {
return <Brewery key={item.id} item={item} />;
});
}
}
This text is based on searches by either city or state. It will need to be updated, possibly to something like:
Sorry, we couldn't find a brewery with the ${searchBy} of ${searchTerm}. Please try again with a different search filter perhaps.
App should pass down searchBy and searchTerm props to BreweryList.
NOTE: This should wait until #21 has been merged with the additional search options.
This project is currently using the Slate theme from Bootswatch. The CDN is linked in the index.html file. This doesn't necessarily need to be changed. Please feel free to submit any ideas that you have for updating the styling of the project.
Currently the four RadioButtonContainer's are just copied four times, with each one only having a single change - the searchBy parameter. This could be refactored using a map with an array of the searchBy paramters: ['city', 'state', 'name', 'type']
Currently, if nothing is entered in the search input, and the user presses enter or clicks the button to search, a search is not performed. This behavior is fine. However, a message should be displayed that tells the user that the search bar cannot be empty.
This can be a modal that pops up, or a paragraph or heading tag that is hidden, and then is displayed for maybe 3 or seconds. The message should say something like "Search cannot be empty" or "Please enter a search term", or something similar.
This is an enhancement feature. Once on the list of breweries, we should be able to click on any of the breweries for more details. This new component would show the details, and a map (possibly Google Maps).
Let me know your thoughts, or if you want to take this one.
/src/components/Brewery.js
Brewery.propTypes = {
brewery: PropTypes.objectOf(PropTypes.string).isRequired
}
brewery
is not just an object of strings, as it's id
value is of type number
. Therefore we should change it to type any
to allow both value types of string and number.
Brewery.propTypes = {
brewery: PropTypes.objectOf(PropTypes.any).isRequired
}
It would be a feature that would allow reading registered fields city, state, name, type
to autocomplete based on predictive text. For example, Sacramento has 31 places in the world with similar names, according to names similar to Sacramento. I'm thinking that state would fall under the same category, but for name and type that would be based on our database and which beer names and beer types we have.
This project is currently using the Slate Bootswatch theme. https://bootswatch.com/slate/
Is Swatch a combo of Slate BootSwatch? Should it be changed to just Slate Theme?
There's a beer mug image or vector in the public folder which might be suitable to use as a favicon for the app. Other alternatives are also acceptable as long as they are similar in theme to this app.
The brewery info cards currently look like this:
I think it should be better suited that the buttons should be side by side as it would look better.
Changes to consider:
Any additional changes you deem fit will also be accepted.
It's not a big deal, as the current routing implementation works, but to adhere to the convention, I would suggest using react-router-dom instead of the current diy routing configuration.
The useState hook is being used to keep track of which page to render. The state shouldn't need to be used to control page routing. Additionally, props and functions are being passed around to switch/reroute pages.
Remove all useState hooks and props relating to routing/pages and replace their functionality with react-router-dom. This will clean up the codebase and make it easier to test some of the related components.
The site needs a simple favicon now.
Currently if you click or press enter with no search parameter in the search input, you will get results. We should implement a check, if no search parameter is entered...don't let a search happen, else, let the search happen. This seems like a good first timer issue. Have fun!
Enter key press while focused on search input should also submit form.
The steps should be more verbose, especially for beginners trying to set this project up. Most of the steps should be able to be copy and pasted to terminals.
Please reference this: https://github.com/JasonFritsche/rebus/blob/master/README.md
It seems this anchor tag:
<a
className="btn btn-block"
target="_blank"
rel="noopener noreferrer"
href={websiteUrl}
>
Check Them Out
</a>
is being duplicated a few times and should be made a component. It should be able to accept the following props:
import React from 'react'
const Anchor = ({ children, classes, url }) => (
<a
className={classes}
target="_blank"
rel="noopener noreferrer"
href={url}
>
{children}
</a>
)
export default Anchor
After creating the component all references of the html anchor tag should be replaced with the Anchor component with the appropriate props.
As the project is still in its initial stage.I think its better to go for a more flat material inspired design than a page with a background image.Plus it's look more flashy right now.Like for the light background image you had to pop up the title text color with a flashy white color which does not look very good.So these are the few things on design, i suggest :
When the page first renders, there's a network request to the brewery api even when a user has yet to enter a search term. This is unnecessary and could prove to be an issue if the api has a rate limit. Additionally, the api by default returns an array of objects regardless if parameters are provided.
There should not be an api request on first load.
Prevent the api request altogether at first load. In the useEffect
hook in App.js make this change:
- const searchChanged = searchTerm !== prevSearchTerm
+ const searchChanged = searchTerm && searchTerm !== prevSearchTerm
Please check the Network tab on page load to see that there's not a fetch request when the page first loads.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.