Recipe Saver

Inspiration

I thought it would be useful to have a dedicated virtual space for jotting down recipes (instead of a regular notes app) and for searching new recipes at the same time.

What it does

Recipe Saver makes it easy to manage recipes and find inspiration with an integrated search feature.

The core functions include:

Creating, editing, deleting recipes
A rich text editor for all your formatting needs
Option to upload a photo
Pin recipes to top of board
Search from a recipe database and save recipes

How I built it

Built with React, JavaScript, and styled with CSS
Utilized React Quill to incorporate a rich text editor
Recipe search feature powered by Edamam API
Managed authentication and user data through Firebase

Challenges I ran into

Persisting recipe data when switching between the saved recipes page and the recipe search page
Figuring out a format for displaying recipes that is visually appealing and intuitive
First time incorporating any form of authentication and determining what to use
Ultimately using Firebase and spending more hours trying to figure out how to save user recipes and images to storage

Accomplishments that I'm proud of

As of now, this is the largest project I have taken on and I am proud of myself for persevering to create a finished product. The concept I had envisioned in the beginning stages came to fruition.

What I learned

I learned that it is important to plan early. I added components as I went along which made it difficult to incorporate changes so that it would fit with the existing structure. I have experienced the pain and satisfaction of debugging and learning a new technology.