DEV Community: Ali Shour

React state management - Part 1: Introduction & local state management

Ali Shour — Mon, 02 May 2022 23:30:34 +0000

Introduction

While building a website using React, one of the most important things that you'll heavily use and rely upon is managing your state.

Throughout this series, I'll illustrate on the best use cases and ways to manage state throughout my applications and websites.

What is React?

More than a decade ago, developers used to build websites using Vanilla JS, while writing a lot of redundant code, resulting in longer processes. After a couple of years, developers were able to use newly introduced JS Frameworks based on UI components. This made the process easier and shorter to produce modern websites, with extra features such as re-using any component on our website. React thus was born (by Facebook), and today it's simply the most popular JS framework around.

What is React state management?

Each React component have a built-in state object, where you store data/assets that are persistent between component renderings. We can manage any component state locally or using an external state management library.

Local state management

Throughout this part of the series, We'll talk about managing our state locally.

Whilst React ships with many useful hooks, one of the most widely used ones is the useState() hook.

Well first, what is a hook exactly? From the official docs, a Hook is a special function that lets you hook into React features. useState is a Hook that lets you add React state to function components.

Example #1

Lets say we have a button that a user could toggle to show/hide specific data. In order to persist the status of this button, we have to use the useState hook to keep track of the state itself. Let's see the example below:

import {useState} from 'react'

export default function App() {

    // Declare a new state variable, which we'll call "isVisible"
    // It could be of any type, but here its a Boolean

    const [isVisible, setIsVisible] = useState(false)

    return (
        <>
            <button onClick={setIsVisible(prev => !prev)}>Toggle</button>
            {isVisible && <div>Hello there my friends, again!!</div>}
        </>
    )
}

First, when we called the useState hook, we declared a new "state variable". It returns a pair of values: the current state variable, which is in our example isVisible, and a function that we must use in order to update this value, aka setIsVisible in our example. The argument we passed to the hook itself is the initial state, which in our example represents a Boolean (false).

Next we hooked our button with a callback function, calling the setIsVisible(prev => !prev). Clicking on this button would effectively flip this Boolean value to the opposite of its previous value.

Thus, when a user presses the toggle button for the first time, it changes the isVisible boolean value from false to true, which results in showing the message <div>Hello there my friends, again!!</div>. Clicking it again results in hiding the value again as it was originally.

Example #2

Now let's take another example:

import {useState} from 'react'

const Message = ({user}) => {
    return (
        <h1>User Name: {user.name}</h1>
        <h2>User Age: {user.age}<h2>
    )
}

export default function App() {

    const [user, setUser] = useState({
        name: 'Sam',
        age: '24'
    })

    return (
        <>
            <p>User information:</p>
            <Message user={user} >
        </div>
    )
}

In the above example, In the App component (Parent) we declared a new state variable user using the useState hook, while passing the initial state as an object containing some user information (mimicking an object fetched from some auth API). We then called a child component Message that we 'll create now and passed the user state variable as a prop. Then we create this Message child component and destructure the user state variable from the props and consumed it as we want (in our example we just displayed user's name and age in a simple message).

This example is just a very simple and basic presentation on how state variables gets passed from a parent component to its child, which relates to prop-drilling. Whilst we should always keep in mind that this flow of data is always downwards, which means we simply can't declare a state variable in a child component and consume it in the parent, but its the other way around.

Downside of prop-drilling

Throughout a more complex development environment, sometimes simple prop-drilling of some state may create complexity to our work-flow. The reason is what if we need to consume a certain state variable not in a child directly, but rather in a deeper nested child. We'll need to tweak our code and find a better way of consuming state coming from a grand ancestor (grandparent). This is exactly where state management libraries come in hand. In the following parts of this blog series, we'll take a look at my implementations when dealing with global state management.

Final thoughts

State management is mandatory in any web development architecture, thus mastering your way through the best practices and ways of dealing with state management is a huge boost to your web development career, so please make sure to read the next upcoming parts of this blog series.

I'm constantly writing new blog posts where I share my expertise & skills in topics related to web development. If you're interested in such topics to boost your development career, consider following me! 😇 Or visit my personal website!

Thanks for reading, Ciao! 👋

Creating a RESTful API easily using node.js | Part 3

Ali Shour — Mon, 25 Apr 2022 20:40:05 +0000

Introduction

Throughout the two previous parts, we've learned how to setup a very basic RESTful API from scratch, and tested this API locally in a very simple example. In this post, we're going to integrate this API with MongoDB Atlas, and use mongoose to manipulate our database collection by fetching, editing, and deleting some data. Fist step is to open your project with your favorite code editor (VS code in my case). You can download the source code from the previous part by cloning/downloading this repo. Or Download Full project by cloning/downloading this repo.

Adding new packages

First of all, let's add some new packages we're going to use in our project. Open up the terminal, and make sure you're in the root directory of your project, then run the following script:

npm i dotenv mongoose

The first package (dotenv) is used to add environment variables in our project. The second package (mongoose) is just a JS library that creates a connection between MongoDB and the Express web app framework fluently.

File Structure

Our next step is to create an intuitive, easy-to-use file structure for our project. This step is vital for the long-term life of your project for many reasons. For starters, a messy structure and code often leads to critical issues in the future. However, a good file structure helps us not only write cleaner and readable code, but also avoid repetition by writing reusable pieces of code across our app, in addition to ability to add new features and blocks of code (middleware) without disrupting any existing code.

Let's take a look at the structure I'm initially going to follow:

Each folder serves its unique purpose:

Routes folder contains each route file for our project
Controllers folder contains the logic that each specific route performs
Models folder containing all the models created (each model is an instance f a document). Models are responsible for creating and reading documents from the underlying MongoDB database
Middleware folder contains each middleware function we may for specific routes
Utils folder contains useful utility functions
.env file which contains all environment variables we're going to use

Signing up with MongoDB Atlas

Next, we're going to (sign up here) in order to integrate our API with mongoDB Atlas services. After signing up, follow the steps below:

Choose the Shared Cluster option (free tier option), and click 'Create Cluster'
Add a username and password under the 'How would you like to authenticate your connection?' option and click 'Add user'. Make sure to save those credentials to use later
Add an IP address to access the project. For now, just add 0.0.0.0 and click 'Add Entry'
After finishing all the above steps, click 'Finish and Close' on the bottom. Note that creating a cluster would take about 3-5 mins
Next, click on connect button -> Connect your application -> Copy the connection string provided

6. Open .env file which we created earlier, and add the following (Make sure to replace yourusername and <password> with your actual credentials):

MONGO_URL = mongodb+srv://yourusername:<password>@cluster0.yv.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

Creating a monogoDB connection

After setting up our cluster, we're going to connect to it right from our application.

First create a new file inside Utils folder called connectDB.js then navigate inside the file and add the following helper function:

import mongoose from "mongoose"

const options = {
    useUnifiedTopology: true,
    useNewUrlParser: true,
}

const connectDb = () => {
    if (mongoose.connections[0].readyState) {
        console.log("MongoDB already connected")
        return
    }
    return mongoose.connect(process.env.MONGO_URL, options, () => {
        console.log("Connected successfully to the DB!")
    })
}

export default connectDb

Modifying index.js

Next, we'll modify our index.js file as follows:

import express from "express"
import cors from "cors"
import helmet from "helmet"
import msgsRoute from "./routes/msgs.js"
import dotenv from "dotenv"
import connectDb from "./utility/connectDb.js"

const app = express()
const port = process.env.PORT || 5000

const corsOptions = {
    origin: "*",
    "Access-Control-Allow-Origin": true,
    optionSuccessStatus: 200,
}

app.use(cors(corsOptions))
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
app.use(helmet())

dotenv.config()
connectDb()

app.use("/msgs", msgsRoute)

app.get("/", (req, res) => {
    res.send("Welcome to our RESTful API!")
})

app.use((req, res, next) => {
    const error = new Error("Something went wrong")
    error.status = 404
    next(error)
})
app.use((error, req, res, next) => {
    res.status(error.status || 500)
    res.json({
        error: {
            message: error.message,
        },
    })
})

app.listen(port, (err) => {
    if (err) throw new Error("Error while connecting to the server")
    console.log(`Server is live and running at: http://localhost:${port}`)
})

export default app

The only changes we've made from our setup in part-2 are:

imported the dotenv package at the top, then called config() method on it (after app initialization)
imported our newly created helper function (connectDb) used to connect to our mongodb cluster, then called this function (after app initialization)

Creating our first Model

As mentioned before, models are responsible for creating and reading documents from the underlying MongoDB database. For example, most database collections contains a User model, which basically resembles an object containing some useful data about a user (name, email, password, bio, age, etc...).

Lets create a Message model by first creating a file called message.js inside models folder, then add the following to the file:

import mongoose from "mongoose"

const messageSchema = new mongoose.Schema(
 {
  content: {
   type: String,
   required: [true, "Please provide message content"],
  },
 },
 {
  timestamps: true,
 }
)

const Dataset = mongoose.models.message || mongoose.model("message", messageSchema)

export default Dataset

Modifying msgs route

In the previous part, we created a msgs route in the routes folder which gathers all http methods related to msgs collection. Let's edit this file:

import express from "express"
import { addMsg, deleteMsg, getMsgs, updateMsg } from "../controllers/msgs.js"

const router = express.Router()

router.get("/", getMsgs)
router.post("/", addMsg)
router.put("/:msgId", updateMsg)
router.delete("/:msgId", deleteMsg)

export default router

In the above modification, we've separated the logic of each http method (GET, POST, PUT, DELETE) by importing new helper functions created in a new separate controller file, which resides inside the controllers folder. So let's navigate to this newly created file and add the following:

import Message from "../models/message.js"

export const getMsgs = async (req, res) => {
    try {
        const msgs = await Message.find()

        res.status(201).json(msgs)
    } catch (error) {
        res.status(500).json({
            msg: error,
        })
    }
}

export const addMsg = async (req, res) => {
    try {
        const newMsg = await Message.create({ content: req.body.content })
        res.status(201).json(newMsg)
    } catch (error) {
        res.status(500).json({
            msg: error,
        })
    }
}

export const updateMsg = async (req, res) => {
    try {
        await Message.findByIdAndUpdate(
            req.params.msgId,
            { $set: req.body },
            {
                new: true,
            }
        )
        res.status(200).json("Message has been updated successfully!")
    } catch (error) {
        res.status(500).json({
            msg: error,
        })
    }
}

export const deleteMsg = async (req, res) => {
    try {
        let msg = await Message.findById(req.params.msgId)

        if (!msg)
            return res.status(404).json({
                msg: "msg Not Found",
            })

        await msg.remove()

        res.status(200).json("Msg has been deleted successfully!")
    } catch (err) {
        res.status(500).json({
            msg: error,
        })
    }
}

Testing the newly created endpoints

After adding the functions above, we're ready to start our server in order to test our endpoints. Open up your terminal, and run the following script:

npm run start-dev

Now that our server is live, let's open up Thunder client, or your favorite API testing tool, such as postman to test our newly created endpoints.

Post request

Our first test would be posting a new message to our database since its still empty.

Lets add our endpoint at the top, change the http method to POST on the left, click on the body tab, pick raw JSON option, and add the following JSON object:

{
    "content": "Hey there my great friends!"
}

Then click on the send button to add our message model to our database collection. The process would look something like this:

The response we'll get back would look something like this:

To see our live changes, lets navigate to our database collection going back to our cluster options in the mongoDB Atlas website and clicking on the browse collections option, which will show us our collection:

PUT request

Now that we have an existing model inside our messages collection, we can add as much as we want. Now, we'll edit an existing message like below:

The response we'll get back would look something like this:

Delete request

Now we're going to delete an existing model from our collection by adding its unique ID to the request params (similar to what we did above for the PUT request). The process will look something like below:

Final Thoughts

Throughout this series, we've learned how to create a simple RESTful API from scratch, tested it locally, and the integrated it with mongoDB to simulate CRUD operations in our platform. Knowing how to properly use a RESTful API is definitely a huge asset to add in your skill-set. Download Full project by clonning/downloading this repo.

Creating a RESTful API easily using node.js | Part 2

Ali Shour — Mon, 25 Apr 2022 03:07:01 +0000

Introduction

Throughout the first part, we've learned how to create a very basic RESTful API, which could be used to communicate with our back-end architecture and fetch data from our database. During this post, I'm going to test this API locally in a simple example to understand its technical usage.

Helmet

Our first step is to install a new package called helmet to our dependencies. It is used to automatically secure our app by setting various HTTP headers.

npm i helmet

New Routes folder

Next, we're going to create a new folder called routes in the root directory and add a file inside this folder called msgs.js. This file stands for a specific route (msgs route) that contains one or more http method/s (GET, POST, PUT, DELETE).

Now open this newly created msgs.js route, and add the following:

import express from "express"

const router = express.Router()

const msgs = [
    {
        "id": "1",
        "content": "Hey there my friends!"
    },
    {
        "id": "2",
        "content": "Hello hello hello!"
    },
    {
        "id": "3",
        "content": "I hope everything is great!"
    },
    {
        "id": "4",
        "content": "How are you today?"
    }
];

router.get('/', (req, res) => {
    res.send(msgs);
});

export default router

Modifying index.js

Next, we'll modify our index.js file as follows:

import express from "express"
import cors from "cors"
import helmet from "helmet"
import msgsRoute from "./routes/msgs.js"

const app = express()
const port = process.env.PORT || 5000

const corsOptions = {
    origin: "*",
    "Access-Control-Allow-Origin": true,
    optionSuccessStatus: 200,
}

app.use(cors(corsOptions))
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
app.use(helmet())

app.use("/msgs", msgsRoute)

app.get("/", (req, res) => {
    res.send("Welcome to our RESTful API!")
})

app.use((req, res, next) => {
    const error = new Error("Something went wrong")
    error.status = 404
    next(error)
})
app.use((error, req, res, next) => {
    res.status(error.status || 500)
    res.json({
        error: {
            message: error.message,
        },
    })
})

app.listen(port, (err) => {
    if (err) throw new Error("Error while connecting to the server")
    console.log(`Server is live and running at: http://localhost:${port}`)
})

export default app

The only changes we've made from our setup in part-1 are:

calling helmet package on our app
Initializing a corsOptions object and passing it as an argument when we called cors()
calling our msgs route to be able to consume it

Testing using Thunder client

Last but not least, open your terminal, and type the following script:

npm run start-dev

Now that our server is live, we'll test our API endpoints using any API testing tool, such as postman. But I prefer to use Thunder client which is a VS code extension for simple API testing. After installing the extension, open it from the left bar (or ctrl + shift + p and search for thunder client), add the API endpoint on top and click send:

Final Thoughts

Throughout the example above, we've tested our API locally by manually creating msgs array (simulating a database model), and fetching its items using our API. Of course this isn't anywhere near complete, but it's just a simple starting way for beginners to understand how an API works in general. Click here for source code of this blog-post. Throughout the next blog post, I'm going to connect this API with a database (MongoDB) and use other http methods (PUT, POST, DELETE) to modify my database collection.

Creating a RESTful API easily using node.js | Part 1

Ali Shour — Tue, 19 Apr 2022 01:05:24 +0000

What is a RESTful API?

First off, an API, short for Application Programming Interface, is simply a way of communication between two or more services, sometimes described as a mediator between users/clients & resources/services they request. RESTful APIs, however, is a set of principles that conforms to the constraints of REST architecture style and thus allowing for integration with RESTful web services.

Step.1: Initializing a new project

The very first step is to create an empty folder manually in the directory of your choice (Using Right-click), or via Terminal/Bash:

mkdir myProject
cd ./myProject

Then setting up a new empty npm package using legacy init (-y for ignoring questions):

npm init -y

Note that you first have to have node.js installed on your machine. Another side note is that you can edit the package.json file and add your specified info such your name (author), git repo, description, etc.

Step.2: Installing necessary dependencies

Although I'll be using the most basic setup to create a very simple RESTful api, you can definitely add any other package you find useful. The two main packages I'll be using are express, which is a minimal node.js framework used to simplify our workload, and CORS which handles Cross-Origin-Resource-Sharing.

npm i express cors

I'll also be using nodemon, which is a tool that automatically restarts our node application when file changes in the directory are detected:

npm i --save-dev nodemon

Step. 3: Creating an entry point

The next step is to create an entry point for our node.js application (usually named index.js) inside the root of our project. Then modifying our package.json file as follows:

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "Add project description here if you want to",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "start-dev": "nodemon index.js",
  },
  "keywords": [],
  "author": "your-name",
  "license": "ISC"
}

Notice that in order to run our application locally (development environment), We'll use the second script (start-dev), whilst the first one is only for production environment. Another side note is that adding "type": "module" to the package.json enables ES6 features.

Next, and before starting our app, open the newly created index.js file and add the following:

import express from "express"
import cors from "cors"

const app = express()

app.use(express.urlencoded({ extended: false }))
app.use(express.json())
app.use(cors())

const port = process.env.PORT || 5000

app.get("/", (req, res) => {
    res.send("Welcome to our new custom API!")
})

app.use((req, res, next) => {
    const error = new Error("Something went wrong")
    error.status = 404
    next(error)
})
app.use((error, req, res, next) => {
    res.status(error.status || 500)
    res.json({
        error: {
            message: error.message,
        },
    })
})

app.listen(port, (err) => {
    if (err) throw new Error("Error while connecting to the server")
    console.log(`Server is live and running at: http://localhost:${port}`)
})

export default app

Throughout the above setup, we initiated our app using express, called some useful express methods, and used the cors package which we installed earlier. We also assigned a port variable, created a welcome message to appear when calling our API, and simply handled any unexpected future errors. Last but not least, we called the listen method in order to start a server on our custom port.

Now fire the following command on your terminal:

npm run start-dev

Pressing ctrl + link provided on our terminal will fire a localhost server as the following:

Final Thoughts

Throughout this example, we created a very basic RESTful API, which of course isn't anywhere near complete, but a good building block for an API. In the upcoming part, we'll add more functionalities to our API, and test it with and without a connection to a database.

Send emails from your website to any user super easily!

Ali Shour — Mon, 18 Apr 2022 13:54:02 +0000

Introduction

First of all, let me give you a heads up of what I'm going to be talking about, and the purpose of this blog. In today's world, almost every website or web-app sends all kinds of emails to their respective users, each with a distinct functionality or purpose.

Purpose of sending such emails

Some examples of those emails are:

User verification emails (authentication)
Reset authentication passwords
Marketing emails
Subscribing to a newsletter
Responding to a report case (ticket)
Responding to a contact-me form
Transactional emails

As you can tell, there are a plenty of use cases where it's almost mandatory to send emails to our users right from our platform. But how can we implement an easy way to do so, without so much hassle?

What is Nodemailer?

Nodemailer, by their own definition, is a module for Node.js applications to allow easy as cake email sending. It is the solution most users turn to by default.

Project Implementation

To start with this quick project, you must have a node.js application pre-set and running already. If you're not very familiar with node.js and need a little help setting up a simple back-end environment, check out my upcoming blog to help you out.

Next up, install Nodemailer in your root directory:

npm i nodemailer

Now you need to use an email delivery service, which provides you with a simple way to send those quick emails to your clients/visitors. There are plenty of those services available, with each having it's own features and pros over the other. The most common ones are Sendgrid, SendInBlue, HubSpot, omniSend, etc. The one I'll be using is going to be SendIbBlue, due to the ease of their service, and their pretty good customer support, in case of any unexpected issue. Steps for creating an account:

Visit their official website
Click on the sign up button on the top right corner
Go to the SMTP & API tab, here
Keep this tab open for later on, where we'll be using an API key or SMTP Server necessary for the setup later

Modifying our node.js app

Now in order to see the magic happen, we need to modify our node.js app. First, Create a file inside the root directory, and call it whatever you like, ex. sendMail.js. Next, import nodemailer as below (P.S. To use import method over require, go to package.json file, and add the option, "type": "module")

import nodemailer from 'nodemailer'

Then, we'll create and export a function, which contains the following:

Creating a transport using nodemailer's createTransport() method, while passing server info, which we got from sendInBlue as an argument
Creating a mailOptions object, which contains our email options such as sender email, receiver email, subject of the email, and the email itself
Calling SendMail() method on the transport while passing the above options as an argument

import nodemailer from "nodemailer"

//Note that I stored my credentials in my .env file
const { SMTP_KEY, SMTP_PASS, SENDER_EMAIL, REPORT_PASS } = process.env

export const sendReportMail = (to, mailContent) => {
    const smtpTransport = nodemailer.createTransport({
        host: "smtp-relay.sendinblue.com",
        service: "Sendinblue",
        port: 587,
        auth: {
            user: SMTP_KEY,
            pass: SMTP_PASS,
        },
    })

    const mailOptions = {
        from: SENDER_EMAIL,
        to: [to, SENDER_EMAIL],
        subject: "Email subject",
        html: `
            <div >
                    Dear ${mailContent?.name},
                    Thanks for contacting us! We'll make sure to get back in touch as soon as possible!
            </div>
        `,
    }

    smtpTransport.sendMail(mailOptions, (err, info) => {
        if (err) return err
        return info
    })
}

Last but not least, we can use this function inside any router controller to easily send user emails, as the example below:

export const sendReport = async (req, res) => {
// Getting report data, which the user himself added, while we received this data with a POST request
    const { firstName, lastName, subject, message } = req.body

    try {

            const mailContent = {
                name: `${firstName} ${lastName}`,
                subject,
                message,
            }

            sendReportMail(user?.email, mailContent)

            res.status(200).json({
                message:
                    "Report submitted successfully! Please check your email for confirmation.",
            })
        }
    } catch (err) {
        if (err?.errors?.email?.name === "ValidatorError") {
            res.status(403).json({
                message: "Please enter a valid email",
            })
        } else {
            res.status(500).json({
                message: "Server Error",
            })
        }
    }
}

Final Thoughts

By Implementing the above steps correctly, you could hugely benefit in any of your projects that requires authentication, or if you simply want to send quick marketing emails to your end users. The use cases are definitely much more than that, but in short this would be a great tool to at least try.