Full Stack Project Tutorial | Build a Recipe App for your Portfolio using React Node & PostgreSQL

🔍 LINKS
- ElephantSQL (Postgres DB)

🎥: Chapters
0:00 What we'll build
0:44 Architecture
2:39 Setup Backend
13:39 Setup Database and Prisma
19:49 Spoonacular Setup
25:39 Create Search Endpoint
44:16 Create a React App
48:59 Display Search Results on UI
1:10:19 Search Input and Recipe Card Component
1:18:23 View More and Pagination
1:27:24 Summary Modal & Summary Endpoint
2:02:35 Favourites Endpoints
2:26:15 Add Favourites Functionality to UI
3:13:29 Styling
---

🚀 **Full Stack Project Tutorial: Recipe App** 🚀

🔍 **What you'll learn:**
- Setting up a React frontend with interactive components.
- Integrating PostgreSQL for reliable data storage and retrieval.
- Implementing CRUD operations.

🔧 **Technologies & Tools Covered:**
- React
- PostgreSQL Database
- JWT Authentication
- RESTful API Design

Whether you're a beginner looking to dive into full-stack development or an experienced developer aiming to expand your skill set, this tutorial is tailored for you. By the end, you'll have a fully functional Recipe App ready to be added to your portfolio or even launched for public use!

Don't forget to **LIKE**, **SHARE**, and **SUBSCRIBE** for more tutorials and tech content! Drop your questions and feedback in the comments below. Happy coding! 🚀

[ChrisBlakely]

If anyones having an issue with API_KEY not found, heres a few things to try:

- Make sure the .env file is in your backend folder, and named properly e.g `.env` (easy to forget the full stop at the start)
- make sure the API_KEY variable is correct in your .env file, no spaces etc
- You can try moving the variable into each function individually to see if that works

If none of that helps you can just paste your API_KEY into the code to get over that blocker and continue with the tutorial. Be careful to avoid checking this into Git though!

[ChrisBlakely]

Thanks for watching! Should I make a discord server? Comment or Like if you agree 👇

[myelibrary]

I’ve just found another guy who explains difficult concepts in an extremely clear way. Chris is right up there with my other two favourite developers, Kyle from web dev simplified and net ninja . Keep those videos coming 🎉🎉

[durgfestivalvibes]

1 hr done, and I would say explanation is so simple and easy to understand!!! Thanks!

[shilpas]

Thank You so much for this project. It helped me understand about the overall flow between frontend and backend. Subscribed. Is it possible for you to make a small video on how to deploy this to netlify or some other platform?

[fightscene]

Outstanding project! Thank you. Could you please consider working on NextJS projects in the future?

[blpxbdt]

Great job Chris. Learned a lot from this. By the way, is there a chance you would be able to demonstrate how to deploy this to production like in platform such as Render or Cyclic perhaps?

[SaintHanappi]

Absolutely amazing. As a newbie in tutorial-hell I am happy i "found" your content. THANK YOU.
Abo 🔛

[seriousy_un-pithy]

Would you mind putting a list of the packages you need to have installed before starting this? IE Node, TS, etc. I was finding myself having to stop every 30 sec in the intro in order to install, verify and keep going. I think I am good now, but it might help the next learner.

[matthewkk]

what a great project I would create it in angular. looks good <3

[Sanjanaa.b]

I've tried all possible ways that you mentioned regarding API_KEY not found issue,

- .env is in the right folder with the right name
- API_KEY variable is correct without any spaces
- tried placing process.env.API_KEY in place of apiKey everywhere

but still not working and when I tried to console the API_KEY value, it is showing as undefined. is there any other resolution for this as I see many are facing the same issue.

[FacelessYT]

Does anybody have an issue with signing up with the spoonacular api and éléphant sql is no longer active

[regilearn]

Wow this is awesome. I would like request a project that use backend micro-services and frontend micro-frontend using MERN stack, bcz now a days most of real world production app use this architecture. please consider mate.

[vatansrivastava]

Don't forget to use authentication in your upcoming videos. This tutorial feels incomplete without auth

[Abogida]

Hi Do you notice that ElephantSQL will stop its services as of January 2025, and before that they will not accept a new users as of May1, 2024,

[dystopian_]

You are awesome friend! Please make another project of an Ecommerce site.

[kiarieray]

Awesome tutorial. I've learned a lot. Thanks!! This might be silly question, but how did you deploy the app with both the backend and frontend to Github pages.

[deepsamanta]

How to resolve error 404 while executing till the part explained in 1:09:00

[DualHellGunz]

Hi, i have a problem within the backend folder where in the recipe-app.ts, the 'process' cannot be found, generating an error

[kitembe]

Can I free host this? say using netlify?