Hey Abs,
An awesome design mate! Really clean, modern colour palette - the colours compliment each other really well! I also like how you re-position the cards when the search filter is applied. Your code is generally really clean and you've done a good job of destructuring your props also. Searchbar working as expected also which is great!
Some pointers to improve:
Site
- Need to fix the responsiveness - Navbar is hidden underneath the Beers. (see below)
![image](https://user-images.githubusercontent.com/58428511/146377223-bc73c113-63c2-40d7-bf59-d6aa74430784.png)
- More info button doesn't do anything - Consider adding some functionality to flip the card or use routing to redirect to an index page with more information about the beer. Otherwise remove it.
- Filters aren't working - Again if you can get these working that would be fantastic!
Code
- Remove unused code and console.logs
- Be careful with some of your variable and function names - showData is a bit too vague for me. What data is being displayed? showBeers sounds a bit more intuitive.
- Again singleBeer would make sense if we returned just a singleBeer but actually we can still return more than one when using the search Input.
const singleBeer = showData.filter(beer => {
const name = beer.name.toLowerCase();
return name.includes(searchTerm)
})
// Better Option could be:
const filteredBeers = beersList.filter(beer => {
return beer.name.toLowerCase().includes(searchTerm);
})
- Generally, great use of BEM naming convention. Minor change would be to change:
// From
<div className="beerCard">
<h3 className="beerCard__title">{name}</h3>
</div>
// To
<div className="beer-card">
<h3 className="beer-card__title">{name}</h3>
</div>
- Remove the NavMenu component if you're not using it.
- List lengthy props vertically, e.g.
// From
const Main = ({showData}) => {
const beersArr = showData.map((beer, index) => {
return <Card key={beer + index} name={beer.name} image={beer.image_url} tagline={beer.tagline} abv={beer.abv} info={beer.description} />
});
return (
<div className="main">
{beersArr}
</div>
)
}
// To
const Main = ({showData}) => {
const beersArr = showData.map((beer, index) => {
return <Card key={beer + index}
name={beer.name}
image={beer.image_url}
tagline={beer.tagline}
abv={beer.abv}
info={beer.description}
/>
});
return (
<div className="main">
{beersArr}
</div>
)
}