Category: React JS

Use React JS styles in Laravel blade template

Posted on by adnanafzal565

If you are trying to give CSS styles in React JS inside Laravel blade template, but having the following error:

Use React JS styles in Laravel blade template

This happens when you try to give CSS styles in React JS in the following way:

function MyApp() {
    return (
        <h1 style={{
            color: "red"
        }}>Hello world</h1>
    )
}

ReactDOM.createRoot(
    document.getElementById("react-app")
).render(<MyApp />)

The error you are having is because the double curly braces {{ which are used in React JS for styling the tag, are also used by Laravel blade template to render the value of a PHP variable. Laravel will think of it as a PHP variable and will throw an error.

To fix this error, you need to create a separate object in your React JS component. That object will have all the styles for each tag. Modify your React JS component to the following:

function MyApp() {

    const styles = {
        heading: {
            color: "red"
        }
    }

    return (
        <h1 style={ styles.heading }>Hello world</h1>
    )
}

You can see that instead of setting the CSS directly in the style attribute, I have created a separate variable and used its value as a variable. This way your error gets fixed. Also, it will help you in setting CSS styles to multiple tags without duplicating them.

Share value between components – React JS

Posted on by adnanafzal565

In this article, I will show you, how you can share value between multiple components in React JS. If you are new to React JS, check this tutorial to setup React JS in your project.

Step 1:

First, we are going to create a global state variable. This will be like a simple Javascript object.

<script>
    const globalState = {
        state: {
            user: null
        },
    }
</script>

In the state object, you can define all the variables, with their default values, that you want to share between components in React JS.

Step 2:

Then you need to create an array that will hold callback functions of all components for whom the value will be shared.

const globalState = {
    state: {
        user: null
    },

    listeners: [],
}

After that, we will create a function that will be called from the React JS component.

const globalState = {
    state: {
        user: null
    },

    listeners: [],

    listen (callback) {
        this.listeners.push(callback)
    },
}

This will accept a callback function that will be defined in the component (later in this tutorial). And that callback function will be pushed into the listeners array.

And create final method in this object will update the values of the state in this object. That function will also call the callback function of all the components are listening to this state. And inside that callback will send the new state object as well as the state currently updated in this call.

const globalState = {
    state: {
        user: null
    },

    listeners: [],

    listen (callback) {
        this.listeners.push(callback)
    },

    setState (newState) {
        const self = this

        this.state = {
            ...this.state,
            ...newState
        }

        this.listeners.forEach(function (callback) {
            callback(self.state, newState)
        })
    }
}

Step 3:

Now we need to create a component in React JS and set the state of this object.

<div id="header"></div>

<script type="text/babel">
    function Header() {
        React.useEffect(function () {
            globalState.setState({
                user: {
                    name: "Muhammad Adnan Afzal"
                }
            })
        }, [])

        return (
            <h1>Header</h1>
        )
    }

    ReactDOM.createRoot(
        document.getElementById("header")
    ).render(<Header />)
</script>
  1. First, we are updating the globalState.state object. Passing the object will update only the provided values. So even if your globalState has more variables in state object, this will only update the variables that are passed in setState method.
  2. This will also call all the listeners callback function from globalState as well. But right now, the listeners array is empty. It will only have value when some component listens to it.

Step 4:

We will create another component that will listen to this global state by calling the subscribe method.

<div id="content"></div>

<script type="text/babel">
    function Content() {
        const [state, setState] = React.useState(globalState.state)

        React.useEffect(function () {
            globalState.listen(function (newState, updatedState) {
                setState(newState)

                // check which state is updated
                if (typeof updatedState.user !== "undefined") {
                    //
                }
            })
        }, [])

        return (
            <>
                { state.user != null && (
                    <p>{ state.user.name }</p>
                )}

                <h1>Content</h1>
            </>
        )
    }

    ReactDOM.createRoot(
        document.getElementById("content")
    ).render(<Content />)
</script>
  1. First, we are creating a state variable and initializing it with the globalState.state variable. So, initially, the value of state inside Header component will be same as in globalState object.
  2. Then we are calling the subscribe method and passing a callback function in it.
  3. This callback function will only be called when the globalState.setState is called from Header component.
  4. When this callback is called, we are updating the state variable with what is received from Header component.

Now you will be able to view the user name in Content component, the user name that you have set from Header component. That’s how you can share value between components in React JS.

Share value between components - React JS
Share value between components – React JS

Complete code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>State</title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.10/babel.js"></script>
    </head>

    <body>
        <script>
            const globalState = {
                state: {
                    user: null
                },

                listeners: [],

                listen (callback) {
                    this.listeners.push(callback)
                },

                setState (newState) {
                    const self = this

                    this.state = {
                        ...this.state,
                        ...newState
                    }

                    this.listeners.forEach(function (callback) {
                        callback(self.state, newState)
                    })
                }
            }
        </script>

        <div id="header"></div>

        <script type="text/babel">
            function Header() {
                React.useEffect(function () {
                    setTimeout(function () {
                        globalState.setState({
                            user: {
                                name: "Muhammad Adnan Afzal"
                            }
                        })
                    }, 1000)
                }, [])

                return (
                    <h1>Header</h1>
                )
            }

            ReactDOM.createRoot(
                document.getElementById("header")
            ).render(<Header />)
        </script>

        <div id="content"></div>

        <script type="text/babel">
            function Content() {
                const [state, setState] = React.useState(globalState.state)

                React.useEffect(function () {
                    globalState.listen(function (newState, updatedState) {
                        setState(newState)

                        // check which state is updated
                        if (typeof updatedState.user !== "undefined") {
                            //
                        }
                    })
                }, [])

                return (
                    <>
                        { state.user != null && (
                            <p>{ state.user.name }</p>
                        )}

                        <h1>Content</h1>
                    </>
                )
            }

            ReactDOM.createRoot(
                document.getElementById("content")
            ).render(<Content />)
        </script>
    </body>
</html>

Download

Show placeholder image in ReactJS

Posted on by adnanafzal565

Imagine if you are displaying an image from the server in your React app. And the image gets deleted from the server. You do not want to show the broken image icon, as it does not look professional. You can show a placeholder image in your ReactJS App if the original image fails to load.

The following code will by default show the “Jackie Chan 2.jpg” image. If that image fails to load, it will render the “default-img.jpg” image inside the “img” folder.

Be careful: If the placeholder image does not exist as well, it will stuck in an infinite loop. To solve this problem, DO NOT save the placeholder image on the server. Always keep the placeholder images on the client side.

function MyApp() {
	const { useState } = React
	const [image, setImage] = useState("img/Jackie Chan 2.jpg")

	return (
		<>
			<h1>Hello React JS</h1>

			<img src={ image }
				style={{
					width: "100%"
				}}
				onError={function () {
					event.target.src = "img/default-img.jpg"
				}} />
		</>
	)
}

ReactDOM.createRoot(
	document.getElementById("app")
).render(<MyApp />)

As an example, you can use this image as a placeholder. Make sure to download it in your “img” directory. That’s how you can show a placeholder image in ReactJS if the original image fails to load. You can also read more articles on ReactJS.

How to render JSX in HTML

Posted on by adnanafzal565

In this tutorial, you will learn how to render JSX in HTML.

Video tutorial:

Include JS files

First, you need to include the required JS files. The required JS files are:

  1. React
  2. React DOM
  3. Babel

You can download all these files from cdnjs.com. Make sure to include the UMD version and not CJS.

  • CJS: Common JS
  • UMD: Universal Module Definition

You might like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.10/babel.js"></script>

Render JSX

The following code will render the JSX code directly in HTML.

<div id="app"></div>

<script type="text/babel">

	function MyApp() {
		return (
			<h1>Hello JSX</h1>
		)
	}

	ReactDOM.createRoot(
		document.getElementById("app")
	).render(<MyApp />)
</script>

Make sure to set the type of script tag as “text/babel”.

Render JSX from an external JS file

To render JSX from an external JS file, you first need to include the JS file with a script tag having type as “text/babel”.

<script type="text/babel" src="js/MyApp.js"></script>

Then your “js/MyApp.js” file will look like this.

// src/MyApp.js

function MyApp() {
	return (
		<h1>Hello JSX</h1>
	)
}

ReactDOM.createRoot(
	document.getElementById("app")
).render(<MyApp />)

Check out our more tutorials on React JS. If you face any problem in following this, kindly do let me know.

Download

Show UI if a variable is true – React JS

Posted on by adnanafzal565

In this article, we will discuss how you can hide or show any UI if the value of a variable is true in React JS. Following this tutorial, you will also learn how to use the if condition in React JS. You just need to do 3 things:

  1. Import useState from “react”
  2. Create a variable
  3. Show UI only if that variable is true

Here is the code:

import { useState } from "react"

function App() {

  const [showButton, setShowButton] = useState(false)

  return (
    <button>Always show</button>

    { showButton && (
        <button>
          Show only when required
        </button>
    ) }
  )
}

export default App

By default, you will not see the second button because the default value is false. Try changing the value of the variable from false to true, you will start seeing the UI.

Check out our more tutorials on React JS.

Routing in React JS

Posted on by adnanafzal565

Routing in React JS can be achieved using a module “react-router-dom”. This module provides all the functionality required for creating links and displaying components based on the current route.

Installing “react-router-dom”

First, you need to install this module by running the following command at the root of your project:

npm install react-router-dom

Creating routes

Then open the “src/App.js” file and import BrowserRouter from “react-router-dom”.

// src/App.js

import { BrowserRouter } from "react-router-dom"

Then wrap all the tags of function App() inside BrowserRouter.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

Then import Routes from “react-router-dom” and create its tag where you want to display the component when a specific link is accessed.

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

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Routes>
            
          </Routes>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

After that, import Route from “react-router-dom” and create as many routes as required inside the Routes tag.

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

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Routes>
              <Route path="/" element={ <Home /> } />
              <Route path="/About" element={ <About /> } />
          </Routes>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

Then you need to import these components.

import Home from "./components/Home"
import About from "./components/About"

function App() {
	...
}

Creating components

Create a folder named “components” inside your “src” folder and create 2 files in it.

  1. src/components/Home.js
  2. src/components/About.js

Following will be the code of these 2 files.

// src/components/Home.js

function Home() {
	return (
		<h1>Home</h1>
	)
}

export default Home
// src/components/About.js

function About() {
	return (
		<h1>About</h1>
	)
}

export default About

At this point, you will see the Home component at the main route.

Routing in React JS - Home route
Routing in React JS – Home route

Creating navigation links

Now we need to create navigation links for each route. So import the Link from “react-router-dom” and create 2 links from it.

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

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Routes>
              <Route path="/" element={ <Home /> } />
              <Route path="/About" element={ <About /> } />
          </Routes>

          <Link to="/" style={{
            color: "white"
          }}>
            Home
          </Link>

          <Link to="/About" style={{
            color: "white"
          }}>
            About
          </Link>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

If you refresh the page now, you will see 2 links. On clicking any link, you will see that its relevant component is displayed.

Routing in React JS - Navigation links
Routing in React JS – Navigation links

Additional: Lazy load components

You can also lazy load your components, which means that your component will only be imported when it is accessed. It is great for larger apps where a large number of components are being created. For that, first, you need to import lazy from “react”.

import { lazy } from "react"

Then you need to change the way you are importing your components.

// import Home from "./components/Home"
// import About from "./components/About"

const Home = lazy(function () {
  return import ("./components/Home")
})

const About = lazy(function () {
  return import ("./components/About")
})

When lazy loading your components, you need to wrap your <Routes> tag inside Suspense. So import it and wrap your routes inside it.

import { lazy, Suspense } from "react"

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>

          <Suspense fallback={ <h3>Loading...</h3> }>
            <Routes>
              <Route path="/" element={ <Home /> } />
              <Route path="/About" element={ <About /> } />
            </Routes>
          </Suspense>

          <Link to="/" style={{
            color: "white"
          }}>
            Home
          </Link>

          <Link to="/About" style={{
            color: "white"
          }}>
            About
          </Link>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

fallback is used to display a UI component until the actual component gets loaded.

So that’s it. That’s how you can create routing in your React JS app. If you face any issues in following this, kindly do let me know. I created a Social Networking website in React JS that uses this routing mechanism. You can download it from here for free.

How to create a new React JS project

Posted on by adnanafzal565

Many people want to learn React JS, but they don’t know where to start. The most basic thing is to start by creating a new project in React JS. To create a new React JS project, you first need to make sure you have Node.js installed in your system. If you do not have Node.js installed in your system, you can download it from here. Try downloading the LTS version.

Once you have Node.js installed in your system, run the following command:

npm install -g npx

This will install the NPX module globally. NPX is a command-line tool used to run NPM packages directly without needing to install them locally or globally.

Then run the following command to create a new folder for your React JS project:

npx create-react-app my-react-app

Replace “my-react-app” with the folder name you want to be created. If you are planning to give spaces in the name of the folder, enclose them in double quotes “”. This will create a new folder named “my-react-app”. Open the terminal inside this folder and run the React JS project.

cd my-react-app
npm start

At this point, you will see the following page. It will automatically be opened in your browser:

Create new React JS project
Create new React JS project

We created a free Social Network project in React JS. You can download it and see the code to learn more.

TrustPilot clone – PHP, MySQL, Laravel

Posted on by adnanafzal565

A clone of TrustPilot website is created in PHP and MySQL using Laravel framework version 11. For frontend rendering, I am using Vue JS 3 and on admin side I am using React JS.

Files included:

  • .php
  • .css
  • .js

Features:

  1. User can post reviews about a company.
  2. Can flag a review.
  3. Can share reviews on social media.
  4. Company owners can claim a company by verifying their email address.
  5. Automatically takes screenshot of a company home page.
  6. Admin can add companies from admin panel.
  7. Admin can view all reviews, flags and claims.

Demo:

Social Networking Site in Node JS and Mongo DB

Posted on by adnanafzal565

The social networking site is a project developed in Node JS, and Mongo DB. It has all the functionality that you need to build a social network for your local community.

A social networking service is an online platform that people use to build social networks or social relationships with other people who share similar personal or career interests, activities, backgrounds, or real-life connections. Social networking services vary in format and the number of features.

wikipedia

Features list:

  1. Login and registration
  2. Update Profile
  3. Posts
  4. Like, comment, and reply
  5. Share posts in timelines, pages, and groups
  6. Notifications
  7. Search
  8. Email confirmation
  9. Reset password
  10. Create friends
  11. Create pages
  12. Create groups
  13. Realtime chat
  14. See people who viewed your profile
  15. Edit and delete the post
  16. Load more button
  17. Send images and videos in the chat
  18. See people who liked and shared your post
  19. Encryption on chat messages
  20. Ban & delete user
  21. Filter bad/abusive words
  22. Adult image validation
  23. Ban post
  24. Create events
  25. Embed YouTube videos in the post
  26. Customer support
  27. Advertisement (boost post)
  28. Emoji comments
  29. Like, dislike, comment on stories
  30. People nearby
  31. Group chat

Demo

Requirements:

Introduction

The social networking site is a project developed in Node JS and Mongo DB. It has all the functionality that you need to build a social network for your local community. Node JS is becoming a rising programming language for backend servers, it is fast and easy to learn. If you know Javascript, you already know Node JS.

On the other hand, Mongo DB is quickly becoming a standard for creating schema-less applications where the structure of your database is not important. It is widely being used in large systems to scale easily.

This project has a basic version that allows you to download the code for free and set it up in your local system. In the source files, a file named “How to install.txt” will guide you on how you can set up the project in your system. But if you are still facing a problem, you can always contact me.

Login and registration

In the basic version, you will avail of the authentication functionality that includes login and registration of the user. Passwords are encrypted before being stored in Mongo DB. The project uses JSON Web Token (JWT) for storing logged-in user’s information. JWT is used to transmit information securely between client and server. After logging in, the user will be able to update his profile picture and cover photo. Uploaded files are stored in the Node JS server using the “fs” module which stands for File System and the path of the uploaded file is stored in Mongo DB.

Post with caption, image, and video

Now come to the most important part of any social networking site, POSTS. What makes a social network great is the number of posts, so you should allow users to create posts, update their status, what they are doing, etc. The basic version can create posts using text, images, or video. Posts created by the user will only be viewed by his friends. When the post is created, the user will like the post, comment on a post, and reply to any comment. Posts can also be shared on your timeline, so you can pick any post you like and hit the “share” button, and will be displayed on your timeline as well.

When someone likes your post, comments on your post, or replies to your comment, a notification will be received on the left side of your home page. You can view a list of all notifications received and notification will be marked as read once opened.

Search

You can search people by their name, username, or email address. You can also search groups and pages as well by their name. This will create 3 tabs on the search page, first for users, second for pages, and third for groups.

Email verification

In terms of authentication, you will be able to verify the user by his email address during registration. When someone registers, an email will be sent to him with an instruction to verify their email address. Users who have not verified their emails will not be able to log in. This will help you know that the users you have on your site are actual users, not robots.

Reset password

This project also comes with the functionality to reset the password. This gives users the ability to reset their passwords if they have forgotten. When someone types his email to reset the password, the system will check if the email exists then it will send an email with a link to reset the password. When that link is opened it will confirm that it is the valid link and show the field to enter a new password.

Create friends

You can create friends by searching for people by their name, and then send them a friend request. The other person will be able to respond to that request, he can either decline or accept the request. Once accepted, you both will be able to view each other’s posts in your timeline.

Create pages

You can create pages by entering the page name, cover photo, and a short description of the page. Then you will be able to add posts to that page as well. When someone searches for that page, he will be able to view all the posts on that page. Users will be able to like the page, and once liked they will be able to view the page’s posts in their timeline as well.

Create groups

This pro version also allows you to create groups by entering the group’s name, cover photo, and a short description of the group. Once the group is created, people will be able to see it in their search results, they will send a request to join the group. Only you (admin) will be able to decline or accept the group request. Once accepted, the user will become a member of that group. Members are allowed to add posts in that group and all the other members will be able to view it in their timeline.

Realtime chat

One of the most demanding functions of a social network is chat. You make friends chat with them, in this version you will be able to have a real-time secure chat between 2 friends. We have used Sockets for real-time communication, all the messages are also being stored in Mongo DB.

People who viewed your profile

It also has a functionality where you can see a list of all people you have viewed your profile. When someone visits someone’s profile, we are storing his record in Mongo DB along with the current date and time. Then the other person will see a list of people who viewed his profile along with the time that person visited your profile recently.

Since you are creating posts, you must be able to edit and delete posts. You can edit your own created posts and you can also delete your created posts as well. Once the post is updated, it will be updated on all social networks. Although it is Mongo DB (non-relational) still manages to update the post’s document in all places. The same goes for delete, once the post is deleted, it will be deleted all over the social network.

It also has a functionality that we call “load more”. It allows you to load more posts without having to reload the page. When the social network is opened, the first 30 posts will be fetched and displayed in the browser. When the user scrolls to the bottom, a button is displayed at the bottom of the page which when clicked will fetch the next 30 posts. You can change the number of posts as you wish.

You can send images and videos in a chat with your friends. All attachments sent are being stored in the Node JS file system. You can also preview the files before sending them. Images and videos are not being compressed, so you can send high-quality images without having to worry that the system will reduce the quality of images, it will not reduce the quality of images or videos.

Share posts

You will be able to share posts in your timeline, pages you have created, and the groups you have joined.

You will be able to view a list of all people you have liked and shared your post. This is helpful for a social network where you want to know who has liked and shared your post.

This project has 15 major features that are essential for this social network:

  1. Message encryption.
  2. Customer support.
  3. Ban & delete the user.
  4. Filter bad or abusive words.
  5. Adult image validation.
  6. Ban the post.
  7. 24-hour stories
  8. Audio files
  9. Events
  10. YouTube links
  11. Advertisement (boost post)
  12. Emoji comments
  13. Like, dislike, and comments on stories
  14. People nearby
  15. Group chat

Let’s view each in detail.

1) Message encryption on chat

First, is the encryption for chat messages. When you are having a chat with your friend, instead of saving the messages in plain text, we have added the functionality to encode the message during sending and decoding the message during receiving. Thus, making the chat encrypted. The below screenshot shows how messages will be stored in the database. So only the receiver can see the message correctly.

You can check our tutorial on encryption and decryption from here.

2) Customer support

The second is customer support. If users are having a problem with any function or want to ask something, they can contact your social network’s customer support. It can be accessed from the left sidebar. Users can create a new ticket, a ticket is a problem that the user is facing. They can enter their problem, they can also attach an image or video as well to demonstrate the problem.

Created tickets will be displayed on the admin panel in a list. Admin can open any ticket from the list to respond to the corresponding user. Both admin and users can add a comment using the WYSIWYG editor, which helps them to apply styles to their comments. Users and admin can view all the comments from the other person.

The user will receive a notification that a new comment has been added to his ticket and he can respond to admin. Admin can also close the ticket when the issue is resolved. Once the ticket is closed, no-one will be able to add comments on that ticket. The user can also delete the ticket if he wants.

3) Ban & delete user

The third is banning and deleting the user. Banning means that the admin can ban any user he wants, the user’s data will remains to be stored in the database, but the user will not be able to access the system. Once banned, the user will automatically be logged out and when he tries to log in, he will be displayed an error message that he is banned. Admin can unban the user and the user will be able to login now. Admin can also delete the user from the system.

4) Filter bad/abusive words

The fourth is filtering bad words. When the user adds a new post, its content will be checked, and made sure that there are no abusive words in it. If there is any such word, then an error will be displayed and the post will not be saved. The same validation is applied when the post is edited.

5) Adult image validation

The fifth is adult image validation. When the user adds a new post and attaches an image to it, that image is checked and made sure that it must not contain any adult content. If it is an adult image, an error will be displayed and the post will not be saved. Normal images will be uploaded as they were before. The same validation is applied when the post is edited. But if you still do not like any post’s image, you can remove it from the admin panel and it will be removed from the system.

6) Ban post

The sixth is banning the post. When a user posts anything and you find it offensive, instead of deleting it, you can ban the post. So the post will not be removed from the system but it will not be visible to other users. During banning the post, you have to enter the reason to ban. This reason will be visible to the user. The user will get a notification that his post has been banned and he will also see the reason why it is banned. Admin can unban the post and the post will now be visible for everyone.

7) 24 hour stories

You will be able to upload stories that will remain for 24 hours. The stories will be displayed to you and your friends only. After 24 hours, the stories will automatically get deleted using a cron job. You can also delete the story before 24 hours as well. Users will also be able to view all the friends who have seen his story.

8) Audio files

You can upload audio files with the post. You will see the waves of the audio file as well. We are using a library called “wavesurfer” for this.

9) Events

Events are used to inform people about upcoming occasions or festivals. You can create your own events. Or you can mark other’s events if you are going to them.

10) YouTube links

To embed a YouTube video in your post, you simply need to copy the YouTube video URL and paste it into the YouTube pop-up. YouTube videos will be embedded in the post.

11) Advertisement (boost post)

Users can boost their posts by paying a small fee ($1 per day). Boosted posts will be labeled as “Sponsored”. The payment method will be Stripe, so users can pay with their debit or credit card. The boosted post will be displayed on the newsfeed, inbox, groups, and pages.

12) Emoji comments

You can add emojis and smileys while posting a comment. They will be saved in Mongo DB and displayed as emojis.

13) Like, dislike, and comments on stories

You can like, dislike, and add comments to a story shared by your friends. Users can see how many likes and comments they have received on their stories.

14) People nearby

A separate page where you can see a list of all people living in your current city. You can send them a friend request and make your friend circle a little bit bigger.

15) Group chat

You can create groups and each group will have its own QR code. Anyone can scan the QR code and join the group and start chatting.

So these are the 15 major functions we added to the social network project. It is developed in Node JS and Mongo DB.