djava387 / react-app

hey there, nice to meet you

👩‍💻 About Me :

• 🔭 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! 💥

• 📫How to reach me: [](your-linkedin-url

---

🛠️ FullStack :

               

---

🛠️ DevOps :

                 

---

🛠️ Test :

   

---

🛠️ Version Control :

---

react-app's Issues

Feedback

Feedback

Requirements:

1. A deployed website (using GitHub Pages): DONE
2. A public GitHub repository for your codebase: DONE
3. Using Punk API: DONE
4. 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

MARKING-SCHEME

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 the README.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?
      • Markdown in 10mins
  • I would go through these notes and delete the autogenerated icons, links etc.
    • Also update the title in public/index.html

• 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 back
    • beer_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 with fetch
    • 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 :).

---