egoullaud / react-recipe

Recipe app using Spoonacular API and React

Introduction

React Recipe App!

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.

Getting Started

Get API set up

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

Set up Code Workspace!

You will need node installed, then create react app

npm create-react-app project_name

Technologies and features

• React & JSX
• Styled Components
• API
• React Icons
• Git & GitHub

Features

• Use Effect & Use State
• Local Storage
• Navbar with Searh and Category Components
• Animations (Splide, framer-motion)

Reflections

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.