NodeJs Project - Build a Notes App using Express, MongoDB & Passport

Today we are going to create a simple Notes taking Application using Nodejs, Express, MongoDB, and Passport. For templating, we will use EJS and Bootstrap.

Discounts:

Recording Equipment:

Computer Gear:

Connect with me:

Chapters:
◾ 0:00 Introduction
◾ 0:11 Demo
◾ 1:36 Project Setup
◾ 1:05:34 Authentication
◾ 1:49:15 Display Notes + Pagination
◾ 2:23:49 View Note
◾ 2:40:34 Update Note
◾ 2:45:22 Delete Note
◾ 2:49:16 Add Note
◾ 3:00:00 Search Notes
◾ 3:12:20 Minor Fixes
◾ 3:16:33 End

Credit:
Photo by Diego PH on Unsplash
Illustrations by Pablo Stanley - Open Peeps

#nodejs #project

[RaddyDev]

* UPDATE (available on GitHub + Blog)
Mongoose 7.0.0^ coming soon...
If you get the following error: "mongooseerror: model.findbyid() no longer accepts a callback" please follow:

In auth.js replace:
// Retrieve user data from session.
(id, done) {
User.findById(id, function (err, user) {
done(err, user);
});
});

To:

(id, done) => {
try {
const user = await User.findById(id);
done(null, user);
} catch (err) {
done(err, null);
}
});

In dashboardController.js replace the Get Dashboard Route with:

/**
* GET /
* Dashboard
*/
exports.dashboard = async (req, res) => {

let perPage = 12;
let page = req.query.page || 1;

const locals = {
title: "Dashboard",
description: "Free NodeJS Notes App.",
};

try {
// Mongoose "^7.0.0 Update
const notes = await Note.aggregate([
{ $sort: { updatedAt: -1 } },
{ $match: { user: new } },
{
$project: {
title: { $substr: ["$title", 0, 30] },
body: { $substr: ["$body", 0, 100] },
},
},
])
.skip(perPage * page - perPage)
.limit(perPage)
.exec();

const count = await Note.count();

res.render('dashboard/index', {
userName: req.user.firstName,
locals,
notes,
layout: "../views/layouts/dashboard",
current: page,
pages: Math.ceil(count / perPage)
});
} catch (error) {
console.log(error);
}
};

[miroslavbekyarov]

It's great to see more tutorials made with EJS instead of a front-end framework. It's helpful for people who haven't yet started learning React

[buzzcodez]

Very underrated YouTuber. Definitely one of the best programming tutors out there! Keep it up, man! Learned a lot from this tutorial. Thank you so much 🙌

[JayTheMachine]

best tutoria on whole wide internet, love it

[prajwalurkude]

Finally I built and deployed this project on cyclic, thanks a lot for your step by step tutorial 🖤

[muhammedyaseen]

Best resource for anyone with basic knowledge in these technologies

[dimastoriq]

Thanks for the best tutorial i have ever seen :))

[tarunrawal]

"Thank you so much for the fantastic content! Your videos have been incredibly helpful and inspiring. I've learned a lot from your channel, and your passion for what you do truly shines through in each video. Keep up the great work, and I'm eagerly looking forward to more amazing content from you! You've got a dedicated subscriber here. 😊👍"

[userj-s]

Will try this tut soon with just jwt auth in a couple of weeks excited for it

[BobMarley-qhqs]

Raddy i have learnt alot from this project, thanks a lot

[adhilameenet]

Thank you so much sir. It helps me a lot☺️

[userj-s]

Watched it all, nice tut, im going to make it differently but def took some notes all good

[TheEmmanuelN]

Raddy this is awesome! Thank you very much Sir

[arjunshaji]

This tutorial is really awesome !! its help me a Thank you very much !!

[SohrabBaqtiari]

In mongoose v8.0.3 change this line in 'dashboardController.js'
const count = await Note.countDocuments();

instead of

const count = await Note.count();

[AbhayKumar-glhh]

2:34:54
Re: Delete warning pop-up

i was unable to properly implement the delete warning popup maybe because Bootstrap got updated
<div class="container-fluid container-fluid-custom pb-5 mb-5">
<div class="row mb-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
<li class="breadcrumb-item active">
<%= note.title %>
</li>
</ol>
</nav>
<div class="col d-flex justify-content-between align-items-center">
<h1 class="h3">View Note</h1>
<button type="button" class="btn btn-primary" data-bs-toggle="modal"

</div>
</div>
</div>
<div class="modal" tabindex="-1" id="deleteModal" data-bs-backdrop="dynamic" data-bs-keyboard="false"
aria-labelledby="deleteModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fs-5" id="deleteModal">You are about to delete this note.</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This will delete yout note <b class="fw-bold">
<%= note.title %>
</b><br>
Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
<button type="button" class="btn btn-primary">Delete Node</button>
</div>
</div>
</div>
</div>
this worked for me

[hybeprb]

Hey @RaddyDev. I am a bit confused with the Google Auth functionality! We have the Sign Up and Sign In buttons. In my mind the Sign up is a way to register an account. The Sign In is a way to Login into the existing account and that is totally normal in the normal Register / Login process...

But the thing is WHY do we need these 2 buttons in the app if we are not creating an account really, but simply logging into our app with the help of a google gmail account?

My point is that if we remove the sign up button, it seems like we can still do our authentication using only the SIGN IN button because both buttons take you to the google sign in page (where you can also create an account if needed).

Chances are I am just confusing myself here but can you fully explain the functionality of these 2 buttons and why the 2 exist?
In my mind, we only need one to do what we are doing. Please explain. Thanks.

[Yazalim]

The one thing that i dont understand is where we res.render("...", {
layout :
})
Aren't we in controllers file ? i mean dont we need to ../ twice so we can get out of "server/controllers" so that we can go in /views ? That is confusing to me

[vasuchourasia]

can someone help with this issue
when i am trying to sign-in OR SIGN-UP through my phone it is saying
"this site can't be reached
localhost refused to coonnect
try:checking the connect
ERR_CONNECTION_REFUSED"

[dbzbeos]

I'm getting this error after adding OAuth: Error: Login sessions require session support. Did you forget to use `express-session` middleware?