DEV Community: Collins Mbathi

Reactjs Protected Route

Collins Mbathi — Thu, 17 Nov 2022 20:55:55 +0000

Introduction

React Router provides a convenient way to define protected routes that require authentication in order to access. By default, these routes are treated as public routes and anyone can access them.

To create a protected route, you need to use the React Router Route component and specify the path that you want to protect. Then, you can use the render prop function to conditionally render the component that you want to protect.

If the user is not authenticated, they will be redirected to the login page. Otherwise, they will be able to access the protected route.

In the following section, we will look at some of the prerequisites for this tutorial.

Prerequisites

The following are required to complete this tutorial:

Knowledge of JavaScript and React.
Knowledge about Redux toolkit
Nodejs should be installed on your system.
npm should be installed on your system.

In the following section, we will delve into the details of this protected Route.

About Protected Route

In web applications, routing is the process of determining how to respond to a client request for a specific URL. In React, this is typically accomplished using the React Router library.

React Router provides a number of different ways to configure how your application renders the different URLs that it supports. One of the options that you can specify is whether or not a given route should be protected.

A protected route is one that can only be accessed by an authenticated user. If a user tries to access a protected route and they are not logged in, they should be redirected to the login page.

In our next section we will be talking about Redux which we will be using in our tutorial

Understanding Redux toolkit

Redux is a toolkit for managing state in JavaScript applications. It is used in conjunction with React and other frameworks.

Redux provides a streamlined way to manage state changes in your application. It includes a set of tools for managing actions, reducers, and middleware. It also provides a way to connect your application to a store.

Redux is a great toolkit for managing state in JavaScript applications.

We are going to use it to store our user details .

In our next section, we are now going to get to the code

Building A simple Web Page with Reactjs demonstrating Protected Route

In this part of this tutorial, we will use Reactjs, Redux toolkit and react-router-dom to build a simple web page demonstrating protected Route. The project directory structure for our microservice app is shown below

|   .gitignore
|   package-lock.json
|   package.json
|   README.md
|   
+---public
|       favicon.ico
|       index.html
|       logo192.png
|       logo512.png
|       manifest.json
|       robots.txt
|       
\---src
    |   App.js
    |   index.js
    |   
    +---Home
    |       Home.jsx
    |       
    +---Login
    |       Login.jsx
    |       
    +---Redux
    |   |   store.js
    |   |   
    |   \---Slice
    |           Slice.js
    |           
    \---utils
            ProtectedRoute.js

First we need to create our React application boilerplate

Go to your terminal and run the following command below :

npx create-react-app protected-route

After it has been created, open the folder in a code editor, such as Visual Studio Code.
Remove any unnecessary files from the folder that will not be used in this tutorial.

Installing Dependencies

To install the dependencies needed for this tutorial, open your code editor's terminal and type the following command.

npm i react-router-dom react-redux redux

Creating a Home Page

Create a directory, call it Home, then inside it have a file Home.jsx with the following code.

import React from 'react'

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home

Creating a Login Page

Create a directory, call it Home, then inside it have a file Login.jsx with the following code.

import React from 'react'

const Login = () => {
  return (
    <div>Login</div>
  )
}

export default Login

Setting up the routes

Navigate to your app.js file in your src directory and write the code below.

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

function App() {
  return (
    <BrowserRouter>
    <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/login" element={<Login/>} />
    </Routes>
    </BrowserRouter>
  );
}

export default App;

lets look at some facinating code we have just written.

first we have imported react-router-dom package

import {BrowserRouter,Route,Routes} from "react-router-dom";

We have created Routes for our components so that we can navigate through them in our page, specifically the Home and Login components.

In the following section, we will set up our redux.

Creating our Redux

Create a new folder for redux and name it Redux. Within the Redux folder, create a new folder and name it Slice. Make a file called userSlice.js in the slice folder.
Inside the slice.js file write this code below :

import  {createSlice} from '@reduxjs/toolkit';

const initialState = {

    state: {
        isFetching: false,
    },
    user:{
  name:"collins",
  isAuthenticated:true
},
}


const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setIsFetching : (state) => {
        state.state.isFetching = true;
  }, 
  }  
});

export const {
      setIsFetching,
    } = userSlice.actions;


export default userSlice.reducer;

In our code, we created a redux slice that only stores two properties in our user object.

These are the specifics we'll use to design our secure route. They are the qualifications.

Creating the redux store

Create a store.js file in the Redux folder and enter the code below.

import {configureStore} from '@reduxjs/toolkit';
import {
    persistStore,
    persistReducer,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
  } from "redux-persist";
  import storage from "redux-persist/lib/storage";

 import userReducer from "./Slice/Slice";

  const persistConfig = {
    key: "root",
    version: 1,
    storage,
  };

  const rootReducer = persistReducer(persistConfig, userReducer);

const store = configureStore({
  reducer: { user: rootReducer},
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});
export let persistor = persistStore(store);
export default store;

As can be seen in the code above, this store.js file is where we pass our reducers and add logic about whether we want the data we're managing to persist or not.

Passing the Store Prop

Navigate to your src folder's index.js file and wrap the content within with the store module so that it is effective in all of our components ,We will accomplish this with the help of the Provider component imported from the react-redux package.
Insert it as shown in the code below.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './Redux/store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
  <App />
</Provider>
);

Creating the Protected Route File

Navigate to your src folder and make a folder called utils. Inside the utils folder, make a file called ProtectedRoute.js

Write the following code in the ProtectedRoute.js file.

import React from 'react'
import {useSelector} from "react-redux"
import {Navigate, useLocation} from "react-router-dom"

const ProtectedRoute = ({children}) => {
    const user = useSelector((state) => state.user);
    let location = useLocation();

    if(!user.state.isAuthenticated) {
        return <Navigate to="/login" state={{ from: location}} replace />
    }
 return children

};

export default ProtectedRoute;

As seen in the code above, we first import our useSelector from our react-redux package, which will allow us to access our user object that is stored on our redux.

After that, as you can see, we write some logic to check if isAuthenticated is true, and if it is, we should return the user to the Home screen if its not then the user should be Navigated to the login.
In the following section, we will wrap our protected Route module.

Wrapping the Protected Route Module

Return to your app.js folder and update your code to the following.

import Home from "./Home/Home";
import Login from "./Login/Login";
import {BrowserRouter,Route,Routes} from "react-router-dom";
import ProtectedRoute from "./utils/ProtectedRoute";

function App() {
  return (
    <BrowserRouter>
    <Routes>
        <Route path="/" element={
        <ProtectedRoute>
        <Home/>
        </ProtectedRoute>
     }/>
        <Route path="/login" element={<Login/>} />
    </Routes>
    </BrowserRouter>
  );
}

export default App;

As seen in the code below, we've wrapped the module around the route we want to secure. In our case, the Home page must be authenticated in order to be accessed; otherwise, the user will be directed to the login page in order to be authenticated and able to access the Home page.

Congratulations, you now have a web page with a protected Route.

The complete source code is available here for your reference.

Congratulations, you have completed the tutorial. How did you find it? I'm sure it's fantastic.

Conclusion

In conclusion, the Reactjs Protected Route is a great way to keep your users' data safe and secure. By using this type of route, you can ensure that only authorized users can access certain areas of your website. This is a great way to keep your site's data safe and secure and to keep your users' information confidential.
Thank you for taking the time to read this, and I hope to see you in the next one. Have a good time exploring ✨✨✨.

Getting Started With Nodejs and Docker

Collins Mbathi — Thu, 20 Oct 2022 13:25:07 +0000

Why Do You Need Docker ?

How many times have you built an application and it works perfectly on your local machine, but when you share it with someone else, it doesn't work on their machine, and you find yourself arguing, "But it works on my machine."
These issues will no longer exist because Docker has come to the rescue.
Docker is a container that contains everything our application requires.

1.The package's version, for example
2.The Requirements
3.The Original Source Code

What Is Docker, and How Does It Work?

Docker is an open platform for application development, shipping, and running. Docker allows you to decouple your applications from your infrastructure, allowing you to deliver software more quickly. Docker allows you to manage your infrastructure in the same way that you manage your applications. You can significantly reduce the time between writing code and running it in production by utilizing Docker's methodologies for quickly shipping, testing, and deploying code.

Docker Features

Although Docker has many features, we have listed some of the most important ones below.

1.Easy and fast Configuration - This is a key feature of Docker that allows us to easily and quickly configure the system.

We can deploy our code with less effort and time. Because Docker can be used in a wide range of environments, the infrastructure requirements are no longer linked to the application's environment.

2.Increase productivity - By facilitating technical configuration and allowing for rapid application deployment. Without a doubt, it has increased productivity.

3.Application Isolation - It provides containers for running applications in an isolated environment.

4.Swarm - It is a clustering and scheduling tool for Docker containers. Swarm uses the Docker API as its front end, which helps us to use various tools to control it.

5.Routing Mesh - It routes the incoming requests for published ports on available nodes to an active container. This feature enables the connection even if there is no task is running on the node.

6.Services - Services is a list of tasks that lets us specify the state of the container inside a cluster.

7.Security Management - It enables us to save secrets into the swarm and then choose which services have access to which secrets.

How to Setup Docker

You can install Docker on your machine based on the operating system you are using. The link to download Docker for your machine based on the operating system is provided below: -

Docker Installation

Images and Containers

Images
They act like blue prints for containers.
Docker images, like templates, serve as a set of instructions for building a Docker container. Docker images can also be used as a starting point when using Docker.
Images are made up from several layers, for example :-
-Dependencies
-Source Code
-Parent Image :- for parent image it includes the Os and sometimes the runtime environment
-commands
-Extra configuration eg.env variables

Container
Is a process of running our Application.

As you can see from the brief description of a drawing above,
Containers run our applications as outlined by the Images .
A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings.

Dockerfiles and Image Creation

To demonstrate, we will generate images with Nodejs.
In the IDE of your choice, make a folder called example-docker.
Check that nodejs is installed on your machine.
Make a file inside the folder called index.js.
and perhaps inside the index.js file ,You can set up a small server and run it.

const express = require('express');
const app = express();
const dotenv = require("dotenv");
dotenv.config();
const PORT = process.env.PORT || 5000 ;

//routes
app.get('/',(req,res)=> {
res.send("Hello world")
})
//listen
app.listen(PORT, ()=> {
    console.log(`listening to port ${PORT}`);
})

create another file in the folder and call it .Dockerfile.
This is where we will write our images.
In the Dockerfile what goes at the top is the parent Image.
To add images to our Docker file, we will use several commands.

FROM - We will use this command to download the environment and specify the version.

FROM node:17-alpine

WORKDIR - If we add paths, we must also add WORKDIR "the directory" where we want to copy the code. so that the dependencies can be installed.

FROM node:16-alpine

WORKDIR /server

RUN - This command will assist us in installing the dependencies for our third image.

FROM node:16-alpine

WORKDIR /server

RUN npm install

4.COPY . . - This command is used to copy the entire source code.

FROM node:16-alpine

WORKDIR /server

COPY package.json .

RUN npm install

COPY . .

5.CMD - This is the command of running the image
the format of writting it will be:

FROM node:16-alpine

WORKDIR /server

COPY package.json .

RUN npm install

COPY . .

CMD ["node", "index.js"]

Our image is ready, now its time you run it in your terminal

docker build -t "name of image"

Including a Dockerignore File

If we have a node module file that we want to ignore in our folder, we can use the ignore command..dockerignorefile .

Containers That Start and Stop

Commands of controlling and image

docker images - It provides a comprehensive list of images.

docker run --name "container name" "image name" - This runs the image and creates the container.

docker ps - This is to observe the process in action.

docker stop "container name" - It halts the container you specified.

docker start "container name" - When we run this it runs the container without needing the Image

I hope you enjoyed 🤗🤗 reading the article and learned a lot; in our next article, we will discuss Managing images ,containers, and how to deploy images in Docker Hub. Happy Coding 🎉🎉✨

Using Javascript to Implement Stacks

Collins Mbathi — Mon, 04 Jul 2022 21:01:22 +0000

Introduction

A stack is a data structure that allows you to store data in a way that allows you to access the data in a last-in, first-out (LIFO) manner. The last data item you add to the stack is the first data item you can remove from the stack.
JavaScript provides several ways to implement stacks. In this article, we'll look at how to use the Array data structure to implement a stack in JavaScript.
In the real world, we can say, for example, when you pile a lot of pancakes together as shown below:

As seen in the photo, the last pancake added to the pile will be the first to be removed.

It is implemented in undo functionality in applications.
In web browsing, the most recent site visited is always the first in the browsing history.

In the following section, we will look at some of the prerequisites for this tutorial.

Prerequisites

The following are required to complete this tutorial:

Node.js installed on your system.
Sound knowledge of JavaScript.

In the following section, we will now implement stacks.

Now we will implement how a stack works in JavaScript. Here is an example of a stack in JavaScript using an array:

// Stack class
class Stack {

    // Array is used to implement stack
    constructor()
    {
        this.items = [];
    }

    // Methods to be implemented
    // push(value)
    // pop()
    // peek()
    // isEmpty()
    // printStack()
}

As you can see in the preceding example, we created the body of a stack class, which includes a constructor in which we declare an array to implement the stack. As a result, when a stack class object is created, this constructor, as well as some methods for implementing adding and removing values, are automatically called.

Let Us Now Put Each Method Into Action:

1.Push() - This method is used to insert elements into an array.

 push(value) {
     this.items.push(value);

     return this
    }

This method adds a value to the array of items.

2.Pop() - This method is used to remove the array's top element.

pop() {

        if (this.items.length === 0 ) {
            return console.log("empty stack");
        } else {
            return this.items.pop(); 
        }
    }

First, we check to see if the array has elements; if it doesn't, it will return underflow. The pop method will remove the element that was most recently added to the items array.

3.peek - When called, this method returns the array's topmost element. The final component to be added.

 peek () {
        if(this.items.length === 0) {
            console.log("you can't peek an empty array");
        } else {
            return this.items[this.items.length - 1];
        }
    }

As can be seen, it only returns the most recent value added to the stack, the topmost value, but it does not remove it..

isEmpty - In a scenario where we are removing a value from the stack, we use this method to check if the stack is empty and confirm if it is. So that the methods are not executed when the stack contains no values.

isempty() {
        if(this.items.length === 0) {
            console.log("the array is empty");
        }
    }

It returns true when the stack is empty, as shown above.

print() - This is a useful method that returns all of the values in the stack.


// print function
print()
{
    let string = "";
    for (let i = 0; i < this.items.length; i++)
        string += this.items[i] + " ";
    return string;

Now that we've defined the stack class and its methods, let's put them to the test. As an example, consider the following:

const mystack = new Stack();

mystack.push(2);
mystack.push(4);
mystack.push(3);

console.log(mystack.print());
console.log(mystack.peek());
mystack.pop();
console.log(mystack.print());

Now that we've finished implementing and testing our functionality, you can experiment with other application approaches to better understand the stack concept.

Happy coding until my next article.

Blog API with Nodejs,Expressjs and Mongodb

Collins Mbathi — Mon, 11 Oct 2021 08:56:11 +0000

Introduction

This is a simple API for a blog. It includes authentication so that only the owner of the blog can create, edit, and delete posts. It uses Node, Express, and MongoDB.

The API has the following endpoints:

Method	Endpoint	Description
POST	/api/posts	Creates a new post. Requires authentication.
GET	/api/posts	Gets all posts.
GET	/api/posts/:id	Gets a single post by id.
PUT	/api/posts/:id	Updates a post. Requires authentication.
DELETE	/api/posts/:id	Deletes a post. Requires authentication.
POST	/api/register	Registers a new user.
POST	/api/login	Logs in a user.
POST	/api/logout	Logs out a user. Requires authentication.

In the following section, we will look at some of the prerequisites for this tutorial.

Prerequisites

The following are required to complete this tutorial:

Nodejs installed on your system.
Expressjs installed on your system.
Sound knowledge of JavaScript and Nodejs.

-MongoDB make a connection with MongoDB database .

Setup

Let's get started with the Node.js code. Make a folder called Blog site API.

Then, in the terminal, type npm init -y to create a package.json file.

After that, you must install some packages before proceeding.
These packages will be used throughout the project.
Install Express,Mongoose,dotenv,bcryptjs in the api folder using the terminal.

npm i express mongoose dotenv bcryptjs

When the packages are installed, make a file called .env. After that, launch MongoDB and copy the link to our project.

mongodb+srv://user:password@cluster0.hex8l.mongodb.net/name-database?retryWrites=true&w=majority

The MongoDB address We'll use the dotenv package to connect it to the main folder. The package assists us in separating secrets from source code. This is helpful when uploading your project to GitHub. where you may not want to share your database login information with others You instead distribute the source code. As you can see, I need to keep my password hidden in the project.

I've also installed bcryptjs as seen above. This package enables us to create a password security platform that scales with computation power and always salts every password.

Let's make our main file and call it index.js. This is where all routes and middleware will be assembled. Before proceeding, import nodemon into the API folder. Any changes to the code in the index.js file cause the Node server to restart instantly.

npm i nodemon

Initial Route Setup

Let's start with the first route, which checks to see if everything is in order. The Node.js Express package allows you to create routes, which is how the majority of the Internet works. Most back-end languages, such as Node.js and Java, provide the ability to create these routes that interact with databases. The first route does not interact with the database and simply returns a text when accessed via a GET request.

In the API folder, create an index.js file. First, import the Express and Mongoose packages. Next, use Express to create a port variable that will run on the port you will be given, or port 5000 if no ports are available.

const express = require('express');
const mongoose = require('mongoose');
//App Config
const app = express()
const port = process.env.PORT || 5000
//Middleware
//DB Config
//API Endpoints

//Listener
app.listen(port, () => console.log(`Listening on localhost: ${port}`))

Access to the Database and the Network

You must create a database user in MongoDB and grant network access. and use dotenv to connect it to the initial routes because we've saved our link in the.env file .

const dotenv = require("dotenv");
dotenv.config();


//Database Connection 
Connect.CONNECTDB(process.env.URL);

Database Schema and Routes

MongoDB, the database we're using, stores data in JSON format rather than the regular table structure found in traditional databases like Oracle. You create the schema file that MongoDB requires. It describes how fields in MongoDB are stored.

First, make a folder called models. Create a file inside the folder and name it 'User.js.' This is where we will write our authentication schema.

Auth Schema

We will begin by developing the authentication schema for users who register on the site. The user information is saved in the database. As a result, when the user returns later, they will simply log in because the server will recognize them based on the information saved.

const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
     username:{
         type: String,
         required: true,
         unique:true,
         min:3,
         max:20
     },
     email:{
        type: String,
         required: true,
         unique:true

     },
     password:{
        type: String,
        required: true,
        min:3,
        max:10
     },

},

{timestamps: true}

);

module.exports = mongoose.model("User", UserSchema);

In addition, as seen in the code above, in the last line, we exported our code in order to import it into the routes.

As you can see, the schema contains details such as username, email, and password that will be stored in the database. When a user attempts to log in, the server will check to see if the user exists in the database and will allow the user if the user details are in the database.

Let us now create the Post Schema in which we will store what we want to be in our post.

In the models folder, the folder creates a file called 'Post.js,' which is where we will write our Post Schema.

const mongoose = require('mongoose');

const PostSchema = new mongoose.Schema({
 desc: {
     type: String,
    required: true,
 },
 title: {
     type: String,
     required: true,
},
{timestamps: true}
);

module.exports = mongoose.model('Post', PostSchema);

Our post schema includes the title and description that will be stored in the database.
The schema is now used to create the endpoint that adds data to the database. The MVC pattern is used here; this is the standard flow of a web application.

Then, use a POST request to send any data from the user to the database. Any endpoint can be used. If you write an article on Dev.to and then hit the POST button, your article is saved in the Dev.to database once the POST request is made.
The GET endpoints retrieve all database data. Again, any endpoint can be specified. When you browse through the posts in Dev.to, for example, a GET request is sent to the endpoint, which retrieves all posts from the Dev.to database.

routes

Create a folder called routes. We'll start with the Authentication route first. Create a file in the routes folder called Auth.js with the following authentication codes: -

const router = require('express').Router();
const User = require('../models/User');
const bcrypt = require('bcryptjs')
//register endpoint
router.post('/register', async (req,res)=> {
   // const confirm = await User.find({Username : req.body.username ,email : req.body.email})
    //confirm && res.status(400).json('this user or email exist');
    try {
    const salt = await bcrypt.genSalt(10);
    const hashedPass = await bcrypt.hash(req.body.password, salt);

const savedPost = await new User({
        username: req.body.username,
        email: req.body.email,
        password: hashedPass       

})
     const resultPost = await savedPost.save();
     res.status(200).json(resultPost);
  } catch (error) {
     res.status(500).json(error); 
  }
})
//login endpoint
router.post('/login', async (req,res)=>{
    try {
        const user = await User.findOne({username : req.body.username});
        !user && res.status(400).json('wrong user');

    const validate = await bcrypt.compare(req.body.password,user.password);
        !validate && res.status(400).json('wrong password');

        const {password, ...others} = user._doc;

        res.status(200).json(others);


    } catch (error) {
       res.status(500).json(error); 
    }
})
module.exports = router;

As you can see in the code above, we imported the schema and will use it to insert and save the details.

POST a request to the /register endpoint. To MongoDB, the load is in req.body.username,password,email. Then you send the User information using the New method. If it is successful, you will be given status 200; otherwise, you will be given status 500.

To get the data from the database, create a post endpoint to /login.
You're using findOne() here and getting a success code of 200. (otherwise, status 500).
As previously mentioned, we used bcryptjs in the code to protect our passwords.

Let's go to the Post routes, shall we? Make a file called 'Post.js' in the routes folder. The Post file's codes are listed below.

const router = require('express').Router();
const Post = require('../models/Post');
//create post 
router.post('/', async (req,res)=> {
try {
    const savePost = await new Post(req.body);
    const savedPost = await savePost.save()
    res.status(200).json(savedPost);

} catch (error) {
    res.status(500).json(error);
}

})
//update post
router.put('/:id', async (req,res)=> {
 try {
    const post = await Post.findById(req.params.id);
    if(post.userId === req.body.userId) {
      await Post.updateOne({$set:req.body});
     res.status(200).json('it has been updated);

    } else {
        res.status(403).json('you can only update your post');
    }
 } catch (error) {
     res.status(500).json(error)
 }

})
//delete post 
router.delete('/:id', async (req, res)=> {
  try {
   const post =  await Post.findById(req.params.id);
   if (post.userId === req.body.userId) {
      await Post.delete()
      res.status(200).json('the post is deleted)
   } else {
       res.status(403).json("you can only delete your post")
   }
  } catch (error) {
    res.status(500).json(error)  
  }

})
//get All posts 
router.get('/', async (req,res) => {
  try {
   const posts = await Post.find();
  res.status(200).json(posts);

  } catch (error) {
   res.status(500).json(error); 
  }
})
//get one post 
router.get('/:id',async(req,res)=> {

  try {
    const post = await Post.findById(req.params.id);
    res.status(200).json(post);
  } catch (error) {
    res.status(500).json(error);
  }
})
module.exports = router;

In our code above, we created our post, saved it, were able to edit it, delete it, and could retrieve all of the posts or just one.

First, we create the post using the post method and save it as directed. We used the put method to edit the post, and after finding it using the findById method provided by the mongoose package, we used the update method to update the post.
in the third method, we use the delete. where we find the post we want to delete using the findById method and use the delete() to delete the post.
Also, in the last line of our code, we have exported our code using a router and used the first get to find only one post and the second get to find all the posts. This enables us to easily track our handle request and send it to the main file index. Let me demonstrate in the screenshot below.

As shown in the above screenshot, we can now access our routes as middleware by using the use() function. When we import our codes, the router function makes it easier.

example import authroute = require('./routes/Auth');
Finally, as shown, we create the endpoint /api/blog and the router.
Let's not forget about the express. json() middleware is a method built into express that recognizes the incoming Request Object as a JSON Object because our data is in JSON.

Thank you for reading the article. I hope you learned a lot from it. In the next article, we will learn how to test it in Postman Software.

Building a Dating App with Mern

Collins Mbathi — Tue, 28 Sep 2021 09:51:38 +0000

Introduction

We're going to build a dating app with the MERN stack; the web app has simple functionality (see below for a screenshot of the finished app); all data comes from a MongoDB database, with API endpoints set up in Node.js.

In this article, we will build the front end of our dating app using React.js.

React.js is a popular JavaScript library for building user interfaces. It is fast, efficient, and can be used to build complex and responsive user interfaces.
for the Backend side, we will focus on building it using Node.js. We will use MongoDB to store users & messages, Express to build the API, ReactJs for the web app, and Socket.IO to enable real-time communication between users.

In the following section, we will look at some of the prerequisites for this tutorial.

Prerequisites

The following are required to complete this tutorial:

Nodejs installed on your system.
Expressjs installed on your system.
Reactjs installed on your system.
Sound knowledge of JavaScript ,Reactjs and Nodejs.

In the following section, we will talk about the technologies we are going to use.

Overview

Let's start with the front end of React and then move on to the back end.
Create a dating-app-mern folder in your terminal. Use the following inside it:
To make a new app called dating-app-frontend, use create-react-app. The commands to accomplish this are as follows:



cd dating-app-mern
npx create-react-app dating-app-frontend

React Basic Setup

Return to the React project and navigate to the directory dating-app-frontend. npm start will launch the React app.



cd dating-app-frontend
npm start

Next, remove any files that you no longer require.

Creating a Header Component

Let's start by making a header component. You must first install Material. because it will provide us with the icons we will use



npm i @material-ui/core @material-ui/icons

Next, inside the src folder, make a components folder. Inside the components folder, create two files: Header.jsx and Header.CSS. There are two icons in header.js: a person icon and a forum icon.
The following is the content of the Header.jsx file.

include the Header component in the App.js file

The following information is contained in the header.css file:

Creating the Dating Cards Component

Let's get started on the second component. Inside the components folder, create two files: DatingCards.js and DatingCards.css. Then, in the App.js file, include the DatingCards component.
You must first install the react-tinder-card package before proceeding. This package includes a feature that generates the swipe effect.



npm i react-tinder-card

After that, paste the content into DatingCards.js. You store the names and images of four people inside a people state variable. Import DatingCard and use it as a component next.
The props mentioned in the react-tinder-card documentation are used here.
The functions swiped and outOfFrame are required. Use the imgUrl background image and display the name in the h3 tag when looping through each person.

Creating the Swipe Buttons Component

Let's now make the Swipe component, which is the footer button.
These buttons complement the app's design. Because it is a simple app, they will not function.
Inside the components folder, create two files: Swipe.jsx and Swipe.css. It must also be included in the App.js file.

Swiper.jsx contains content.

The following step is to style the buttons, and the code for doing so is provided below.

We have completed the frontend portion.

Initial Back-End Setup

Let's get started with the Node.js code on the back end. Make a new folder and call it API.

Then, in the terminal, type npm init -y to create a package.json file.

After that, you must install two packages before proceeding. Install Express and Mongoose in the API folder using the terminal.



npm i express mongoose

After that, launch MongoDB and copy the link to our project.

Install the nodemon in the API folder before proceeding. Any changes to the code in the index.js file cause the Node server to restart immediately.



npm i nodemon

Initial Route Setup

In the API folder, create an index.js file. First, import the Express and Mongoose packages. Then, using Express, create a port variable that will run on port 5001.



const express = require('express');
const mongoose = require('express');
//App Config
const app = express()
const port = process.env.PORT || 5001
//Middleware
//DB Config
//API Endpoints

//Listener
app.listen(port, () => console.log(`Listening on localhost: ${port}`))

Database User and Network Access

You must create a database user and grant network access in MongoDB.

MongoDB Schema and Routes

MongoDB stores data in JSON format rather than the traditional table structure found in traditional databases such as Oracle. You create the schema file that MongoDB requires. It describes how fields in MongoDB are stored.
Cards are regarded as a collection name in this context, and a value such as cardSchema is stored in the database. It consists of a named object and imgUrl keys. These are the names used in MongoDB. Make a Cards.js file with the following content.

You now use the schema to create the endpoint that adds data to the database. The
MVC pattern is followed here; it is the traditional flow of a web application.

In the routes folder, make a folder called routes. Make a file called Card.js. Create a POST request to the /dating/cards endpoint in Card.js. The load is sent to MongoDB via req.body. Then you send dbCard using create(). If it is successful, you will be assigned status 201; otherwise, you will be assigned status 500. The new content is highlighted in bold.
To get the data from the database, create a GET endpoint to /dating/cards.
You're using find() here and getting a success code of 200. (otherwise, status 500).

As you can see from the image, I used a router. Connect it in the index to make life easier. js
Let's use the postman app to check the routes.

You must first complete two tasks before proceeding with the POST request.
First, enable CORS; otherwise, when you deploy the app, you will encounter cross-origin errors.

Install CORS by opening the terminal.



npm i cors

Import CORS into index.js and use it with app.use (). You must also include the express.json() middleware. It is required because it is required to parse the incoming JSON object from MongoDB in order to read the body.

Bringing the Backend and the Frontend Together

Let's connect the back and front ends. To call from the front end, use the Axios package. Axios is a JavaScript library that sends API requests to REST endpoints. You've just added two endpoints to the back end. Axios is required to access them. Install the client by opening it.



npm i Axios

Then, create a new axios.js file and an instance of Axios. http://localhost:5001 is the URL.



import axios from 'axios'
const instance = axios.create({
 URL: "http://localhost:5001"
})
export default instance

Remove the hard-coded information in the people's states from DatingCards.js. Then import the local axios and call the /dating/cards endpoint via the useEffect hook. When you receive the data, use the setPeople() function to reset it.




import React, { useState, useEffect } from 'react'
import DatingCard from 'react-tinder-card'
import './DatingCards.css'
import axios from './axios'
const DatingCards = () => {
 const [people, setPeople] = useState([])
 useEffect(() => {
 async function fetchData() {
 const req = await axios.get("/dating/cards")
 setPeople(req.data)
 }
 fetchData()
 }, [])
 const swiped = (direction, nameToDelete) => {
 console.log("receiving " + nameToDelete)
 }

We finished our dating app project, and I hope you enjoyed it and learned a lot.
In our next article, we'll go over how to deploy the app on Heroku.

Web Applications with Express.js (Beginners)

Collins Mbathi — Fri, 10 Sep 2021 18:58:44 +0000

Introduction

Node.js is a runtime environment used for server-side JavaScript. Express.js is a web framework used for server-side JavaScript. It is built on top of Node.js.

In this course, we will be building a simple CRUD web application using Express.js. CRUD stands for Create, Read, Update, Delete.

This course is for beginners. No prior knowledge of Node.js or Express.js is required.

In the following section, we will look at some of the prerequisites for this tutorial.

Prerequisites

The following are required to complete this tutorial:

Node.js installed on your system.
Sound knowledge of JavaScript and Nodejs.

Getting Started

You must first create a directory, navigate to it in your shell, and then install Express with npm by running npm install express —save.

Make a file called index.js and add the following code to it, which will create an Express server and add one endpoint to it with the app.get method:

const express = require('express');
const app = express();
app.get('/', (request, response) => {
 response.send('hello World');
});
app.listen(5000, 'localhost');

Use the following command in your shell to run your command script:

node app.js

On port.0, your application will accept connections. If the hostname argument to app.listen is not specified, the server will accept connections on both the machine's IP address and localhost. If a port value is 0, the operating system will assign a port that is available.

Once your script is up and running, you can run it in a shell to ensure that you get the expected "Hello World" response from the server:

curl http://localhost:5000
Hello World

EVENT LOOPS IN JAVASCRIPT

Collins Mbathi — Fri, 20 Aug 2021 12:17:51 +0000

As most developers know, that JavaScript is single threaded, means two statement in JavaScript cannot be excluded at the same time Execution happens line by line which

EVENTS LOOPS IN JAVASCRIPT

Collins Mbathi — Tue, 17 Aug 2021 15:44:10 +0000

As most developers are aware, Javascript is single-threaded, which means that two JavaScript statements cannot be excluded at the same time. Because execution occurs line by line, each JavaScript statement is synchronous and blocking, but there is a way to run your code asynchronously by usingsetTimeout ().
The event loop is responsible for node.js's ability to perform nonblocking I/O operations.
An example of this as we have said is setTimeout ().

setTimeout(function(){...}, 0)

Simply queues the code for execution once the current call stack has completed. This can be useful in some situations. So, while it is asynchronous in the sense that it interrupts the synchronous flow, it will not execute concurrently/on a separate thread.