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

[@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!

[@aminebenchouche6316]

Hi, I had an issue with API_KEY and this line of code inside recipe-api.ts file resolve this issue require('dotenv').config();

[@jakobfrederikson5808]

Hi everyone, I made sure to be in the backend/ folder and then installed dotenv with this command: npm i dotenv I then used import "dtoenv/config" at the top of both my recipe-api.ts and index.ts files.

[@soujnyaar5560]

​@@jakobfrederikson5808Thank you

[@danielcastillo289]

adding the import "dotenv/config" line above the import * as RecipeAPI in the index.ts file was what fixed it for me. Hope this helps.

[@sean_thw]

@@danielcastillo289 thanks:)

[@ChrisBlakely]

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

[@sean_thw]

please do!

[@THEMEATMISSLE74]

Did you ever end up making a discord server?

[@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 🎉🎉

[@ChrisBlakely]

Wow thanks for the awesome feedback ! And thanks for taking the time to watch, see you in the next one !

[@durgfestivalvibes]

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

[@shilpas9515]

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?

[@ChrisBlakely]

Thanks for watching! In my next video I will show how to deploy a fullstack app, the video will be ready in a week or so. I am using Render, which is a good free option to look into

[@shilpas9515]

@@ChrisBlakely Thank you so much. Looking forward to it :)

[@fightscene817]

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

[@ChrisBlakely]

Yep! its on my todo list 😀

[@fightscene817]

champion@@ChrisBlakely

[@ajeigbejohnoluwaseyi8458]

Great job Chris!

[@mahendranath2504]

Nice thank you, liked and subscribed

[@nachiketgomkale5400]

Deployement part is missing

[@ChrisBlakely]

Deployment isn’t part of this tutorial

[@SaintHanappi]

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

[@ChrisBlakely]

Thanks so much for the amazing feedback, I’m glad you found this helpful ! See you in the next one !

[@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.

[@ChrisBlakely]

try installing dotenv package and import it in index.ts

[@Sanjanaa.b]

@@ChrisBlakely thanks! Importing dotenv worked.

[@afif8488]

@@Sanjanaa.b I have this same problem, can you explain how to import the dotenv?

[@ChrisBlakely]

From the backend folder, you can do - npm i dotenv - then, in the index.ts file, at the top add `import "dotenv/config";`

[@afif8488]

@@ChrisBlakely thanks! it's finally worked

[@user-bl3px9bd6t]

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?

[@ChrisBlakely]

Hey thanks for watching! Really glad you found it helpful. And yes, I'm working on my next project video where I'll show you how to deploy the MERN stack, this will include deploying the Node backend to Render. I hadn't heard of Cyclic before so thanks for sharing that with me! 🙌

[@user-bl3px9bd6t]

@@ChrisBlakely Hi Chris. I was trying to deploy the app in render, however I keep getting the error "Prisma only supports Node.js >= 16.13. Please upgrade your Node.js version." even though my node is already at version 18. Would you have any idea on why I'm getting the error?

[@ChrisBlakely]

so how this works is Render will start a virtual machine on their servers, install Node, dependencies etc and then try and start your app. Without looking too much into it, I imagine that Render is defaulting to an older version of node - there might be a setting somewhere that defines the Node version you want it to use

[@ChrisBlakely]

Heres a doc I found that looks like it might be useful -> render.com/docs/node-version

[@matthewkk5087]

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

[@bukanidamanmu4489]

Insane, u are awesome 🎉🎉🎉🎉

[@ChrisBlakely]

Thanks for watching!

[@FacelessYT300]

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

[@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.

[@dystopian_1]

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

[@regilearn2138]

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.

[@Abogida11]

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,

[@vatansrivastava7279]

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

[@ChrisBlakely]

Good idea 👍 thanks for taking the time to watch and leave feedback !

[@DualHellGunz]

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

[@ChrisBlakely]

Hey What’s the error? Can you paste it here so I can get a look thanks

[@kiarieray5975]

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.

[@ChrisBlakely]

I used Render to deploy it you can’t deploy node to GitHub pages it’s only for static site

[@kiarieray5975]

@@ChrisBlakely Maybe deploy isn't the right word. I meant push, in simple terms, how did you go about pushing the app to a Github repo. I tried using the usual git init, bla, blah git push origin (branchname) but it obviously it didn't work since that's not how one 'pushes' a react app to github.

[@kiarieray5975]

@@ChrisBlakely Long story short I want the source code to be in a github repo, then I'll deploy it to render...

[@ChrisBlakely]

@kiarieray5975 create a new repo on GitHub , and it’ll tell you instructions and commands to run

[@kiarieray5975]

@@ChrisBlakely Nvm, I was able to figure out what the issue was....

[@kitembe]

Can I free host this? say using netlify?

[@ChrisBlakely]

You can host the frontend on netlify yes, you can use something like Render or Cyclic to host your backend (node) and if you used ElephantSQL then your DB is hosted already. Will walk through this in my next project I’m building

[@manasmj]

Hey, I am not able to access the website you mentioned in the description. How can I download the starter files n all?

[@ChrisBlakely]

updated the description with links to github repos

[@deepsamanta6112]

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

[@MishEsser]

I have the same error as well.

[@MishEsser]

Found the problem: If you are following the tutorial, in your API.ts (frontend folder), make sure to correct the url address. If you have "recipe" instead of "recipes" in the baseURL, then it should be "recipe" throughout (recipe-api.ts index.ts) it should be----- new URL("localhost:5000/api/recipe/search"); If you have plural "recipes" then make sure your URL address is new URL("localhost:5000/api/recipes/search") in every file;

[@rishii0702]

Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

[@laibatariq-tc2yq]

Hey! elephantsql is shutting down what should i do now?

[@lokeshnegi5051]

will this project be responsive ?

[@rambrian8953]

hi. i got the same error using the same port number on one application, how do you switch off the extra one ? thanks

[@ChrisBlakely]

Hey, you can either close the other app that’s taking up the port or change the port that your recipe app runs on (in index.ts). If you change the recipe app port make sure the change the API endpoints in the UI when you get to those parts

[@MrSjcris]

thanks for video but why use so old technology like express ?? in 2023 ?? it's not have any changes .. what node version you use

[@ChrisBlakely]

Express is still widely used by teams in production. If you understand the concepts behind API/route handling etc then it doesn’t make too much difference what framework you use whether it’s express, nest, koa etc as they’re all similar, albeit differences in terms of performance. This can be said for all frameworks

[@marinaivanova7962]

Hi, when I try to push to the db I get an error - Can't reach database server..., can you help?

[@ChrisBlakely]

Make sure the environment variable for your mongodb connection is correct with correct username and password. Make sure you whitelist the IPs in mongodb.com

[@NidhiShah-d8l]

I am trying to pass results in setRecipe("results") but it gives error: "Argument of type 'string' is not assignable to parameter of type 'SetStateAction'." Any suggestions on this?

[@ChrisBlakely]

Remove the quotes from setRecipe(“results”) , ie to setRecipe(results) What’s happening here is you’re trying to set the actual text/string “results” rather than the results object , so typescript threw the error

[@NidhiShah-d8l]

const [recipes, setRecipes] = useState([]); const handleSearchSubmit = async (event: FormEvent) => { event.preventDefault(); try { const results = await searchRecipes(searchTerm, 1); setRecipes(results); } catch (error) { console.error(error); } }.. This is what my code looks like, but still give me same error. @@ChrisBlakely

[@gembojones8243]

I have followed the 'Setup Backend' section and the server is running but I'm seeing 'Cannot GET /' rather than '{message: success!}'. Any suggestions for how to fix this? Thanks

[@ChrisBlakely]

Usually that means you're trying to hit an endpoint your server can't find, double check the endpoint you added to the GET method on your server, and maybe check the port you're using as well. If all looks good can you possibly share your code (either a github or paste it here etc)

[@gembojones8243]

@@ChrisBlakely error I'm getting now is server/port error. restarting and changing port doesnt seem to help. Error: [nodemon] 3.0.1 [nodemon] to restart at any time, enter `rs` [nodemon] watching path(s): *.* [nodemon] watching extensions: ts,json [nodemon] starting `ts-node ./src/index.ts` Error: listen EADDRINUSE: address already in use :::5001 at Server.setupListenHandle [as _listen2] (node:net:1829:16) at listenInCluster (node:net:1877:12) at Server.listen (node:net:1965:7) at Function.listen (/home/gembojones/my_projects/recipe-app/backend/node_modules/express/lib/application.js:635:24) at Object. (/home/gembojones/my_projects/recipe-app/backend/src/index.ts:13:5) at Module._compile (node:internal/modules/cjs/loader:1255:14) at Module.m._compile (/home/gembojones/my_projects/recipe-app/backend/node_modules/ts-node/src/index.ts:1618:23) at Module._extensions..js (node:internal/modules/cjs/loader:1309:10) at Object.require.extensions. [as .ts] (/home/gembojones/my_projects/recipe-app/backend/node_modules/ts-node/src/index.ts:1621:12) at Module.load (node:internal/modules/cjs/loader:1113:32) { code: 'EADDRINUSE', errno: -98, syscall: 'listen', address: '::', port: 5001 } [nodemon] app crashed - waiting for file changes before starting...

[@ChrisBlakely]

so it looks like you're trying to use port 5001 but its in use somewhere else: Error: listen EADDRINUSE: address already in use :::5001 you can stop the app that is using 5001 or use a different port in your recipe app

[@gembojones8243]

@@ChrisBlakely it is now working thanks :)

[@gembojones8243]

@ChrisBlakely I had the same API key issue as you at 40:40, I installed the dot env package 'npm i dotenv' in the backend folder but hasn't fixed it and getting the same error, any ideas? Thanks server running on localhost:5000 /home/gembojones/my_projects/recipe-app/backend/src/recipe-api.ts:5 throw new Error("API key not found"); ^ Error: API key not found at Object.searchRecipes (/home/gembojones/my_projects/recipe-app/backend/src/recipe-api.ts:5:13) at /home/gembojones/my_projects/recipe-app/backend/src/index.ts:14:37 at Layer.handle [as handle_request] (/home/gembojones/my_projects/recipe-app/backend/node_modules/express/lib/router/layer.js:95:5) at next (/home/gembojones/my_projects/recipe-app/backend/node_modules/express/lib/router/route.js:144:13) at Route.dispatch (/home/gembojones/my_projects/recipe-app/backend/node_modules/express/lib/router/route.js:114:3) at Layer.handle [as handle_request] (/home/gembojones/my_projects/recipe-app/backend/node_modules/express/lib/router/layer.js:95:5) at /home/gembojones/my_projects/recipe-app/backend/node_modules/express/lib/router/index.js:284:15 at Function.process_params (/home/gembojones/my_projects/recipe-app/backend/node_modules/express/lib/router/index.js:346:12) at next (/home/gembojones/my_projects/recipe-app/backend/node_modules/express/lib/router/index.js:280:10) at cors (/home/gembojones/my_projects/recipe-app/backend/node_modules/cors/lib/index.js:188:7) [nodemon] app crashed - waiting for file changes before starting...

[@sandeepmukherjee8927]

Hey Chris I have completely coded the app in javascript react and I am facing a problem in which my heart icon is not changing. please guide me on the same

[@ChrisBlakely]

Probs best to look at the source code and see where you might have gone wrong: github.com/chrisblakely01/react-node-recipe-app check to see if your favourites array is populated correctly, can do this with console.log or use react devtools. If so double check the logic that checks the favourites array and determines whether the recipe is favourited or not. Finaly check the actual component logic to make sure its rendering the heart/heart outline depending on isFavourite

[@sandeepmukherjee8927]

@@ChrisBlakely I have checked my code with yours multiple times but the problem is still present. I think when you are passing the isFavourite prop to the recipe card, when the react app re-renders it can't keep track of the previous value instead there should be a useState to toggle the isFavourite variable.

[@sarabibrahim8312]

👏👏👏

[@MuhammadRidwan-kq4yw]

ts i wish you just use js for it :(

[@dalestewart]

elephant.sql will be discontinued by 2025

[@kensei1412]

I got an error like this: Uncaught TypeError: Cannot read properties of undefined (reading 'map') The Map Function: {recipes.map((recipe) => { const isFavourite = favouriteRecipes.some( (favRecipe) => recipe.id === favRecipe.id ); When i check the value of the recipes: console.log("Recipes:", recipes.results); result on console: Object code: 402 message : "Your daily points limit of 150 has been reached. Please upgrade your plan to continue using the API." status: "failure" Object Is there a solution for this when we reach the limit of the API?

[@ChrisBlakely]

Few things to try: - you can copy an example response from the docs and paste it into your server code, then return this response instead of making a request to the real recipe API. This is good if you want to test things without having to make a request to the real recipe API - you could create another account etc but thats a bit tedious. I think the credits reset after a day

[@rambrian8953]

I keep having this problem loading the page keeps crashing and giving me this two error messages backend/src/recipe-api.ts:7 throw new Error("API key not found") --- [nodemon] app crashed - waiting for file changes before starting... after putting the "await" - key word at the try catch' and after i had installed -dotenv-

[@ChrisBlakely]

Hey, 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!