Ravenous Part 1: Creating Project & Components

Congratulations on completing your project!

Compare your project to our solution code and share your project below! Your solution might not look exactly like ours, and that’s okay! The most important thing right now is to get your code working as it should (you can always refactor more later). There are multiple ways to complete these projects and you should exercise your creative abilities in doing so.

This is a safe space for you to ask questions about any sample solution code and share your work with others! Simply reply to this thread to get the conversation started. Feedback is a vital component in getting better with coding and all ability levels are welcome here, so don’t be shy!

About community guidelines: This is a supportive and kind community of people learning and developing their skills. All comments here are expected to keep to our community guidelines

How do I share my own solutions?

  • If you completed the project off-platform, you can upload your project to your own GitHub and share the public link on the relevant project topic.
  • If you completed the project in the Codecademy learning environment, click on “Tools” and use the create a gist button, and then share that link here.

Do I really need to get set up on GitHub?
Yes! Both of these sharing methods require you to get set up on GitHub, and trust us, it’s worth your time. Here’s why:

  1. Once you have your project in GitHub, you’ll be able to share proof of your work with potential employers, and link out to it on your CV.
  2. It’s a great opportunity to get your feet wet using a development tool that tech workers use on the job, every day.

Not sure how to get started? We’ve got you covered - read this article for the easiest way to get set up on GitHub .

Best practices for asking questions about the sample solution

  • Be specific! Reference exact line numbers and syntax so others are able to identify the area of the code you have questions about.

Here is my code: https://github.com/AnnieMcMahon/ravenous

My SearchBar code doesn’t look anything like the solution. I don’t see the need for creating an object, then iterating through each key. Why not just hard-code the list items since there are only three of them and they always going to stay the same?

I feel like this class has not taught me all I need to know yet to do it the same way as the solution does, or to even understand the solution. Did I miss something?

I love that this project was done from scratch instead of having starting code like some other Codecademy projects. It gives me valuable experience in creating apps and I can use the latest technology. Enjoying the project so far.


I agree, can someone explain the iteration through object keys?

1 Like

I uploaded my project for part#1 here:

The project uses functional components instead of class components.
I mainly used React Bootstrap to style my page. After learning basic react, using React Bootstrap was really easy.
Maybe add this to the learning path? may be useful for others.

Kinda already added props, before Part 2. Will edit based on Part 2 instruction later.
Also was a little bit confuse about how extensive we add to do the Yelp API section, so i added a fetch call that is unused.

Last thing, I’m currently learning about props and states.
Any reasons why we are learning this.state? instead of state hooks?
Could that be added as a learning after the This.state lesson?

Here’s some reference for people who kinda did everything in function, and don’t want to re-write their function to classes to use states in their ravenous project.

I also hard coded them.
Still made the array for later use by the Rest Call.

I found this hugely challenging. Partly because a lot of what I think I’m supposed to know in order to achieve this wasn’t covered in the course up until this point.

I honestly tried my best to research what is needed. Example - I wanted to push the results of Business into an array, but much of what I was looking up was foreign to me based on what we’ve covered up until this point.

So ultimately I downloaded the CodeAcademy solution to compare what I already had - the searchBar.js file had tonnes of content that I simply had no idea about.


I agree!! Especially asking us to connect to an API with no information on how to do so. This is actually a really challenging thing to do in itself/ requires an entire lesson. I say this as someone who has done a diploma in front end dev and thought that doing this course would be a good refresher…

Here is my code: GitHub - AdantaGriffin/ravenous

Part 1 was was so challenging but rewarding upon completion. After 3 days of redoing the project I was finally able to complete and understand under 40 mins. All results are different so try to understand a result then make it your own otherwise you’ll be confused by the many different results. If your having trouble with the project , I copied the provided CSS code which helped me structure/format the page by following the format in the CSS file.

Couldn’t agree more. I’m only just getting stuck into it now, following Mariana’s version every step of the way. I’m recognising lessons within her code, but I reckon the instructions (or at the very least, the hints) deserve far more information packed into them!

1 Like

My code using @mui

Hi friends!

I am giving myself a refresher and I’ve started working through Ravenous. I am very big on semantics, simplicity, and accessibility, so I’ve incorporated some of those elements into the code.

Feel free to browse my code here:

I’ve also set up GitHub pages so you can view a part 1 demo.

Happy coding!

hier ist my Code LearnProgrammingAtInternship/Codecademy/BuildWebAppsWithReact/ProjectRavenous/ravenous at main · MustafaDemiroglu/LearnProgrammingAtInternship · GitHub

this ist just Part 1 :grinning:

it lokkks much better then meins. puahhhhh. perfect