-
🔭 I bring cutting-edge tech skills to the table, honed through training and personal projects
-
🌱 Exploring, researching and technical writing.
-
⚡ In my free time, I'm always on the lookout for the latest advancements in technology and love experimenting with new programming languages
-
👀 So, come take a peek at my GitHub profile and see for yourself how I can bring my passion for technology to your team! Whether it's working on cutting-edge projects, experimenting with new technologies, or sharing my knowledge with others, I'm always up for a good challenge. Let's work together and build something amazing! 💥
react-app's Introduction
react-app's People
react-app's Issues
Feedback
Feedback
Requirements:
- A deployed website (using GitHub Pages): DONE
- A public GitHub repository for your codebase: DONE
- Using Punk API: DONE
- Tests where possible RTL: NOT DONE
Plan
-
Start: ALMOST DONE
- Matching component tree & passing props?
- You are missing a couple of components. I understand that it may seem overkill to have the
<Main/>
,<FilterList/>
and<FilterItem/>
components and it probably is with an application this size.- The reason why we have them in the brief is to force you to pass data with props. It is important to understand that you can get props through multiple components. From top to bottom.
- I am confident with your understanding of props as you have demonstrated it by getting values from the
<App/>
to the<NavBar/>
to the<SearchBeer/>
. - When you have some time try introducing the
<Main/>
,<FilterList/>
and<FilterItem/>
components. - Try introducing a containers folder, and start to break up your components.
-
Stage 1: DONE
- Search functionality?
- This extension aims to get you using functions as props. Which you have done, nice one!
handleSearch()
in your app is being passed through multiple component levels to your<SearchBeer/>
component (great name btw). That component is using the function to capture the user input and store it in the App State.- You are then able to use the value for your
filteredBeers
variable. Nice one!
-
Stage 2: DONE
- Filters x 3?
- Brilliant, you have knocked it out of the park with this one!
- I like that you have separated your state for individual filters, meaning you have clearly labelled functions to handle them changing. When they change it triggers a refresh meaning you can run your
useEffect()
or do your filtering.
-
Stage 3: DONE
- Styled?
Score
Category | Score |
---|---|
Functionality | 40 / 55 |
Testing | 0 / 10 |
Project Structure | 10 / 10 |
React Use | 15 / 20 |
Design | 10 / 15 |
Total Score | 80 / 110 |
Positive
-
You have multiple functions and bits of data being passed across your application to the components that need them using props!
- It is a different way of structuring a project but I can see you have a good grasp of it.
-
You are utilizing the power of query params to do your filtering for you!
-
I love the star rating toggle you have implemented, keep on thinking of features you can add to this project :D!
- Instead of starting at 0, could it be a random number?
- Good use of the randomizing you did in the previous project.
-
You have hooked your project up to an API!!
-
I feel confident with your understanding of props, useState, useEffect and funcs as props.
-
Awesome, good going! it is a big project and I can't wait to see what you build next.
Constructive
-
There are only a couple of things to fix asap:
- Delete the
README.old.md
, and Update theREADME.md
with basic information about your project.- Delete the auto-generated text from creating react app.
- What was the brief? What is the link to the live site?
- I would go through these notes and delete the autogenerated icons, links etc.
- Also update the
title
inpublic/index.html
- Also update the
- Delete the
-
The points below are just things you should fix when you get a chance.
-
Have a go at adding the components mentioned above.
-
Have a look at the docs & at some of the query params you have access to
per_page=
-> Would allow you to specify how beers you get back. You can get more than 25 backbeer_name=
-> Would let the API search for you rather than you filtering the results you have back.- This means you will get more back.
-
I think you will benefit from watching the React testing Recap
- There are some tests there that you will be able to implement in this project :D
-
React is not opinionated meaning it can be written in different ways.
- Personally, I prefer
async
await
syntax when working withfetch
- I also prefer putting it into functions that you call.
// App.jsx const getBeers = async (alcohol, classic) => { let url = "https://api.punkapi.com/v2/beers?"; if (alcohol) { url += "&abv_gt=6"; } if (classic) { url += "&brewed_before=01-2010"; } const response = await fetch(url); const beers = await response.json(); setBeers(beers); }; useEffect(() => { getBeers(highAlcohol, classicRanger); }, [highAlcohol, classicRanger]);
- You don't have to do it this way I think it is good to see the alternative ways of doing things :).
- Personally, I prefer
-
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.