Load more Node JS button with Mongo DB

In this tutorial, we are going to teach you how you can create a load more Node JS button with MongoDB in your web project. “Load more” means that we will be displaying a few records, let’s say 5 when the page loads. Then we will display a button that when clicked will fetch the next 5 records. It is similar to the Facebook infinite scroll, where when you reach the end of the page, it automatically fetched the next posts. If you prefer a video tutorial over a textual tutorial, you can find it below:

Setup the server

Make sure you have installed Node JS and Mongo DB in your system. To view the data in Mongo DB, you will need a software called Mongo DB Compass. That can be installed during Mongo DB installation. Using Mongo DB Compass, create a database named “loadmore_nodejs_mongodb”. Inside this database, you need to create a collection named “users”. Inside this collection, you can add 10 records for testing. I have added the name and age of each user, the ID is automatically generated by Mongo DB.

Then you need to create an empty folder anywhere on your computer. And create a new file inside it named “server.js”. At the same time, open your command prompt or Terminal in this folder. You can run the following command to enter this folder:

cd "path of folder"

While being inside the folder, run the following command to initialize it as an NPM:

npm init

After that, you need to install some modules using the following command:

npm install express http mongodb ejs express-formidable
  • We will be using an express framework.
  • HTTP module will be used to start the server at a specific port.
  • Mongo DB module will be used to connect and interact with the Mongo DB database.
  • EJS will be used to render HTML files.
  • Express formidable will be used to receive HTTP POST values, which we will be sending from AJAX.

If you do not have a nodemon module you can install it with this command:

npm install -g nodemon

Nodemon command helps you to automatically restart the server if there is any change in the server.js file. Now in server.js, initialize express framework. Then create an HTTP server object and start the server at port 3000.

// initialize express framework
var express = require("express");
var app = express();
 
// create http server
var http = require("http").createServer(app);

// start the server
http.listen(3000, function () {
    console.log("Server started at port 3000");
});

Run nodemon command to start the server.

nodemon server.js

Connecting Node JS with Mongo DB

Now we need to connect our Node JS Express app with Mongo DB. We have already installed the Mongo DB module. Now we need to include the Mongo DB and Mongo Client objects. Place the following lines in your server.js file before calling the HTTP listen function:

// include mongo DB module
var mongodb = require("mongodb");
var mongoClient = mongodb.MongoClient;

Now after line 10 from previous code, place the following lines to connect with database:

// connect with mongo DB server and database
mongoClient.connect("mongodb://localhost:27017", {
    useUnifiedTopology: true
}, function (error, client) {
    var database = client.db("loadmore_nodejs_mongodb");
    console.log("Database connected.");
});

Display HTML file

Now we need to show an empty table where data will be populated dynamically. We will be using EJS to render the HTML file. First, we need to tell our Express app that we will be using the EJS engine. So add the following lines before connecting the HTTP server in server.js:

// set the view engine as EJS for displaying HTML files
app.set("view engine", "ejs");

Now we need to create a GET route that when accessed from the browser will display an HTML page. Place the following lines after line 6 from the previous code:

// create a GET HTTP route to show page
app.get("/", function (request, result) {
    // render an HTML page
    result.render("index");
});

Now we need to create a folder named “views” and inside this folder, create a file named “index.ejs”. Inside this file, we will create a table, and give an ID to the <tbody> because we will be displaying data dynamically. And also a load more button.

<!-- views/index.ejs -->

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Number</th>
            <th>Age</th>
        </tr>
    </thead>

    <tbody id="data"></tbody>
</table>

<button type="button" onclick="getData();">
    Load More
</button>

Now you can access it by entering the following URL in your browser:

http://localhost:3000/

Get data from Mongo DB

Now we need to fetch data from the database in which a way that it will get 2 records each time a button is clicked. But the first 2 records will be fetched when the page loads. So create a script tag and create a variable that will be incremented each time that button is pressed. This variable will be used to skip the records to fetch the next ones.

<script>

    // Starting position to get new records
    var startFrom = 0;

    window.addEventListener("load", function () {
        // Calling the function on page load
        getData();
    });

</script>

Now we need to create that getData() function in index.ejs file. This will send an AJAX request to the route “load-more” with a method POST. We will also attach our startFrom variable with the AJAX object (line 45). When the response is successfully received from the server (line 15), it will be in a JSON string. So we convert that into Javascript arrays and objects (line 20). Then we are appending the newly fetched data in our tbody tag. And finally, we are incrementing the startFrom variable with the number of records we want to show in each AJAX call.

// This function will be called every time a button pressed 
function getData() {
    // Creating a built-in AJAX object
    var ajax = new XMLHttpRequest();

    // tell the method and URL of request
    ajax.open("POST", "http://localhost:3000/load-more", true);

    // Detecting request state change
    ajax.onreadystatechange = function () {

        // Called when the response is successfully received
        if (this.readyState == 4) {

            if (this.status == 200) {
                // For debugging purpose only
                // console.log(this.responseText);

                // Converting JSON string to Javasript array
                var data = JSON.parse(this.responseText);
                var html = "";
         
                // Appending all returned data in a variable called html
                for (var a = 0; a < data.length; a++) {
                    html += "<tr>";
                        html += "<td>" + data[a]._id + "</td>";
                        html += "<td>" + data[a].name + "</td>";
                        html += "<td>" + data[a].age + "</td>";
                    html += "</tr>";
                }
         
                // Appending the data below old data in <tbody> tag
                document.getElementById("data").innerHTML += html;

                // number of records you want to show per page
                var limit = 2;
         
                // Incrementing the offset so you can get next records when that button is clicked
                startFrom = startFrom + limit;
            }
        }
    };

    var formData = new FormData();
    formData.append("startFrom", startFrom);

    // Actually sending the request
    ajax.send(formData);
}

Now we need to create a POST route in our server.js. Before creating a POST route, we need to tell our Express app that we will be using the Express-Formidable module to get values (e.g. startFrom) from AJAX requests. So paste the following lines before starting HTTP server:

// server.js

// used to get POST field values
var formidable = require("express-formidable");
app.use(formidable());

Now write the following lines after the Mongo DB is connected:

// create a POST HTTP route to get data
app.post("/load-more", async function (request, result) {
 
    // number of records you want to show per page
    var limit = 2;
 
    // get records to skip
    var startFrom = parseInt(request.fields.startFrom);
 
    // get data from mongo DB
    var users = await database.collection("users").find({})
        .sort({ "id": -1 })
        .skip(startFrom)
        .limit(limit)
        .toArray();
 
    // send the response back as JSON
    result.json(users);
});

If you run the code now, you will see 2 records when the page loads. On clicking the load more button, 2 more records will be fetched, and so on.

Styling the table – CSS

At this point, you have successfully created a feature where you can display a few records when the page loads. And further records when user clicks a “load more” button. But we can give a few styles just to make it look good. The following styles will:

  • Give 1-pixel black border to the table and all its headings and data tags.
  • border-collapse will merge all the borders into one.
  • We are giving padding (distance between border and content) to all headings and data tags.
  • Give some margin from the bottom to the table to have some space between the table and load more button.
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 25px;
}
table {
    margin-bottom: 20px;
}

Now that our load more Node JS button is fully functional. We can also try another approach that is usually called “Infinite scroll”.

Infinite scroll

You can also use an “infinite scroll” like Facebook. Instead of displaying a button to load more data, more data will be fetched when the user scrolled to the bottom. No need to change the Node JS code that we used to load more button. For that, first you need to include jQuery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Then you can replace your window onload event listener with the following:

var loadMore = true;

window.addEventListener("load", function () {
    // Calling the function on page load
    getData();

    $(window).bind('scroll', function() {
        if(!loadMore && $(window).scrollTop() >= $('#data').offset().top + $('#data').outerHeight() - window.innerHeight) {
            // console.log('end reached');
            loadMore = true;
            getData();
        }
    });
});

And finally in your ajax.onreadystatechange listener, when you successfully append the data in the <tbody> tag, keep the infinite scroll working if there are more records.

if (data.length > 0) {
    loadMore = false;
}

So that’s how you can create a load more Node JS button with Mongo DB.

[wpdm_package id=’1251′]

Pagination – Node JS, Mongo DB, Express

In this tutorial, we are going to create a simple pagination program in Node JS and Mongo DB. For the sake of simplicity, we will be using the Express framework. If you prefer a video tutorial over a textual tutorial, then you can follow the video tutorial below:

Video tutorial

Pagination – Node JS, Mongo DB, Express

Mongo DB data

First, we are going to fill the data in Mongo DB. You can apply this tutorial to your own collections and documents. Or you can import the following (at the end) JSON file in your database using Mongo DB compass. You need to create a database named “pagination_nodejs_mongodb” before importing the file.

Setup the project

Create an empty new folder and enter it with the following commands from Terminal:

mkdir pagination-nodejs-mongodb
cd pagination-nodejs-mongodb

Once in the folder, you can install the required modules by running the following commands:

npm install express http mongodb ejs
npm install -g nodemon

The express framework is used to create web applications and APIs, and we will be creating an API to fetch the data for pagination. HTTP module will be used to start the server at a specific port. Mongo DB module will be used to connect and interact with the Mongo DB database. And finally, EJS will be used to render HTML files.

Create a file named “server.js” and write the following code in it:

// initialize express framework
var express = require("express");
var app = express();

// create http server
var http = require("http").createServer(app);

// start the server
http.listen(3000, function () {
    console.log("Server started at port 3000");
});

Run the following command to start the server.

nodemon server.js

This will start the server at port 3000. If you open your terminal, you will see the above message.

Pagination

Now you need to include the Mongo DB module, write the following lines before line 8.

// include mongo DB module
var mongodb = require("mongodb");
var mongoClient = mongodb.MongoClient;
var ObjectId = mongodb.ObjectId;

Then you can connect with the Mongo DB server. You need to write the following lines inside http.listen function callback (2nd parameter):

// connect with mongo DB server and database
mongoClient.connect("mongodb://localhost:27017", {
    useUnifiedTopology: true
}, function (error, client) {
    var database = client.db("pagination_nodejs_mongodb");
    console.log("Database connected.");
});

If you check your terminal now, you will see a second message that your database has been connected. Now we need to create a GET route which when accessed will display 2 users per page from the users collection data. So paste the following lines after the database is connected:

// create a GET HTTP route
app.get("/", async function (request, result) {

    // number of records you want to show per page
    const perPage = 2

    // total number of records from database
    const total = await database.collection("users").countDocuments()

    // Calculating number of pagination links required
    const pages = Math.ceil(total / perPage)

    // get current page number
    const pageNumber = parseInt(request.query.page || 1)

    // get records to skip
    const startFrom = (pageNumber - 1) * perPage

    // get data from mongo DB using pagination
    var users = await database.collection("users").find({})
        .sort({ "id": -1 })
        .skip(startFrom)
        .limit(perPage)
        .toArray();

    // render an HTML page with number of pages, and users data
    result.render("index", {
        "pages": pages,
        "users": users
    });
});

Comments have been added with each line for an explanation. To display the HTML file, we need to tell the Express framework that we will be using the EJS engine. Write the following line before the http.listen function:

// set the view engine as EJS for displaying HTML files
app.set("view engine", "ejs");

Create a folder named “views” at the root of your project. Inside the views folder, create a file named “index.ejs”. Following will be the content of “index.ejs” file:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tbody>
        <% for (var a = 0; a < users.length; a++) { %>
        <tr>
            <td><%= users[a].name  %></td>
            <td><%= users[a].age  %></td>
        </tr>
        <% } %>
    </tbody>
</table>

<ul class="pagination">
    <% for (var a = 1; a <= pages; a++) { %>
    <li>
        <a href="?page=<%= a; %>">
            <%= a; %>
        </a>
    </li>
    <% } %>
</ul>

You can run the project from browser by accessing the URL: http://localhost:3000/ and you will see 2 pages on first page along with pagination links at the bottom. On clicking the other page link, you will see further records.

[wpdm_package id=’1232′]

File Transfer Web App (Node JS + Mongo DB) – Express

Introduction

In this article, we are going to introduce you to a project “File transfer web app” we created in Node JS and Mongo DB. It is a file transferring web app that allows you to send files to your colleagues, friends, clients, etc.

FeaturesFreePremium
Login and registrationYesYes
Upload filesYesYes
Download filesYesYes
Delete filesYesYes
Share Files publicly via linkYesYes
Email verificationNoYes
Reset passwordNoYes
Create foldersNoYes
Private file sharingNoYes
Rename files & foldersNoYes
Move filesNoYes
Search filesNoYes
Stripe and PayPalNoYes
Blog integrationNoYes
Image compressionNoYes

Demo

1. Upload files

You can upload any type of file (image, e-book, executable, iso), the system will NOT prevent you from uploading any certain type of file. Uploaded files are in original quality (no compression is done), and they can be deleted at any time by the uploader.

2. Create folders

To organize your files, you can create folders and upload files to that folder. For example, you can create a folder named “College data” and in that folder create further sub-folders “Assignments”, “Thesis”, “Projects” and upload relevant files in each folder separately. You can go for an infinite level of sub-folders, this project can handle that.

3. Shareable link (public)

You can share files via a publicly shareable link. Anyone with the link can access your file with or without creating an account. You can also remove the shareable links so they won’t be accessible to the public anymore. There is no expiry time for the shareable link, it will remain accessible as long as it is deleted by the owner.

4. Share by E-mail (private)

You can share files via E-mail address if the receiver already has an account in the system. To share files privately, the receiver must have a registered and verified account. Files shared via E-mail will not be accessible by any other person, even if someone tries to get them from the server directory.

5. Move files & folders

You can move files from one folder to another with all sub-folders in it. When a file is moved to a new location, all publicly shareable links will lose access to that file. This is another way of removing access to shared links.

6. Rename files & folders

The name of the file is automatically set when the file is uploaded, but you can always rename the file. There is no restriction on setting the name of the file, you can even type special characters (!@#$%^&*) in it.

7. Search

You can search all files and folders uploaded by you or shared by others by their name with you. This allows you to quickly find the files uploaded by you or shared with you by your friends or colleagues.

8. Download counts

Files shared via a public link can be downloaded by anyone if he/she has the link. They do not need to register or log in to an account to download that file. While you are logged in can see the number of times that file is downloaded.

9. Recycle bin or trash can

When you delete a file, it automatically goes into the recycle bin or trash can. From where you can restore a file if you have deleted it by mistake or you can delete it permanently. Trashed files will not take your space. But when you try to restore it, you must have enough space in your account.

10. Backup

Your users will be able to take a backup of all of their files with a single click.

11. Business model

You can also make money with this project. You can allow users to upload files up to some GBs for free. After that, you can ask them to pay to upload more data. For example, you can allow users to upload up to 1 GB of files, and put the price of $1 per extra GB. I have added the Stripe and PayPal payment methods that allow you to quickly get money without integrating these payment methods for your convenience.

You just have to change the API keys for Stripe and PayPal and sit back and wait for payments. When someone makes a payment, it will automatically be added to your account and he will automatically get more data to upload. You can allocate a fixed amount from that income to increase your hosting’s hard drives. So your investment in this project will be just $10, which is the price of this project. Future investments will be received from your users.

12. Blog integration

Initially, this project was just a file transfer web app. But since you are not restricted to add more features. Now you can share the latest news and articles on your website. Simply go to the admin panel and add blog posts and it will automatically start seeing them on the user side. You can also edit or remove posts from your blog anytime you want.

13. Image compression

Now, you can compress your images to reduce their size without losing the quality. When the size is reduced, you will automatically be able to upload more images because you will be using less storage. A test run indicates that an image of 3.2 MB can be reduced to just 890 KB without having to lose too much quality. Check out our tutorial on image compression in Node JS.

14. Security

Your files will not be accessible by any person other than you or the people you have shared with. Even if someone finds the directory where you have stored all your files, he will still be unable to list or view the files.

15. Data volume

There is no limit on the volume of data uploaded in this system. You can upload as much larger files as your server allows, and you can upload as many files as needed. You can also create infinite levels of folders and sub-folders.

Free version:

This file transfer web app project comes in a freemium model. This means you can download the free version with basic functionality. To get the advanced features, you can buy it’s premium version.

https://github.com/adnanafzal565/file-transfer-web-app-nodejs-mongodb

Our TrustPilot reviews

TrustPilot-reviews
TrustPilot-reviews

Realtime customer support chat widget – PHP, Javascript, MySQL, Node JS

In this article, we are going to teach you how you can create a real-time customer support chat widget on your website. Users will be able to chat with the admin and get instant replies. All messages will be stored in the MySQL database.

By real-time, we mean that users or admins do not have to refresh the page to see new messages. Also, the admin will be able to view the navigation history of the user. For example, how many and which pages the user has visited, what was the last page the user has visited etc.

Tutorial:

Source code:

After buying this project, you will get the complete source code and use it in as many websites as you want.

Our Trustpilot reviews

TrustPilot-reviews
TrustPilot-reviews

Questionnaire web app – Node JS and Mongo DB

A questionnaire web app is a website that allows users to answer questions based on the best of their knowledge in a limited time. The user who answered the most questions right comes 1st, then 2nd, and 3rd. Users also have the capability to ban another user. The user having the highest negative votes will be banned from that contest and will appear in the next contest.

Demo:

We offer 2 versions of this project. One is free and has fewer functions, and one is pro and has all the functions.

Download demo version:

How to export and download CSV in Node JS

Learn how to export and download CSV file in Node JS.

Video tutorial:

First, we create a folder and open the command prompt or terminal in it using the following command:

cd "path of folder"

Then you can initialize the NPM by running the following command:

npm init

Then you can install the required modules:

npm install express http fs fast-csv

We will be using express as the main module for all types of requests and responses. HTTP for starting the server, fs stands for File System, and fast-csv to create CSV files. We have created a file named “server.js”. So you can start the server by running the following command in your terminal:

nodemon server.js
# or node server.js

Create a folder named “public” in root of your Node JS folder, here we will save the CSV file. Now your “server.js” file will have the following content:

var express = require("express");
var app = express();
var http = require("http").createServer(app);
var fileSystem = require("fs");
var fastcsv = require("fast-csv");

app.use("/public", express.static(__dirname + "/public"));

http.listen(3000, function () {
    console.log("Connected");

    app.get("/exportData", function (request, result) {

        var data = [{
            "id": 1,
            "name": "Adnan",
            "age": 29
        }, {
            "id": 2,
            "name": "Ali",
            "age": 31
        }, {
            "id": 3,
            "name": "Ahmad",
            "age": 33
        }];

        var ws = fileSystem.createWriteStream("public/data.csv");
        fastcsv
            .write(data, { headers: true })
            .on("finish", function() {

                result.send("<a href='/public/data.csv' download='data.csv' id='download-link'></a><script>document.getElementById('download-link').click();</script>");
            })
            .pipe(ws);
    });
});
  1. We are first creating instances of all modules.
  2. Then we are telling the server that we will be saving files in the “public” folder.
  3. After that, we are starting the server at port 3000.
  4. Then we are creating a GET route which when accessed will create a CSV file and download it in the user’s browser.
  5. Now, we are creating an array which will be the data of CSV file. You can replace that with your own array.
  6. Then we are creating a write stream, and in that, we are sending the path of CSV file. In our case, it is in the “public” folder and named “data.csv”.
  7. Write the data array using a fast-csv module. When the writing finished, simply create an anchor tag and add an attribute “download“. Set the href to the path of file. And fire a click event using Javascript.
  8. We are using pipe() function that will add the write stream in fast-csv queue.

Explore our more tutorials and projects developed in Node JS.

[wpdm_package id=’556′]

Social Networking Site in Node JS and Mongo DB

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.

Video streaming web app in Node JS and Mongo DB, MySQL

This project is available in 2 versions:

  • Node JS and Mongo DB
  • Node JS and MySQL

We created a video streaming web app in Node JS and Mongo DB and also in MySQL.

Features

Authentication

User can create an account using his first name, last name, email and password. Passwords can encrypted so even if your database gets hacked, user’s passwords will not be revealed.

Upload Video

User can upload videos. To upload, he needs to provide a thumbnail of the video as well. Thumbnail will be displayed on home screen, history and search pages. Video will only be played from video detail page. User also needs to enter video title, description, tags, categories and playlist (if any). After video is uploaded, he will be redirected to video edit page where he can edit all these details any time he wants.

I am using a Node JS package called “get-video-duration” to automatically get the duration of video and save it in database. This helps in displaying the duration of video so user will know how long the video is.

My Videos

User can see all his uploaded videos and from there he can edit or delete videos as well.

My Channel

A page from where user can set his profile image, his cover image, can see all his uploaded videos and also he can manage playlists from this page. User can add a playlist and it will be displayed on a list. From the list, he can delete any playlist if he no longer needs. If there is any video in that playlist, then user will see the thumbnail of that video. User will also see the number of videos he has in each playlist.

Home Page

On home page, you will see all uploaded videos by all users in descending order. So you will always see the latest videos on top. Each video in list will have title, duration, categories, the number of views it got and the date when it was uploaded.

Video Detail Page

On video detail page, you can the complete detail of that video. Based on cookies, video view is incremented by 1 when you visit that page. On this page, you will see the complete description of that video and also the user name and profile image who uploaded that video. You can subscribe to that channel if you want, and if you have already subscribed then you can remove that channel from your subscription as well. But you cannot subscribe your own channel.

You can like or dislike a video and you will see the counter incremented or decremented by 1. You can post a comment on a video. When you post a comment, a notification will be sent to the video creator so he knows that a new comment has been posted. Other users can reply to your comment and you will get a notification when someone replied to your comment.

On right side of this page, you will see a section at the top where you can place your Google Adsense code if you want. It will help you monetize your website. Below that, you will see a list of all videos under that playlist.

Search

If you click on any category or tag on video detail page, you will be redirected to a new page where all videos in that category or tag will be displayed. This will help you find the videos of your interest. It’s layout is similar to the one you see on home page.

Watch History

Another page that you can access from left sidebar is “History”. Here you can see a list of all videos that you have played. It will also show you the duration of each video you have viewed. So, for example, if a video is 10 minutes long and you watched 3 minutes 45 seconds of it, then you will see a progress bar that tells you that you your watched duration on this video is 3:45.

This will help you find the video in case you saw a video and now you want to see it again. You can delete the videos from watch history as well.

My Subscriptions

When you subscribe a channel, you will see the number gets incremented. But there should be a page where you can see all the channels you have subscribed and also an option to delete any channel from your subscription. You can see that page from left sidebar on each page.

Settings

User can update his first and last name, and he can also change his password as well if he wants.

Screenshots:

Source code:

Video-streaming-web-app-in-Node-JS-and-Mongo-DB
Video-streaming-web-app-in-Node-JS-and-Mongo-DB

Our TrustPilot reviews

TrustPilot-reviews
TrustPilot-reviews

Check out our single-page chat application developed in Vue JS, Node JS, and Mongo DB.

A blog website with admin panel in Node JS and Mongo DB

We have created a blog website with admin panel in Node JS and Mongo DB. It is designed in Bootstrap. And the view engine is EJS.

Version 1.6

Features:

  1. Create, Read, Update, Delete (CRUD) posts from admin panel
  2. 3 themes (Bootstrap, Clean Blog and Materialize CSS)
  3. Comments and replies
  4. Realtime post add, update and delete
  5. Realtime comments and replies
  6. File manager
  7. Post views counter

File manager

File Manager allows you to manage all your uploaded files in one directory. You can simply go to the admin panel and then “File Manager” from the left sidebar. You can upload new files and you can delete existing files as well. On adding or updating a post, you can simply select the already uploaded file and it will be used in the blog post as featured image.

Views counter

Now you can check how many views your post has got. When someone opens your post, the view counter will be incremented and it can be seen on the post’s detail page.

We are constantly adding more features in this blog website with admin panel developed in Node JS and Mongo DB. Check out our single page chat application developed in Vue JS, Node JS and Mongo DB.