After completing the Full-Stack path, I felt I needed more practice, especially with React, so I started the Front-End path and reviewed all the lessons. This project was new to me (not part of the Full-Stack path). It’s so satisfying to be able to create a React project from scratch!
This was fun to do, and I had no problem doing parts 1 to 3. For part 4, I had to look at the solution a little. I wouldn’t have been able to figure it out on my own. Getting there… The solution code uses promises, and I used try…catch instead, so it was a little hard to resolve my problems using the solution code, but I figured it out.
I hid my API key using .env, which the class doesn’t cover. I had to research how to do it. I learned it in my back-end class, but I didn’t know how to do it in just front-end. It was easier than I thought.
I changed the code to load initial results using “food” as a keyword and “US” as a location, just to get started and show what the app does (looks better than a blank page).
I added an error message when the user types an invalid location (for example, all spaces, or numbers/symbols) and the app doesn’t return any results. I still have to create a test suite and address other possible errors, but didn’t get to it yet.
Here is my completed project on GitHub: https://github.com/AnnieMcMahon/ravenous
And the live version on Netlify: https://ravenous-api-annie.netlify.app/
Let me know what you think!
Annie