Build a Recipe Blog using Node.js and MongoDB (Express, EJS, Mongoose…) CRUD – Video Tutorial
In this tutorial, we are going to learn how to use Node.js with MongoDB by creating a simple Recipe Blog. I will be using Bootstrap for the layout and a few NPM dependencies (listed below).
Some of the features include:
- Bootstrap Layout
- Recipe Categories
- Recipe Detailed View
- Search
- Submit Recipe
- Find Random Recipe
- Show Latest Recipes
The Database entries and photos are included in the GitHub repo.
More Resources:
Thank you for reading this article. Please consider subscribing to my YouTube Channel. It’s FREE!
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
Love you sir
I love you too 😀
yes sir
👊🤠
Please can you make a tutorial on building hospital management systems with Express, Mongoose, and EJS?
I really want to learn from you sir
That sounds very specific. I am not really sure how hospital management systems work. I will have to have a look and if it’s interesting I could add it to the list. No promises
i clone the code from github and while i tried to run the app i got this error can u help me out:
MongooseError: The `uri` parameter to `openUri()` must be a string, got “undefined”. Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a
string.
at NativeConnection.Connection.openUri (C:\kushal folder\recepie\RecipeBlog-MongoDB-Node.js\node_modules\mongoose\lib\connection.js:684:11)
at C:\kushal folder\recepie\RecipeBlog-MongoDB-Node.js\node_modules\mongoose\lib\index.js:332:10
at C:\kushal folder\recepie\RecipeBlog-MongoDB-Node.js\node_modules\mongoose\lib\helpers\promiseOrCallback.js:32:5
at new Promise ()
at promiseOrCallback (C:\kushal folder\recepie\RecipeBlog-MongoDB-Node.js\node_modules\mongoose\lib\helpers\promiseOrCallback.js:31:10)
at Mongoose._promiseOrCallback (C:\kushal folder\recepie\RecipeBlog-MongoDB-Node.js\node_modules\mongoose\lib\index.js:1158:10)
at Mongoose.connect (C:\kushal folder\recepie\RecipeBlog-MongoDB-Node.js\node_modules\mongoose\lib\index.js:331:20)
at Object. (C:\kushal folder\recepie\RecipeBlog-MongoDB-Node.js\server\models\database.js:2:10)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
[nodemon] app crashed – waiting for file changes before starting…
You have to download the project, install the dependencies and set up the database. I have the feeling that you haven’t set up the database. You could watch the start of the video which shows how to do that.
I am facing the same issue. Can you please tell how to rectify it?
Have you installed the dependencies and set up the database?
I experiencing the same error and I have done everything right.Please help.
You probably need to create the “.env” file and add the MongoDB connection string there. Look on the GitHub Link, there is an explanation of the “.env” file.
Okay. Should the .env file be in the ain directory?
That’s it, main directory where the app.js file is
Great tutorial! I’ve been doing it and also trying to understand it for about a week, I’m looking forward to add it to my portfolio so I can get a job with it, I’m quite thankful for your initiatives in this field.
Regards
Thanks for the comment, Andreas. Your portfolio already looks awesome. Good luck!
Bro this tutorial is helping me a lot, you’re great!
regards from Brazil
I am glad to hear that, Nivando! Brrrrrraaaaziiiilll!!!! 😀
Hey Raddy,
I’m watching the tutorial right now and got to the part where we run the command npm start and it’s supposed to say listening on localhost:3000. When I get this and try to open the local host on my browser (safari) the app then crashes and get an error saying the extension has not been provided. Can you help me please?
Listening to port 3000
/Users/username/filename/node_modules/express/lib/view.js:61
throw new Error(‘No default engine was specified and no extension was provided.’);
^
Error: No default engine was specified and no extension was provided.
at new View (/Users/username/filename/node_modules/express/lib/view.js:61:11)
at Function.render (/Users/username/filename/node_modules/express/lib/application.js:570:12)
Did you include the view engine?
At the top you need to include:
const expressLayouts = require(‘express-ejs-layouts’);
And then:
app.set(‘view engine’, ‘ejs’);
Could you please zip your code and email it to me?
Ahh, I see it now. I did leave out the app.set(‘view engine’, ‘ejs’). Thank you, in the future I will zip the code and send it to you if I have another issue.
Thank you for this video and your timely response!!
I think that it’s better to ask in the comments as it could potentially help others. I am glad that you fixed it
This Project is so helpful to me, to complete my university final year project.
Thank you for making this video in full details 🙂
Regards from India.
sir i am trying to following you, sir i did not find the dmmyy data source code(jamieoliver.com), please anybody mention the link here for dmmyy data(jamieoliver.com)
At the bottom of the link below, I’ve included the Categories and only two dummy recipes. For more, just copy and paste some data from the internet.
https://github.com/RaddyTheBrand/RecipeBlog-MongoDB-Node.js/blob/main/server/controllers/recipeController.js
I hope this helps! 🙂
Top Tutorail!!
I have to do a combined project for my Big Data and Application of Digital Technology lecture and I would like to use this one but for the Big Data the this data is very small. Could you please help me to find a bigger data that I would be able to use für this project?
thank you so much in advance.
regard from Afghanistan.
Thank you! I guess you could do something with stocks, trading or cryptocurrencies. You could do predictions or you could do real-time analysis on something similar.
First of all, awesome tutorial! I’ve been looking for an example for this exact project to build for my mother. I have a question, though, in displaying the breadcrumbs (as you mentioned at 2:04:50 where you could put the category name in there. I managed to do it, but it’s looping the name b/c of the forEach. First, what is the rationale for the typeof, and how do I list the breadcrumbs only once, no matter how many items are in the category?
0) { %>
Home
Categories
You could try to grab the name of the category from the URL.
The rationale for the type of was that if the variable was undefined then I don’t want to run the code otherwise it will just error.
console.log(typeof undeclaredVariable);
// expected output: "undefined"
if(typeof categories !== 'undefined' ....
// don't run the code
There could be another way. You could have a “Main Category” and use that instead. I am pretty sure that this is how WordPress does the Blog Post categories.
Let me know if you struggle and I will re-install the project to have a look.
contact button and about button not working.
That’s correct. We created plenty of routes in the application and I felt that there is no need to repeat myself. The about and contact where not the focus of the tutorial.
You can look at how the other routes work and just replicate one of them. If you are struggling let me know and I will try to help
please let me know about the CRUD operation. are you used fully crud operation.
The main focus was on displaying data and submitting data. I did show how to delete and update at the end, but no interface for that.