I created this recipe site with React, JSX, and an API. this project served as a means to practice using APIs in combination with React. I followed a tutorial by developedbyed on Youtube to learn and made modifications for responsiveness.
I used Spoonacular as my API. You can make a free account here: https://spoonacular.com/food-api/
- Access the API from your API console --> API Key
- Pro-tip: Copy/Paste the API Key into a .env file as API_KEY=your_api_key_here <-- Always use UPPERCASE to name the key, this will protect the key on the interwebs
You will need node installed, then create react app
npm create-react-app project_name- React & JSX
- Styled Components
- API
- React Icons
- Git & GitHub
- Use Effect & Use State
- Local Storage
- Navbar with Searh and Category Components
- Animations (Splide, framer-motion)
I built this site as a weekend project to develop skills with React and using an API. I followed a tutorial on Youtube by developedbyed to practice.
Originally I wanted to build a recipe blog, utilizing the blog skills I learned the week prior, but I figured practicing incorporating APIs with React would be a good skill to have.
The main challenge I had was making the site responsive. The tutorial was made for a desktop display, and I wanted a mobile-first responsive design. I decided to build an individual page as the tutorial showed, and then would edit the styling to mobile-first before moving on to the next component. This was a great way to learn how to effectively manipulate the features in styled components as it was my first time using styled components in any project.