Forem: Sumit Saurabh

Never worry about translations again!

Sumit Saurabh — Fri, 13 Mar 2026 11:53:27 +0000

Ademola Thompson

Mar 12

How to make your React app multilingual

#react #multilingual #localization

Comments 4

16 min read

🚀 5 Javascript concepts every web developer should know! 👨‍💻

Sumit Saurabh — Mon, 02 Dec 2024 17:43:44 +0000

TL;DR

This article contains a list of 10 Javascript concepts that can take you from a Javascript newbie to a pro.

Hey Folks! 👋

This article contains top 10 Javascript concepts for web developers. It contains something for everyone so whether you've just started your journey or are a seasoned developer, you'll still find something of use here.

Join our exclusive developer community! 🎉

I'm starting a new community for new developers.

It is my aim to help early-age developers to level up in their careers, make meaningful connections and grow.

I intend to make it one of the best developer community out there and early members will have exclusive perks!

Wanna join? Here's how to:

Click on this invite link
Write a brief introduction of yourself and post in the #general-chat channel

1. Call stack:

Call stack is a data structure that keeps track of where the program is currently in its execution journey. Every time a function is called, an entry (called 'stack frame') is added to the call stack.

When the function completes execution, its corresponding stack frame is removed (or 'popped') from the call stack, and control returns to the previous function in the stack.

Key Points:

LIFO (Last In, First Out): The call stack operates on this principle, where the last function pushed is the first one popped.
Every active function call resides here, maintaining execution order.
If too many function calls are added without being removed (e.g., infinite recursion), the stack runs out of memory, causing a stack overflow.
Call Stack Trace: Debugging tools use the stack to show the order of function calls leading to an error.

2. Execution Context:

Execution context defines the environment within which JavaScript code is executed. It consists of everything needed to execute the code, such as variable definitions, the 'this' keyword, and function references.

There are three primary types of execution contexts in JavaScript:

i) Global Execution Context: Created by default when the script starts. It contains global variables and functions.
ii) Function Execution Context: Created whenever a function is called. Each function call gets its unique context.
iii) Eval Execution Context: Created when code is executed inside an eval() function.

Call stack and execution context work together. Call stack manages the order of execution, while the execution context manages the details of execution.
When a function is invoked, a new execution context is created and pushed onto the stack.
The code runs in the current execution context.
When the function finishes, its context is removed from the stack.

3. typeof, loose and strict equality:

While most developers do know what these are, pro developers, in addition to knowing the basics, also know the limitations and when to use what.

typeof:

The typeof operator returns a string indicating the type of its operand. It’s the easiest way to know the data type of a variable or an expression.

Key Points about typeof:

The output is always a string, such as "number", "string", "boolean", "object", "function", or "undefined".
Despite being an object reference, typeof null returns "object".
You can pass any value or expression to typeof.

typeof 42; // "number"
typeof "Hello"; // "string"
typeof {}; // "object"

loose equality:

The == operator checks if two values are loosely equal, meaning it compares their values after performing type coercion (converting both operands to the same type).

Key Points about ==:

Converts one or both operands to the same type before comparing.
The implicit type conversion can lead to unexpected results.
Use === instead for clarity and reliability.

42 == "42"; // true (string is coerced to a number)
null == undefined; // true (special case of loose equality)
0 == false; // true (type coercion happens)

Strict equality:

The === operator checks if two values are strictly equal, meaning it evaluates both value and type without performing type coercion.

Key Points about ===:

Both value and type must match exactly.
Ensures clarity and prevents unexpected behavior.
Handles everything from numbers and strings to arrays and objects, and is hence more reliable.

42 === "42"; // false (different types)
null === undefined; // false (different values and types)
0 === false; // false (different types)

When to Use Each Operator:

Use typeof when inspecting or debugging variable types.
Use === for comparisons to ensure both value and type match.
Avoid == unless you’re confident type coercion will lead to the intended outcome (e.g., when comparing null and undefined).

4. Pure and Impure functions:

A pure function is a function that has no side effects and always returns the same output for a given input (i.e., it has deterministic output).

// pure function
function add(a, b) {
  return a + b; // Only depends on input arguments
}

// impure function
let counter = 0;  
function increment() {
  counter++; // Modifies external state (impure)
}

Benefits of Pure Functions

Easier to Test: Since the output only depends on the input, you don’t need to mock external dependencies. Example: Testing add(2, 3) always results in 5.
Predictability: No unintended consequences from hidden state or side effects.
Improved Debugging: Pure functions are isolated, making it easier to trace issues.
Reusability: Pure functions are self-contained and can be reused confidently in different contexts.
Facilitates Functional Programming: Encourages immutability and declarative programming paradigms.

5. Event propagation:

Event propagation refers to the way in which events are handled in a program.

In JavaScript, events can bubble up through the DOM (Document Object Model) or they can be captured and handled at each level.

Event Handling Efficiency: Use event delegation to manage events on many child elements with a single parent listener.
Debugging Propagation Issues: Understanding propagation helps resolve issues where unintended elements respond to events.
Fine Control: Choose capturing or bubbling phases to handle events at specific points in the DOM hierarchy.
event.stopPropagation(): Stops further propagation in both capturing and bubbling phases.
event.stopImmediatePropagation(): Stops propagation and prevents other listeners on the same element from being called.

With that, I'm concluding this article today. Don't forget to check out my other articles and remember to join the community.

Also, this isn't a definitive list and I'm sure I've missed many concepts that ought to be here, please add them in the comments down below.

Thanks for reading and see you in the next one!

Bye! 👋

~ SS

🚀 10 books to achieve Javascript mastery 👨‍💻

Sumit Saurabh — Thu, 19 Oct 2023 12:24:52 +0000

TL;DR

This article contains a list of 10 books that can take you from a Javascript newbie to a pro.

Hey Folks! 👋

This article contains my top ten book recommendations for learning Javascript. It contains something for everyone so whether you've just started your journey or are a seasoned developer, you'll still find something of use here.

Join our 20 swag giveaway! 🎉 🎊

Novu is on Product Hunt, but what does it mean?
We launched our Platform and the Product Hunt platform to get more visibility for Novu.
Can you help us with the launch? We will reward you with swag!

Go to our ProductHunt launch here:
https://www.producthunt.com/posts/novu

Help us with the launch (comment, upvote anything you want).
And watch our YouTube video.
We have hidden a riddle there!

Figured out the answer? Here is what you can do:

Go to our bonuses on HackSquad, add the answer, and get two points!
Go to http://novu.vote/ add your answer, and participate in a giveaway of 20 swag packs!!!!

Double the Swag, Double the fun

1. JavaScript: The Good Parts by Douglas Crockford

As the name suggests, this is a book that focuses on the best parts of Javascript.

It covers the essential concepts without the unnecessary ones.

🔗 https://amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742

2. Eloquent JavaScript by Marijn Haverbeke

Quite possibly the most comprehensive book on Javascript that I've ever come across.

I don't recommend this for beginners but this is surely a must-read.

🔗 https://eloquentjavascript.net

3. You Don't Know JS series by Kyle Simpson

Instead of one book, this is a series of books that dives deep into all aspects of Javascript.

A must-read for every Javascript enthusiast!

🔗 https://github.com/getify/You-Dont-Know-JS

4. JavaScript and JQuery: Interactive Front-End Web Development" by Jon Duckett

If you're a front-end developer & work with jQuery, this is a no-brainer.

It is a comprehensive book & covers everything from basic syntax to advanced topics.

🔗 https://amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647

5. Functional JavaScript by Michael Fogus

If you're learning react or wanna learn it, the functional way (which is the 'modern' way), this is for you.

It teaches functional programming using Javascript, which is used in modern React.

🔗 https://amazon.com/Functional-JavaScript-Introducing-Programming-Underscore-js/dp/1449360726

6. JavaScript: The Definitive Guide by David Flanagan

This is another comprehensive book on Javascript that covers almost all aspects of Javascript.

It is really handy for quick reference and is a must-read for any Javascript learner.

🔗 https://amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/1491952024

7. Learning JavaScript Design Patterns by Addy Osmani

This book is meant for people who want to learn the design patterns of Javascript.

It is an excellent book for folks who wanna write maintainable and scalable Javascript code.

🔗 https://addyosmani.com/resources/essentialjsdesignpatterns/book/

8. Effective JavaScript by David Herman

This is another book
This book provides practical advice and best practices for writing effective JavaScript code. It covers topics like data structures, functions, and error handling.

🔗 https://amazon.com/Effective-JavaScript-Specific-Software-Development/dp/0321812182

9. High-Performance JavaScript by Nicholas C. Zakas

As evident from the name, this book is about optimizing Javascript code for the best performance.

It covers various techniques that will help you in writing performant code.

🔗 https://amazon.com/High-Performance-JavaScript-Nicholas-Zakas/dp/059680279X

10. JavaScript: The Missing Manual by David Sawyer McFarland

Lastly, this is another book that covers Javascript extensively.

Everything from basic syntax to advanced topics is covered here.

🔗 https://amazon.com/JavaScript-Missing-Manual-David-McFarland/dp/1491947071

That concludes this article for today!

If you're reading it, you will also like our other articles so please check them out.

Also, I must have missed listing some other gems so if you know of any, please add them in the comments down below.

Thanks for reading and see you in the next one!

Bubye! 👋

~ SS

🚀 10 Github repositories to achieve Javascript mastery 🧙‍♂️🪄✨

Sumit Saurabh — Tue, 26 Sep 2023 12:20:39 +0000

TL;DR

This article contains a list of 10 Github repositories that are going to be useful for Javascript developers of all experience levels

Hey folks! 👋

In this article, we'll take a look at 10 publicly available Github repositories that will take your Javascript skills to the truly next level!

Whether you're a complete beginner to the language or have been developing with JS for a while, there's something for everyone here. Without any further ado, let's jump in.

HackSquad 2023 is live!

Contribute code, meet community members, participate in workshops, and win more SWAG.

With the fantastic atmosphere of Hacktoberfest, we have decided to create Hacksquad. Hacksquad is here to enhance your Swag, meet with more community members and participate in workshops from our great sponsors.

Join here! 👇
https://www.hacksquad.dev

1. 33 Concepts Every JavaScript Developer Should Know

Like the name suggests, this repo contains a list of 33 Javascript concepts that every 'good' Javascript developer should know about.

Each concept also has a bunch of learning resources to learn more about it and with the various articles and videos shared, it is hard not to learn it well.

2. Javascript questions

This repository lets you:

test how well you know JavaScript,
refresh your knowledge a bit,
or prepare for your coding interview!

It contains questions from basic to advanced and is updated regularly with new questions. The answer to each question is present in the collapsed section below each question that you can click to expand (but don't cheat!!!)

If you're the kind of person who follows Solving a question a day keeps unemployment away then this is the perfect repo for you.

3. You don't know JS

If you want to learn the language inside out, this is the place for you to be in. It is a series of books designed to take you from a newbie to a seasoned developer who has sound understanding of how things work behind the scenes in Javascript.

It dives deep into the core mechanisms of the Javascript language and is available online completely for free.

You should not miss this one if you want to have a firm grasp over the language!

4. Airbnb Javascript style guide

This is one of the most famous Javascript resource on the internet today and rightly so.

It contains a set of guidelines and best practices to code in Javascript and was originally written by the engineering team of Airbnb.

It covers various aspects of Javascript and provides detailed recommendations on a plethora of topics.

Totally worth checking out!

5. Tech interview handbook

If you are reading this, chances are that at some point, you'll be appearing for a tech interview.

As such, this can be an immensely useful resource for you.

Having benefitted over 500,000 people, this handbook saves you the trouble of the sometimes recommended rote practice of grinding competitive programming questions.

This repo has practical content that covers all phases of a technical interview, from applying for a job to passing the interviews to offer negotiation.

6. The Algorithm - Javascript

This is another one of those wildly popular resource on the internet that is well worth checking out. It focuses on implementing various data structures and algorithms in Javascript ranging from the basic ones like sorting and searching to complex ones such as dynamic programming.

You'll find detailed explanations code snippets for each!

7. Awesome Javascript

This repo contains a list of awesome browser-side libraries, resources and other shiny things, all in Javascript.

It covers everything from package managers, loaders, bundlers and transpilers to UI tools, utilities, gestures, maps, animation and what not.

If any browser-side magic can be done with Javascript, chances are, you'll find it listed here.

Definitely start this and keep it for future reference.

8. WTFJS

If you've been developing in Javascript, chances are that every one in a while you'll encounter something quirky about it.

As a language, Javascript is filled with these little tricky things that sometimes annoy so much.

If any of the above two sentences resonated with you then look no further.

This repo contains a list of many, many such concepts that are tricky to understand as a new developer.

Jump in and have fun!

9. Effective Engineer Notes

"They are the people who get things done. Effective Engineers produce results."

If you want to be an effective engineer, you'll have to learn and unlearn and re-learn a lot over the course of your career.

As such, this gist will help you adopt the right mindset and know what to do as well as what not to do.

This can be one of most useful resource out there if you take proper advantage of it!

10. Free programming books

No matter how many courses I watch and how many youtube videos I go through, books are still the gold standard when it comes to learning new stuff.

If you're like me then this repo is for you.

It is a collection of programming books that are freely available to anyone.

It is one of the most famous repositories out there with over 271,000+ stars on Github.

Well worth checking out!

That brings us to the end of this article. If you liked reading this, don't forget to check out our remaining articles.

Don't forget to comment what you liked and didn't like about this tutorial and if there's something you know that I should have included in this article, do let me know in the comments down below.

Have a great one, bye! 👋

~ Sumit Saurabh

How to add In-App notifications to any web app!

Sumit Saurabh — Tue, 09 May 2023 14:20:49 +0000

TL;DR

In this article, you'll learn how to add a notification system to any app in just a few simple steps! The primary focus in making this app was to showcase just how simple it is to add notifications to an app.

If you take any modern app, there's a high chance that it would have notifications functionality baked in. And why not!

Notifications make any app better by providing real-time updates and keeping users engaged. They help increase user retention by providing a medium of communication between an app and its users.

If you're reading this article, chances are that you already understand the importance of having notifications in your app and are looking for a way to add a notification system to your app.

Well, you've come to the right place. In this tutorial, we'll have a look at how we can add notifications to any app. Now, writing a custom solution every time you want to add notifications somewhere is cumbersome, I know.

But we'll use a magical tool to help make our jobs easier and believe me, this whole thing will be much simpler than you might think, pinky promise!

How, you ask?

Enter Novu!

Novu helped me solve the biggest problem I had every time I wanted to add notifications to an app - writing a notifications center from scratch.

And even though, I could re-use parts of what I'd written earlier, the unique use cases of each app ensured, I had to make significant changes to my previous system.

With Novu, I could simply grab an API key and use the custom component to add notifications to any web app. PERIOD!

Novu - Open-source notification infrastructure for developers:

Novu is an open-source notification infrastructure for developers. It helps you manage all the product notifications be it an in-app notification (a bell icon like what's there in Facebook), Emails, SMSs, Discord, and what not.

I'll be super happy if you check us out on GitHub and give us a star! ❤️
https://github.com/novuhq/novu

Let's write some code:

We'll make our app in two stages - backend and front-end. Both will live in separate GitHub repositories and I'll also show you how to deploy both to the web, enabling us to access the app from anywhere.
Let's start with the backend.

Basic set-up:

We'll start with an empty git repo. Create an empty git repository, enter all the relevant details, and publish it to GitHub. Then open it in your IDE (I'm going to use VS Code):

Our first step here would be to install all the required packages. We'll rely on several packages from npm (Node Package Manager).

To start this process, we'll generate a package.json using the following command:

npm init -y

This command generates the package.json file and now we can install all the packages we need. Use the following command to install the packages we'll be using:

npm i novu body-parser cors dotenv express mongoose nodemon

Now, create a '.env' file and a '.gitignore' file in the root of the project. We'll keep sensitive data like our MongoDB connection URL and the Novu API key in the .env file. To stop it from getting staged by git and being pushed onto GitHub, add the .env file to the .gitignore file, as shown below. This way it'll be accessible to us in the app but nobody will be able to see it on Github.

Connecting to a database:

After completing the basic setup, it is now time for us to connect to a database.

If you haven't already, create your MongoDB account and sign in.

We'll need to get a connection URL from our database and will plug that into our backend. To get that URL, go to the top left corner and create a new project.

Give your project a name and then click the 'build a database' button:

After this, choose the free option and leave everything else to default.

Now, enter the username and password that you want to use for database authentication, and make sure that you've noted down the password (we're going to need it).

Now, only the last step is left which is to obtain our connection URL. To get it, click on the 'connect' button

Then choose the 'compass' option.

Now, note down the URL (highlighted text in the image):

In this URL, you'll have to replace '' with your actual password (that you noted down above). That's it!

Store this URL in a variable in your '.env' file as shown below:

Obtaining Novu API key:

Getting the Novu API key is quite simple. You just need to head over to Novu's web platform

Then create your account and sign in to it. Then go to 'Settings' from the left navigation menu:

Now, in the settings, go to the second tab called 'API Keys'. There, you'll see your Novu API key. Copy it and add it to the .env file in your project's root directory:

Let's start coding:

The backend for this app is rather simple and consists of a few key parts:

Controller: It contains code for the function that runs when we make server requests from our front-end. It just contains one simple function:

import { inAppNotification } from "../Novu/novu.js";
import Notif from "../models/notif.js";

export const createNotif = async (req, res) => {
    const { description } = req.body
    const newNotif = new Notif({
        description
    });
    try {
        await newNotif.save();
        await inAppNotification(description, "Sumit");
        res.status(201).json(newNotif);
    } catch (error) {
        res.status(409).json({ message: error });
    }
}

The function starts by destructuring the description property from the req.body object, which is passed in as a parameter when the function is called from the front-end.

Next, a new instance of the 'Notif' model is created using the description value, which is then saved to a database using the 'save()' method.

After the notification is saved to the database, an in-app notification is sent using the 'inAppNotification' function, which is imported from the "../Novu/novu.js" module.

This function takes two arguments:

The description of the notification, and
The name of the user who triggered the notification, in this case, it is my name: "Sumit".

If everything is successful, the function sends an HTTP status code of 201 along with the new notification object in the response.

On the contrary, if an error occurs during the process, the function sends an HTTP status code of 409 along with an error message in the response.

Database Schema:

In MongoDB, data is stored in things called 'Collections'. Collections are like boxes within which we store data. A database in this case is the room. So the database contains entities called 'collections' and we store data within those collections.

The schema for notifications is as follows:

import mongoose from "mongoose";

const notifSchema = mongoose.Schema(
  {
    description: { type: String, required: true }
  },
  {
    collection: "notif",
  }
);

export default mongoose.model("Notif", notifSchema);

Here, we're defining a 'notif' collection in our database. We're using the 'Mongoose' library to connect to the database.

Using 'mongoose.Schema' method, we're creating a new schema object for the "notif" collection. The object passed as the first parameter is defining the shape of the documents in the collection.

In this case, the schema is defining a single field called "description", which is of type String and is required (i.e., it must be present in every document).

The second parameter being passed to mongoose.Schema is an optional 'options' object. In this case, it is setting the name of the collection to "notif".

Finally, we're using 'mongoose.model' method to create a model based on the schema. This model is being exported as the default export of this module.

The benefit of exporting it is that we can now use it to interact with the "notif" collection in the MongoDB database.

Now, off to the sweet part!

Setting up Novu notification template:

We're now left with two tasks in the backend:

Configuring Novu, and
Starting the server

To configure Novu, go the the web platform again and go to 'Notifications' from the left menu bar:

Now, create a new workflow, give it a name, and go to the workflow editor:

Since we'll be using just one functionality - In-app notifications, we'll set only that one up. But with Novu, you can send notifications through pretty much every channel out there, be it email, sms, push, or chat.

To setup the in-app channel, drag the button called 'in-app' from the right options menu and click on it to edit it.

Because we're using 'description' in the backend, we'll have to plug that in here as shown below:

Now, back to the code:

In the controller above, we had used a function called inAppNotification but we never defined it. Now is the time to do so:

So, go to your project's root and create a new file. In that file, we'll create this function:

import { Novu } from '@novu/node'; 


export const inAppNotification = async (description, Id) => {
    const novu = new Novu(process.env.NOVU_API_KEY);
    await novu.subscribers.identify(Id, {
      firstName: "inAppSubscriber",
    });

    await novu.trigger("in-app", {
      to: {
        subscriberId: "Sumit",
      },
      payload: {
        description: description
      },
    });
  };

Notice the use of 'description' here (that we set up in Novu) in the previous step.

Now, the last step of the back-end is remaining, which is setting up the server and the routes.

Our app is quite simple here and we need just one route:

import express from "express";
import { createNotif } from '../controller/notif.js'

const router = express.Router();

router.post('/', createNotif)

export default router;

And the server setup is also relatively straight forward:

import express from "express";
import mongoose from "mongoose"
import cors from "cors"
import bodyParser from "body-parser";
import dotenv from "dotenv";
import notifRoute from "./routes/notif.js"

dotenv.config();

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ limit: "30mb", extended: true }));
app.use(cors());

app.use("/home", notifRoute)

app.listen(3000, function () {
    console.log('listening on 3000')
})

app.get('/', (req, res) => {
    res.send('Project running!')
})


const CONNECTION_URL = process.env.CONNECTION_URL;
const PORT = process.env.PORT || 8000
app.use("/", (req,res) => res.send('this is working'))
mongoose.connect(CONNECTION_URL, { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => app.listen(PORT, () => console.log(`server running on port: ${PORT}`)))
    .catch((error) => console.log(error));

With these out of the way, our backend is done and we can now move to the front end.

Coding up the front-end:

In the front-end, we're gonna use the magical power of Web component. It is a collection of three things:

NovuProvider,
PopoverNotificationCenter, and
NotificationBell

These are all combined into one simple component, that we call Web Component. Web component is what enables us to embed this notification center into just about any web app.

You can read more about it here!

Now, in the front-end, we're gonna need four files:

'index.html' - This will contain the markup,
'styles.css' - This will contain the CSS styles,
'app.js' - This will contain all the logic to send notifications from front-end to back-end and fetch them all in the bell icon, and
the '.env' file - This will contain our Novu API key

The contents of each one of them are as follows, starting with 'index.html' below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <script src="https://novu-web-component.netlify.app/index.js"></script>
    <title>Notification Generator</title>
</head>
<body>
    <div class="header">
        <h1>Notifications Generator</h1>
        <notification-center-component style="display: inline-flex" application-identifier="SWMw97ec1ZNA"
            subscriber-id="Sumit" class="bell"></notification-center-component>
    </div>
    <div class="content">
        <img class="img" src="./notification-bell.png" alt="notification bell image" srcset="">
        <form id="form" action="#" method="post">
            <input class="input" type="text" placeholder="Enter notification text and click the send button!" name="description">
            <button id="btn">Send</button>
        </form>
    </div>
    <footer>
        <p>Proudly powered by <a class="link" href="http://www.novu.co">Novu</a></p>
    </footer>
    <script src="./app.js"></script>
</body>
</html>

Then, the 'app.js' file is as follows:

const form = document.querySelector('#form')


// extracting send button
const btn = document.querySelector('#btn');
const input = document.querySelector('.input')

// btn.onclick = () => console.log('clicked');

form.addEventListener("submit", async (e) => {
    e.preventDefault();
    console.log('button clicked');
    await fetch('https://notificationsgeneratorbackend.onrender.com/home', {
        method: 'POST',
        body: JSON.stringify({
            description: input.value,
        }),
        headers: {
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
        input.value = ""

})

// extracting input value on button click

// here you can attach any callbacks, interact with the web component API
let nc = document.getElementsByTagName('notification-center-component')[0];
nc.onLoad = () => console.log('hello world!');

Finally, we'll have some CSS code for styling in the styles.css file and the Novu API key in the .env file.

You can find the CSS I've used here.

If you've done everything correctly, you should have an app that looks something like this:

In this app, we've demonstrated how to use the 'Web component' to add a notification center to any web app. To keep things simple, we've just used the in-app notification feature but you can use just about any notification medium you can imagine - from chat to sms to emails and more!

Deploying our front-end and our back-end:

The last step remaining is to deploy our front-end and our back-end. We're gonna use a service called 'Render' to deploy our back-end and the good, old 'Netlify' for our front-end:

Both are very straight forward and the process is a simple plug-and-play kinda thing: Just log in to both, point to your GitHub repo, and add the environment variables as defined in the '.env' file of both. That's it!

If you want to go over my code, it is available here:

Front-end, and
Back-end

Lastly, if you need help with anything and wanna reach out to me, I'm always available at the Novu discord. Feel free to join in and say hi! 👋

This entire project was made possible by the awesomeness of Novu and it takes me a lot of time and effort to come up with tutorials like this one, so if you could spare a moment and give us a star on our GitHub repo, it would mean a lot to me.

Thanks for all your support! ⭐⭐⭐⭐⭐

Don't forget to comment what you liked and didn't like about this tutorial.
Have a great one, bye! 👋

~ Sumit Saurabh

Make a Dream Todo app with Novu, React and Express! ✅

Sumit Saurabh — Wed, 19 Apr 2023 07:36:19 +0000

TL;DR

In this article, you'll learn how to make a todo app that works for you. The prime focus in making this app was to boost personal productivity, get things done and stay distraction free!

So, fasten your seat belts and let's begin the ride. 🚀

The why? 🤔

In the information-overload age that we live in, being productive and concentrating on one task at a time is something that not a lot of people are good at. To overcome this, one of the widely accepted approaches is to have a todo list of tasks you want to accomplish.

This was my approach too, but with time I started feeling limited with the basic functionality and found myself juggling through different apps for different functionalities.

My primary use-cases were:

A place to plan my week.
Daily breakdown of what I wanted to achieve that day.
Knowing the current time and date.
Being inspired to take action and feeling accomplished when I completed a task.
Sending informal sms reminders to people I've assigned a task to.
Sending formal email reminders to work colleagues.
The app should be available everywhere.

To achieve these, I had to juggle between multiple apps: one cross-platform todo app (which was surprisingly difficult to find), a calendar app, a quotes app, a messenger and an email app.

Needless to say, shuffling between these many apps was defeating the very purpose I was juggling these apps: maximising personal productivity in a distraction free setting.

Seeing that no one app had all the features I needed, I decided to build my own app. But there was a problem: I could build a great todo app but my problem of sending reminders to people about a task assigned to them was still not being solved.

Enter Novu!

Novu helped me address the biggest gripe I had with my workflow - picking up my phone to send a message reminding someone about a task they were supposed to do. Remember that staying distraction-free was a big thing for me and picking up my phone was like practically inviting shiny and tempting distractions.

But with Novu, I could now build a todo app from which, I could send informal sms reminders to my friends as well as formal email reminders to my work colleagues.

Novu - Open-source notification infrastructure for developers:

I'll be super happy if you check us out on GitHub and give us a star! ❤️
https://github.com/novuhq/novu

Let's begin with our app, Moonshine:

We'll make our app in two stages - backend and front-end. Both will live in separate GitHub repositories and I'll also show you how to deploy Moonshine to the web, enabling us to access it from anywhere.
Let's start with the backend.

Basic set-up:

We'll start with an empty git repo. Create an empty git repository, enter all the relevant details and publish it to GitHub. Then open it in your IDE (I'm going to use VS Code):

Our first step here would be to install all the required packages. We'll rely on several packages from npm (Node Package Manager).

To start this process, we'll generate a package.json using the following command:

npm init -y

This command generates the package.json file and now we can install all the packages we need. Use the following command to install them all:

npm i dotenv novu bcryptjs body-parser cors express jsonwebtoken mongoose nodemon

Now go ahead and create a .env and a .gitignore files in the root of your project directory. We'll keep all the sensitive data like our MongoDB connection URL and our Novu api key in our .env file. To stop it from getting staged by git and being pushed on to GitHub, add the .env file to the .gitignore file, as shown below:

Connecting to a database:

After the basic set-up, we need to connect to a database to store information. We'll be using MongoDB for this as it is really easy to get started with and serves all our needs. So go ahead, create your MongoDB account and log into your MongoDB account.

We'll need to get our database connection URL from MongoDB. To get that, go to the top-left corner and create a new project from there.

Name your project then click on 'create project', and then click on 'build a database'

After this, choose the free option, leave everything to default

Enter the username and password you want to use to authenticate to MongoDB (note the password down, we'll need it). Then scroll to the bottom and click finish and close:

Now we need to connect to our database. Select 'Connect' from left menu and choose 'network access'. Then go to 'add ip' and choose 'allow access from anywhere' as shown below:

Now, go to database again from the left menu and click on connect button

Here, choose 'connect your application' as shown:

Now, copy the connection url into your .env file, just replace the with the password you saved above.

Getting our Novu API key:

Post database connection, we need our Novu api key that you can get quite easily.
Go to Novu's web platform

Create your account and sign-in to it. Then go to Settings from the navigation menu on the left.

Now, in the settings, go to the second tab called 'API Keys'. there, you'll see your Novu api key. Copy it and add it to the .env file in your project's root directory:

Now, we've laid down all the groundwork and are ready to start coding-up the back-end.

Coding our back-end:

The first part of our back-end code is controller, which contains the code for functions that handle http requests from the application. We'll create two files here:

One for all the http methods of our todo app like getting all todos, adding new todo, deleting a todo etc.
Another one for the http methods involving authentication like sign-in and sign up.

The content of our auth file is given below. It contains two functions - signUp and signIn. The 'signUp' function checks if the information entered already belongs to a registered user or not and responds accordingly. If it doesn't already belong to an existing user, a new user is created in our database, which we had created above.

import jwt from "jsonwebtoken"
import bcrypt from "bcryptjs";
import user from "../models/user.js";

export const signUp= async (req,res)=>{
    const {first_name,last_name,email,password,confirm_password}=req.body;
    try {
        const existingUser= await user.findOne({email});
        if(existingUser) return res.status(400).json({message:"User already exists.."});

        if (password!==confirm_password) return res.status(400).json({message:"Password should match.."})
        const hashedPassword= await bcrypt.hash(password,12);
        const result= await user.create({email,password:hashedPassword,name: `${first_name} ${last_name}`});
        const token= jwt.sign({email:result.email,id:result._id},'secret',{expiresIn:'5h'});
        res.status(200).json({result,token});
    } catch (error) {
        res.status(500).json({message:"Something went wrong!! try again."})
    }
}

export const signIn= async (req,res)=>{
    const {email,password}=req.body;
    try {
        const existingUser= await user.findOne({email});
        if(!existingUser) return res.status(404).json({message:"User does not exist!!"})

        const isPasswordCorrect= await bcrypt.compare(password,existingUser.password);

        if(!isPasswordCorrect) return res.status(400).json({message:"Invalid password,try again!!"});

        const token= jwt.sign({email:existingUser.email,id:existingUser._id},'secret',{expiresIn:'5h'});

        res.status(200).json({result:existingUser, token});
    } catch (error) {
        res.status(500).json({message:"Something went wrong!! please try again"});
    }
}

Similarly, the content of our todo file is given below:

import notes from "../models/note.js";
import mongoose from "mongoose";
import {
  getNotification,
  inAppNotification,
  smsNotification,
} from "../novu/novu.js";

export const getNotes = async (req, res) => {
  try {
    const allNotes = await notes.find();
    res.status(200).json(allNotes);
  } catch (error) {
    res.status(409).json({ message: error });
  }
};

export const createNote = async (req, res) => {
  const { title, description, date, message } = req.body;
  const newNote = new notes({
    title,
    description,
    date,
    creator: req.userId,
    createdAt: new Date().toISOString(),
    checked: false,
  });
  try {
    await newNote.save();
    await inAppNotification(title, description, req.userId, message);
    res.status(201).json(newNote);
  } catch (error) {
    res.status(409).json({ message: error });
  }
};

export const deleteNote = async (req, res) => {
  const { id } = req.params;
  if (!mongoose.Types.ObjectId.isValid(id))
    return res.status(404).send(`no note is available with id:${id}`);
  await notes.findByIdAndRemove(id);
  res.json({ message: "Note deleted successfully" });
};

export const updateNote = async (req, res) => {
  const { id: _id } = req.params;
  const note = req.body;
  if (!mongoose.Types.ObjectId.isValid(_id))
    return res.status(404).send(`No note is available with id:${id}`);
  const updatedNote = await notes.findByIdAndUpdate(
    _id,
    { ...note, _id },
    { new: true }
  );
  res.json(updatedNote);
};

export const sendSmsNotification = async (req, res) => {
  try {
    const { title, description, phone, noteId } = req.body;
    await smsNotification(title, description, phone, noteId);
    res.status(200).json({ message: "SMS sent successfully" });
  } catch (error) {
    console.log("sendSmsNotification error", error);
    res.status(500).json({ message: "Failed to send SMS" });
  }
};

export const sendEmailNotification = async (req, res) => {
  try {
    const { title, description, email, noteId } = req.body;
    await getNotification(title, description, email, noteId);
    res.status(200).json({ message: "Email sent successfully" });
  } catch (error) {
    console.log("sendEmailNotification error", error);
    res.status(500).json({ message: "Failed to send Email" });
  }
};

export const deleteInAppNotification = async (req, res) => {
  try {
    const { title, description, userId, message } = req.body;
    await inAppNotification(title, description, userId, message);
    res.status(200).json({ message: "Todo delted successfully" });
  } catch (error) {
    console.log("deleteInAppNotification error", error);
    res.status(500).json({ message: "Todo deleted successfully" });
  }
};

export const toggleNoteDone = async (req, res) => {
  try {
    const noteRef = await notes.findById(req.params.id);

    const note = await notes.findOneAndUpdate(
      { _id: req.params.id },
      { done: !noteRef.done }
    );

    await note.save();

    return res.status(200).json(note);
  } catch (error) {
    return res.status(500).json(error.message);
  }
};

It contains the following primary functions and then a few more:

getNotes - This function retrieves all todos from our database and sends them as a response.
createNote - This function creates a new todo and saves it in the database. It also sends an in-app notification to the user who created the note (this happens due to the Novu magic and our app has a lovely notification centre to house all the in-app notifications).
deleteNote - This function deletes a todo from the database based on the provided ID (depending on which todo's delete button was clicked).
updateNote - This function updates a todo in the database based on the provided ID.
sendSmsNotification - This function sends an SMS notification to the provided phone number (again by using the magical powers of Novu).
sendEmailNotification - This function sends an email notification to the provided email address (by summoning Novu's magical powers).

Now, all our http methods are done and we've exported them as well. Now we need to set-up the template (called as 'Schema') of the format in which we're expecting to send the data to the database we had created earlier.

Database Schema:

MongoDB stores data in entities called 'Collections'. Think of it like this: Our database is a room and collections are the boxes in that room within which we'll store data. Here is the schema for our auth file:

import mongoose from "mongoose";

const userSchema = mongoose.Schema(
    {
        id:{type:String},
        name:{type:String,required:true},
        email:{type:String,required:true},
        password:{type:String,required:true}
    },
    {
        collection: "user"
    }
)

export default mongoose.model("User", userSchema);

This schema defines the fields and types for the user document - id, name, email, and password.

The required property is set to true for name, email, and password fields, which means that these fields must have a value before a new user document can be created.

Similarly, here is the schema for our todo:

import mongoose from "mongoose";

const noteSchema = mongoose.Schema(
  {
    title: { type: String, required: true },
    description: { type: String },
    date: { type: Date, required: true },
    creator: { type: String, required: true },
    createdAt: {
      type: Date,
      default: new Date(),
    },
    done: { type: Boolean, default: false },
  },
  {
    collection: "note",
  }
);

export default mongoose.model("Notes", noteSchema);

Setting up Novu trigger functions:

We'll now need to set up Novu trigger functions for each notification type we wish our app to have, which is: in-app, email and sms.

To configure this, go the the Novu web platform and go to 'notifications' from the left navigation menu, then go to workflow editor and select a channel from the right menu. Now, click on the triple-dot menu and go to 'edit the template'

Now create a template for each notification - so, we'll need one template for email, one for sms and the last one for in-app notification. We'll also need to connect to providers for our notifications to work properly.

Luckily, Novu has a built-in 'Integrations Store' with tons and tons of providers for just about every channel you could think of - from email to sms to chat to push notifications.

It has it all!

Goto the integrations store from the left navigation bar and connect your providers.

We'll be using 'Sendgrid' for emails and 'Twillio' for sms.
Connect to both of them using the guide provided in Novu (see the pink 'here' link in the image below)

Once connected, you can configure each channel to your liking. Here, I'm showing how to configure the sms channel but using similar steps, you can also configure other channels.

Configuring a notification channel in Novu:

To configure a channel, go the 'Notification' from the left navigation menu then click on 'New' button on the top right to create a template. Give it a name and copy the trigger code.

Then dismiss it and go to 'Workflow Editor'. On the right, you'll see the channels you can add to the Novu canvas. Just drag 'SMS' from the right to the Novu canvas in the middle. This is where all the magic happens! ✨

You can add various notifications channel and customise the template to your liking and test the notification, introduce delays and more - all from one place. In fact, I'll turn this article into an essay if I start listing all the features of Novu because that's how many of them there are:

You can customise email and in-app channels using the above steps as well, just choose the relevant channel from the workflow editor.

Once you've copied code for triggering Novu for each channel, go to your project directory and create a file 'Novu.js' inside a directory Novu and paste it all there. Just make sure to update the snippet with relevant data like Novu API key and subscriber ID and the like.

The content of our Novu.js is shared below. It contains all the code snippets for various channels that we got from Novu's web platform in the step above:

import { Novu } from '@novu/node'; 
import dotenv from "dotenv";


dotenv.config();

export const getNotification = async (title,description,email,Id) => {
    const novu = new Novu(process.env.NOVU_API_KEY);

    await novu.subscribers.identify(Id, {
        email: email,
        firstName: "Subscriber"
    });

    await novu.trigger('momentum--L67FbJvt', {
        to: {
          subscriberId: Id,
          email: email
        },
        payload: {
            title: title,
            description: description
        }
    });
}


export const smsNotification = async (title,description,phone,Id) => {
    const novu = new Novu(process.env.NOVU_API_KEY);

    novu.trigger('sms', {
        to: {
        subscriberId: Id,
        phone: `+91${phone}`
        },
        payload: {
        title: title,
        description: description
        }
    });
}

export const inAppNotification = async (title,description,Id,message) => {
    const novu = new Novu(process.env.NOVU_API_KEY);

    await novu.subscribers.identify(Id, {
        firstName: "inAppSubscriber"
    });

    await novu.trigger('in-app', {
        to: {
            subscriberId: Id
        },
        payload: {
            title: title,
            description: description,
            message: message
        }
    });
}

Here, we are going to get Novu's api key from our '.env' file and without it, our app won't function.

Also, you'll need to enter the country code for sms as I've entered the county code for India (+91) in the sms trigger function above.

We also need to set up a utility function for authentication, which is like this:

import jwt from "jsonwebtoken";

const auth=  async (req,res,next)=>{
    try {
        const token= req.headers.authorization.split(" ")[1];
        const isCustomAuth= token.length<500;

        let decodedData;
        if(token && isCustomAuth){
            decodedData= jwt.verify(token,'secret');
            req.userId= decodedData?.id;
        }
        next();
    } catch (error) {
        console.log("auth middleware error",error);        
    }
}

export default auth;

Lastly, we need to set up http routes and map each application route to a corresponding function (that we've set up in the controller above).

This is the code for the routes of our todo:

import express from "express";
import {
  createNote,
  deleteNote,
  updateNote,
  getNotes,
  sendEmailNotification,
  sendSmsNotification,
  deleteInAppNotification,
  toggleNoteDone,
} from "../controllers/note.js";
import auth from "../utils/auth.js";
const router = express.Router();

router.get("/", auth, getNotes);
router.post("/", auth, createNote);
router.patch("/:id", updateNote);
router.delete("/:id", deleteNote);
router.get("/:id", toggleNoteDone);

// for novu API
router.post("/send-sms", sendSmsNotification);
router.post("/send-email", sendEmailNotification);
router.post("/delete", auth, deleteInAppNotification);

export default router;

And this the route file for authentication:

import express from "express";
import {signUp,signIn} from "../controllers/user.js"
const router= express.Router();

router.post('/signup',signUp);
router.post('/signin',signIn);

export default router;

This completes our backend and we'll now move to front-end or the client-side of our application. Just go and deploy the backend to any service of your choice.

I'm using the free version of Render but you can use something of your choice such as Heroku.

Both of them have continuous deployment and each time you push your commits to the back-end repo, a new build is triggered automatically.

Irrespective of which service you use, note down the URL once it is deployed to the Internet. We'll need to plug in into our front-end so that it can communicate with our back-end.

Moving to Front-end:

For front-end, we'll use the 'create-react-app' tool to set up the project (and its git repo) for our app.

Just open a terminal and execute the following command:

npx create-react-app moonshine

now go the 'Moonshine' directory and start the project by:

cd moonshine
npm start

This will start the basic react project. Again, we'll create a '.env' file and add Novu identifier (from the same place from where we got the Novu API key above) and add it to '.gitignore' so that git doesn't track it.

We'll also need to install the following packages:

Novu, axios, dotenv, jwt-decode, moment, react-datepicker, react-icons, react-redux and react-toastify

We can install each package using the following command:

npm i X

Where 'X' is the name of the package.

Directory structure for our front-end code:

We'll be spreading our front-end code into the following directories:

Components: This will contain the individual code for each component that our app is constituted of - Header, loader, todo and quote.
Pages: This will contain all the pages that our app contains. Each page is made up of one or more components. The pages in our app are - Home, login, sign up and quotes.
Common: This directory contains the file that is common across our entire app. For us, it will contain the functions to enable the front-end to talk to the back-end of our app.
Actions: As is evident from the name, it contains the code that dictates which action to fire when a certain task is to be performed by the user.
Reducer: Reducer lets us manage how the state changes when the actions are performed in our application.

I'm sharing the code for one file from each of above directories. If you want, you can look at the entire code of front-end as well as back-end from the GitHub repos linked below.

The code for our todo component is:

import React, { useState, useEffect } from "react";
import "./note.css";
import { useDispatch } from "react-redux";
import {
  deleteNote,
  deleteTodoInApp,
  sendEmailNotification,
  sendSmsNotification,
  toggleTodo,
} from "../../actions/notes";
import { MdOutlineEmail } from "react-icons/md";
import { BsTrash3Fill } from "react-icons/bs";
import { FiEdit } from "react-icons/fi";
import { MdSms } from "react-icons/md";
import { BsReverseLayoutTextWindowReverse } from "react-icons/bs";

const Note = ({
  item,
  setCurrentId,
  setShowForm,
  setIsEditing,
  setSelectedDate,
  theme,
}) => {
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [isEmail, setIsEmail] = useState(false);
  const [isSms, setIsSms] = useState(false);
  const [showDescription, setShowDescription] = useState(false);

  const [user, setUser] = useState(JSON.parse(localStorage.getItem("profile")));
  const dispatch = useDispatch();

  useEffect(() => {
    setUser(JSON.parse(localStorage.getItem("profile")));
  }, []);

  const donehandler = async (event) => {
    dispatch(toggleTodo(item._id));
  };

  const deleteTodoHandler = async () => {
    const deleteInAppNote = {
      title: item.title,
      description: item.description,
      userId: user?.result?._id,
      message: "deleted",
    };
    try {
      dispatch(deleteTodoInApp(deleteInAppNote));
      dispatch(deleteNote(item._id));
    } catch (error) {
      console.log("deleteTodoHandler error", error);
    }
  };

  const smsHandler = () => {
    setIsSms((prev) => !prev);
  };

  const emailHandler = () => {
    setIsEmail((prev) => !prev);
  };

  const descriptionHandler = () => {
    setShowDescription((prev) => !prev);
  };

  const editTodoHandler = () => {
    setCurrentId(item._id);
    setSelectedDate(new Date(item.date));
    setShowForm(true);
    setIsEditing(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const handleSubmitEmail = async (e) => {
    e.preventDefault();
    const emailNote = {
      title: item.title,
      description: item.description,
      email: email,
      noteId: item._id,
    };
    try {
      dispatch(sendEmailNotification(emailNote));
    } catch (error) {
      console.log("handleSubmitEmail error", error);
    }
    setEmail("");
  };

  const handleSubmitPhone = async (e) => {
    e.preventDefault();
    const smsNote = {
      title: item.title,
      description: item.description,
      phone: phone,
      noteId: item._id,
    };
    try {
      dispatch(sendSmsNotification(smsNote));
    } catch (error) {
      console.log("handleSubmitPhone error", error);
    }
    setPhone("");
  };

  return (
    <div
      className="note"
      style={{
        backgroundColor: theme ? "#1f1f2b" : "#f2f2f2",
      }}
    >
      <div className="note_container">
        <div className="note_text_container">
          <input
            type="checkbox"
            className="note_checkbox"
            checked={item.done}
            onChange={donehandler}
            style={{
              cursor: "pointer",
            }}
          />
          <h2 className={item.done ? "note_title done" : "note_title"}>
            {item.title}
          </h2>
        </div>
        <div className="note_button_container">
          {item.description.length > 0 && (
            <div
              className="icon_container note_description"
              onClick={descriptionHandler}
            >
              <BsReverseLayoutTextWindowReverse />
            </div>
          )}
          <div className="icon_container note_email" onClick={emailHandler}>
            <MdOutlineEmail />
          </div>
          <div className="icon_container note_sms" onClick={smsHandler}>
            <MdSms />
          </div>
          <div className="icon_container note_update" onClick={editTodoHandler}>
            <FiEdit />
          </div>
          <div
            className="icon_container note_delete"
            onClick={deleteTodoHandler}
          >
            <BsTrash3Fill />
          </div>
        </div>
      </div>
      <div className="note_input_container">
        {showDescription && (
          <p
            className={item.done ? "note_description done" : "note_description"}
          >
            {item.description}
          </p>
        )}
        {isEmail && (
          <form className="note_form_container" onSubmit={handleSubmitEmail}>
            <input
              className="input_box"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Enter Assignee email"
            />
            <button className="note_form_button">send Email</button>
          </form>
        )}
        {isSms && (
          <form className="note_form_container" onSubmit={handleSubmitPhone}>
            <input
              className="input_box"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              type="number"
              placeholder="Enter Number"
            />
            <button className="note_form_button">Send sms</button>
          </form>
        )}
      </div>
    </div>
  );
};

export default Note;

This component is responsible for rendering a todo card with the note's title, description (if any), and a checkbox to indicate the note's done status along with various options such as deleting the note, sending an email or SMS notification, editing the note, and marking it as done or undone.

Similarly, the code for quotes component is:

import React, { useEffect, useState } from "react";
import Quote from "../../components/Quote/Quote";
import "./landscape.css";

const numImagesAvailable = 988; //how many photos are total in the collection
const numItemsToGenerate = 1; //how many photos you want to display
const imageWidth = 1920; //image width in pixels
const imageHeight = 1080; //image height in pixels
const collectionID = 30697288; //Beach & Coastal, the collection ID from the original url

function renderGalleryItem(randomNumber) {
  fetch(
    `https://source.unsplash.com/collection/${collectionID}/${imageWidth}x${imageHeight}/?sig=${randomNumber}`
  ).then((response) => {
    let body = document.querySelector("body");
    body.style.backgroundImage = `url(${response.url})`;
  });
}

const Landscape = () => {
  const [refresh, setRefresh] = useState(false);
  useEffect(() => {
    let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);
    renderGalleryItem(randomImageIndex);

    return () => {
      let body = document.querySelector("body");
      body.style.backgroundImage = "";
    };
  }, []);

  const refreshImage = () => {
    let randomImageIndex = Math.floor(Math.random() * numImagesAvailable);
    renderGalleryItem(randomImageIndex);
    setRefresh((prev) => !prev);
  };

  return (
    <>
      <Quote refresh={refresh} />
      <button
        className="refresh_button"
        style={{ position: "absolute", top: 1, right: "15rem" }}
        onClick={refreshImage}
      >
        Refresh
      </button>
    </>
  );
};

export default Landscape;

It renders a beautiful image background (using the Unsplash API) with an inspirational quote on it. The component also includes a "Refresh" button that refreshes the image and the quote when clicked.

Making API calls to our back-end:

Moving on, since api calls are common across the entire application, we have put it into the 'common' directory. It uses axios to make API calls to the backend for functions like - user authentication, CRUD operations for todos and sending email and sms notifications.

Remember the backend URL we'd copied earlier. We'll plug it in this file to enable API calls from the front-end of our app to our back-end that we'd deployed earlier.

It contains the following code:

import axios from "axios";

const API = axios.create({ baseURL: "<Enter your back-end URL that you'd copied>" });

API.interceptors.request.use((req) => {
  if (localStorage.getItem("profile")) {
    req.headers.authorization = `Bearer ${
      JSON.parse(localStorage.getItem("profile")).token
    }`;
  }
  return req;
});

// for authentication

export const signIn = (userData) => API.post("/users/signin", userData);
export const signUP = (userData) => API.post("/users/signup", userData);

// for CRUD features

export const fetchNotes = () => API.get("/notes");
export const createNote = (newNote) => API.post("/notes", newNote);
export const updateNote = (id, updatedNote) =>
  API.patch(`/notes/${id}`, updatedNote);
export const deleteNote = (id) => API.delete(`/notes/${id}`);
export const updateNoteChecked = (id) => API.get(`/notes/${id}`);

// for novu implementation
export const sendSms = (note) => API.post("/notes/send-sms", note);
export const sendEmail = (note) => API.post("/notes/send-email", note);
export const deleteInApp = (note) => API.post("/notes/delete", note);

On sign-in and sign-up, we run the corresponding authentication actions from our 'auth action', the code for which is:

import * as api from "../common/api"
import {toast} from "react-toastify";

export const signin=(formValue,navigate)=> async (dispatch)=>{
    try {
        const {data}= await api.signIn(formValue);
        dispatch({type:"AUTH",payload:data});
        navigate("/home");
        toast.success("loggedin successfully!!");
    } catch (error) {
        console.log("signin error",error);
        toast.error("something went wrong!! try again");
    }
}

export const signup=(formvalue,navigate)=>async (dispatch)=>{
    try {
        const {data}= await api.signUP(formvalue);
        dispatch({type:"AUTH",payload:data});
        navigate("/home");
        toast.success("user created successfully");
    } catch (error) {
        console.log("signup error",error);
        toast.error("something went wrong!! try again");
    }
}

Lastly, we use a reducer to manage the state of Moonshine:

const noteReducer = (state = [], action) => {
  switch (action.type) {
    case "FETCH_ALL":
      return action.payload;
    case "CREATE":
      return [...state, action.payload];
    case "UPDATE":
      return state.map((note) =>
        note._id === action.payload._id ? action.payload : note
      );
    case "TOGGLE_DONE":
      return state.map((note) =>
        note._id === action.payload._id ? { ...note, done: !note.done } : note
      );
    case "DELETE":
      return state.filter((note) => note._id !== action.payload);
    default:
      return state;
  }
};

export default noteReducer;

Apart from files in these four directories, the root of our project directory also contains index.js and app.js.

In index.js, we've wrapped our 'App' component ( defined in the file app.js) inside 'router' and 'provider'. 'Router' allows us to define and use various app routes (as we've done above) while 'provider' lets us use the redux store of React, which basically means a database for front-end.

Wrapping the app component means that both these are available across our entire app:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { applyMiddleware, compose, createStore } from "redux";
import reducers from "./reducers";
import { Toaster } from "react-hot-toast";

const store = createStore(reducers, compose(applyMiddleware(thunk)));

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Router>
      <Provider store={store}>
        <App />
        <Toaster />
      </Provider>
    </Router>
  </React.StrictMode>
);

Finally, this is our humble app component:

import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home/Home";
import Landscape from "./pages/Landscape/Landscape";
import Login from "./pages/Login/Login";
import Signup from "./pages/Signup/Signup";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/gallery" element={<Landscape />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </div>
  );
}

export default App;

It renders different 'route components', each associated with a path in our app. When that path is requested, the corresponding component is rendered on the view of the client-side device.

Deploying our front-end:

We'll need to deploy our front-end separately. For this, we'll use Vercel and the process is fairly straightforward:

Sign into Vercel (using your GitHub account),
Point to the GitHub repo for the front end.
Enter your environment variables in there.

That's it!

If you've followed this tutorial, you will have a deployed version of Moonshine up and running, with the following features:

All the functions of a todo app- create a todo, update a todo, mark a task as done/undone and delete it.
dark/light mode.
Send sms reminder about a task to a phone number using Novu.
Send email reminder using Novu.
A quotes page with a beautiful image and quote each time you open it.
An in-app notifications centre with notifications when a todo is created or deleted.
A sign-up/sign-in page and many, many more.

Note: You may need to comply with local laws to send sms notification using Moonshine. In my case, Indian laws require one to undergo OTP verification (one time only) before sending sms.

You can access the code for the front-end as well as the back-end here:
Front-end
Back-end

Lastly, if you're stuck anywhere and need me, I'm always available here

This project was made possible by Novu and it takes a lot of time and effort to come up with tutorials like this, so if you'd spare a moment and star its GitHub repo, it would mean a lot to me. Thanks for your support! ⭐⭐⭐⭐⭐
https://github.com/novuhq/novu

Don't forget to comment down below if you liked the post.
Have a great one, bye! 👋

~ Sumit Saurabh