In this article, we will discuss 2 ways how you can loop through a number in React.
While developing frontend of an application 🖥, you might encounter a situation where you have to display a list of data. For example, a list of users etc.
Most common way to loop through an array in React is using Javascript built-in map function.
But if you have a number that you have to loop through. For example, run a loop till 10 etc.
In this case, we have 2 options.
1st way: Using function ☑️
One way to loop through a number in React is to create a function that will:
Create an array.
Using basic for loop and push the HTML code in array.
Return the array.
Here is the code on how to do that. 👨🏻💻
function App() {
const [number, setNumber] = React.useState(10);
function renderLoop() {
const elements = [];
for (let a = 0; a < number; a++) {
elements.push(
<p key={ `1st-way-${ a }` }>{ a }</p>
);
}
return elements;
}
return (
<>
{ renderLoop() }
</>
);
}
Following will be the output of above code:
0
1
2
3
4
5
6
7
8
9
2nd way: Using map ✅
Javascript’s map function can also be used to iterate over an array and display a list without having to create a function.
function App() {
const [number, setNumber] = React.useState(10);
return (
<>
{ Array.from({ length: number }, function (_, index) { return index })
.map(function (n) {
return (
<p key={ `2nd-way-${ n }` }>{ n }</p>
)
}) }
</>
);
}
Explanation 🕵🏻♂️
The first argument of Array.from is an object that will create an array of length 10 such that each element has an index starting from 0.
The second argument is a mapping function.
First parameter is “_” which means the value.
Second parameter is “index”.
It is returning the index without any modification, so the original number will be returned.
It will create an array from 0 to 9.
Using the map function, you can perform some action on that array created from number. In this case, we are displaying each number n in a paragraph. 📄
So that’s how you can loop through a number in React. If you face any problem in following this, kindly do let me know. 💬
In this tutorial, we will learn how you can get updated value from child component to parent component in React.
Let’s say you have a parent child component in your React app. You are sending data from parent to child and your child component is updating that variable’s value. Now when you get the value in parent component, you still get the original value, not the updated one.
First, you need to create a reference and pass it to the child component.
function Parent() {
// Create a reference
const childRef = React.useRef();
// Create array of users
const [users, setUsers] = React.useState([
{ id: 1, name: "Adnan" },
{ id: 2, name: "Afzal" }
]);
// Function to get updated users
function getUsers() {
// Get users with reference
let tempUsers = [];
if (childRef.current) {
tempUsers = childRef.current.getUsers();
}
console.log({
"users": users,
"tempUsers": tempUsers
});
}
// Set child component and pass users array to it
return (
<>
<Child users={ users }
ref={ childRef } />
{/* Button to get users */}
<button type="button" onClick={ function () {
getUsers();
} }>Get users</button>
</>
);
}
childRef: First, we are creating a reference.
users: Then we are creating a state variable.
getUsers(): A function is created that will get the state value using reference.
We are passing the users array and reference to the child component.
A button is also created which when clicked, will call the function to get the state variable.
Then in your child component, you need to create it using forwardRef.
// Create child component that gets properties
// Export child using forward reference
const Child = React.forwardRef(function (props, ref) {
// Get users from parent component
const [users, setUsers] = React.useState(props.users || []);
// Use imperative handler to return updated value
React.useImperativeHandle(ref, function () {
return {
getUsers() {
return users;
}
};
});
// Function to set user name to "Khalid" where user ID is 1
function updateUser(id, name) {
const tempUsers = JSON.parse(JSON.stringify(users));
for (let a = 0; a < tempUsers.length; a++) {
if (tempUsers[a].id == id) {
tempUsers[a].name = name;
break;
}
}
setUsers(tempUsers);
}
// Create button to update user
return (
<>
<button type="button" onClick={ function () {
updateUser(1, "Khalid");
} }>Update user</button>
</>
);
});
forwardRef: It is used to pass ref from parent component to child component.
Then creating a state variable and initialize it with props value received from parent component.
We are using imperative handler to return the updated value.
A button is created in child component that updates the value using it’s ID.
JSON.parse(JSON.stringify(users)): We are first converting the users array to JSON, then converting back to Javascript array. This ensures a deep copy.
That’s how you can get updated value from child component to parent component in React.
In this tutorial, we will show you, how you can do pagination in your React app having Node.js and MongoDB as backend. Even if you have any other backend technology, you can still get the algorithm and apply it in your language.
React
Following is our React component that will call an AJAX request and fetch the data from API. After fetching the data from API, it will render the data along with the pagination links. Whenever any of the pagination link is clicked, it will refetch the data based on the clicked page number.
<script src="js/babel.min.js"></script>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<div id="app"></div>
<script type="text/babel">
function App() {
// Set current page
const [page, setPage] = React.useState(1);
// Number of pages on pagination
const [pages, setPages] = React.useState(0);
// Whenever it's value is updated, the data will be re-fetched
const [refetch, setRefetch] = React.useState(0);
// Data array
const [users, setUsers] = React.useState([]);
// Check if there are more pages
const [hasMorePages, setHasMorePages] = React.useState(false);
async function loadMore() {
// Creating a built-in AJAX object
var ajax = new XMLHttpRequest();
// Tell the method, URL of request and make is asynchronous
ajax.open("POST", "http://localhost:3000/fetch-users", 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 response = JSON.parse(this.responseText);
// Update state variable
setUsers(response.users);
// Set if there are more pages
setHasMorePages(response.hasMorePages);
// Set pagination
setPages(response.pages);
}
}
};
// Create form data object
const formData = new FormData();
// Attach current page number
formData.append("page", page);
// Send the request
ajax.send(formData);
}
// Run function when page value updates
React.useEffect(function () {
loadMore();
}, [refetch]);
return (
<>
{/* Display data */}
{ users.map(function (user) {
return (
<p key={ `user-${ user._id }` }>{ user.name }</p>
);
}) }
{/* Show pagination if required */}
{ pages > 1 && (
<nav>
<ul>
{ Array.from({ length: pages }, function (_, index) { return index + 1 } ).map(function (p) {
return (
<li key={ `pagination-${ p }` } className={ `page-item ${ p == page ? "active" : "" }` }>
<a href="#" onClick={ function (event) {
event.preventDefault();
setPage(p);
setRefetch(refetch + 1);
} }>{ p }</a>
</li>
);
}) }
</ul>
</nav>
) }
</>
);
}
ReactDOM.createRoot(
document.getElementById("app")
).render(<App />);
</script>
Node.js and MongoDB
Now in our Node.js server, we will create an API that will return all the records based on the current page from client side. It will also return the number of pagination links.
That’s how you can create pagination links in your React app with Node.js and MongoDB as backend. If you face any problem in following this, feel free to contact me.
Previously, we wrote 2 articles on how to add a “load more” button. First article uses Node.js and MongoDB and EJS for frontend and second article uses PHP and MySQL. In this article, we will show you, how you can create a “load more” button in React with Node.js and MongoDB as your backend. This is the refined version of previous load more tutorial in Node.js and MongoDB.
First, let me show you all the code. Then I will explain everything.
React
function App() {
// Set current page
const [page, setPage] = React.useState(1);
// Data array
const [users, setUsers] = React.useState([]);
// Check if there are more pages
const [hasMorePages, setHasMorePages] = React.useState(false);
async function loadMore() {
// Creating a built-in AJAX object
var ajax = new XMLHttpRequest();
// Tell the method, URL of request and make is asynchronous
ajax.open("POST", "http://localhost:3000/fetch-users", 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 response = JSON.parse(this.responseText);
// Get data from API
const newArr = response.users;
// ❌ Less efficient, more readable
// Get current data
/*const tempArr = [ ...users ];
// Loop through all new records
for (let a = 0; a < newArr.length; a++) {
// And add them in existing array
tempArr.push(newArr[a]);
}
// Update state variable
setUsers(tempArr);*/
// ✅ Efficient way
setUsers([...users, ...newArr]);
// Set if there are more pages
setHasMorePages(response.hasMorePages);
}
}
};
// Create form data object
const formData = new FormData();
// Attach current page number
formData.append("page", page);
// Send the request
ajax.send(formData);
}
// Run function when page value updates
React.useEffect(function () {
loadMore();
}, [page]);
return (
<>
{/* Display data */}
{ users.map(function (user) {
return (
<p key={ `user-${ user._id }` }>{ user.name }</p>
);
}) }
{/* Show load more button if there are more pages */}
{ hasMorePages && (
<button type="button"
onClick={ function () {
// Increment page value
// It will automatically call the loadMore function from useEffect hook
setPage(page + 1);
} }>Load more</button>
) }
</>
);
}
Here, we are displaying all the data we are getting from API. We are displaying the “load more” button only if there are more pages required. We created a React.useEffect hook and calling the loadMore function everytime the page value gets updated. It will automatically gets called first time when the page loads. After that, every time you click the “Load more” button, we are simply incrementing the page value by 1. It will trigger the React.useEffect hook, thus calling the loadMore function again.
From API, we will receive the data that will be an array, and a boolean variable that tells if there are more pages required. Based on the latter, we will show or hide the “Load more” button. If there are more pages required, you can keep pressing load more button. When there are no more records in the database, then the load more button will be removed.
When the response from API is received, we are appending the new data in our existing data array. The way to do that in React is different. First, we need to create a shallow copy of our existing array using spread operator: const tempArr = [ …users ]; Then we need to loop through all new data received from API, and push it in your shallow copy of array. Finally, we will update our state variable and will render the new data.
For rendering, we are using Javascript map function to iterate over an array. In each paragraph, we should have a unique key value for React to identify each element uniquely. In order to create a unique key, we are using user ID, and we are displaying user name in each paragraph. This is create a “load more” button in our React component. In next step, we will create it’s API.
Node.js & MongoDB
// Run command in your terminal:
// npm install express http mongodb cors express-formidable
const express = require("express");
const app = express();
const http = require("http").createServer(app);
const mongodb = require("mongodb");
const ObjectId = mongodb.ObjectId;
const MongoClient = mongodb.MongoClient;
const cors = require("cors");
app.use(cors("http://localhost/load-more.html"));
// Native way to allow CORS
/*// Add headers before the routes are defined
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader("Access-Control-Allow-Origin", "*");
// Request methods you wish to allow
res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
// Request headers you wish to allow
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,Authorization");
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader("Access-Control-Allow-Credentials", true);
// Pass to next layer of middleware
next();
});*/
const expressFormidable = require("express-formidable");
app.use(expressFormidable({
multiples: true
}));
const port = process.env.PORT || 3000;
const databaseName = "test"
const MONGO_URI = process.env.MONGO_URI || "mongodb://127.0.0.1:27017";
http.listen(port, async function () {
console.log("Server started");
const client = new MongoClient(MONGO_URI);
try {
await client.connect();
const db = client.db(databaseName);
console.log("Database connected.");
// Seeding the data in database
/*const usersCount = await db.collection("users").countDocuments({});
if (usersCount == 0) {
await db.collection("users")
.insertMany([
{ name: "Adnan" },
{ name: "Afzal" },
{ name: "Ahmad" },
{ name: "Khalid" },
{ name: "Tariq" },
]);
}*/
app.post("/fetch-users", async function (request, result) {
const limit = 1;
const page = parseInt(request.fields.page || 1);
const skip = (page - 1) * limit;
const users = await db.collection("users")
.find({})
.sort({
_id: 1
})
.skip(skip)
.limit(limit)
.toArray();
const usersArr = [];
for (let a = 0; a < users.length; a++) {
const obj = {
_id: users[a]._id || "",
name: users[a].name || ""
};
usersArr.push(obj);
}
const totalCount = await db.collection("users").countDocuments({});
const hasMorePages = (page * limit) < totalCount;
result.json({
status: "success",
message: "Data has been fetched.",
users: users,
hasMorePages: hasMorePages
});
});
} catch (exp) {
console.log(exp.message);
}
});
Here, we are first starting our server and connecting with MongoDB database. We created an API that accepts the page number as parameter. If the page number is not provided, then the default value of it will be 1. We are setting the limit to 1 for testing. We subtract 1 from current page value and multiply it by the limit, it will give use the number of records we need to skip.
Then we are fetching the data from database using skip and limit. Your document might have a lot of fields, so we created an obj to only return those fields that are need for this API. Finally, in order to check if there is a need for more pages, we first need to find the total number of records in our collection. We can then check if it is greater than the product of limit and page variable. If it is greater, it means there are still more records in the database.
That’s how you can create a “load more” button in React as your frontend and Node.js and MongoDB as your backend. If you face any problem in following this, kindly do let me know.
If you are working in React and are fetching data from an API that is returning some content with mixed HTML entities. You will notice that when you are rendering the HTML data in React, the HTML entities does not gets rendered properly. It is because React does not parse HTML entities by default.
Today, we will show you a way that let’s you parse HTML entities in React. First, let’s say we have a following React component that displays a text having an HTML entity.
You can also download this JS file and paste in your project and use relative path. Finally, you need to call the “HTMLReactParser(var string)” function and send your variable as an argument.
{ HTMLReactParser(myVar) }
If you run the page now, you will see that your HTML entity has been parsed properly.
In this article, we will teach you how you can use a callback function to be called from child parent that will invoke a function in parent component in React JS.
Let’s say you have:
A parent component that has an array.
You are looping through an array and displaying the data using child component.
You want to call a function from child component that will invoke a function in parent component.
Here, we have a React parent component that has an array of data. Each array element has an ID, name and age. You might be receiving this data from API. In each loop iteration, it is rendering a child component.
key: This is used by React JS to uniquely identify an element.
d: This is the property value parent component is sending to the child component.
What are props in React JS ?
props (properties): Props are used in React JS to pass the data from parent component to child component. They are read-only so child component cannot modify the value of “d”.
Now, let’s assume you want to have a delete function in child component that, when called, will call a function in parent component. So that the parent component that perform an action on that child. In this case, we will remove that array element from “data” array in parent component.
So first, we will create a delete button in child parent. Once that button is clicked, we will call a function we will receive in props from parent component.
Finally, we will create that function in parent component that will search the array element using ID and remove it from array. At the end, we will update the React state variable as well.
function onDelete(id) {
const tempArr = [ ...data ];
for (let a = 0; a < tempArr.length; a++) {
if (tempArr[a].id == id) {
tempArr.splice(a, 1);
break;
}
}
setData(tempArr);
}
I was looking for a tool that allows me to write API documentation so I can provide it to the frontend developers and also for myself. I checked many but didn’t find any that fits to all of my requirements. So I decided to create one of my own. Creating my own tool gives me flexibility to modify it as much as I want.
I also wanted it to share it with other developers who might be having problem in finding the tool to write documentation for their API. So I uploaded it on Github and it is available for anyone for free.
How to write API documentation
A tool is created in PHP and MySQL that allows developers to write API documentation, and this tool is available for free. You can create multiple sections to group the APIs based on modules. For example, user authentication, user posts, comments, replies can be separate sections.
To write each API, you need to tell:
The section where it goes.
The name of the endpoint. It can be the URL of API.
The method, it can be either GET or POST. But since you will have the code, you can add more methods as per your needs.
Add a little description about the API, for example what this API does.
Headers:
You need to tell the key of header, whether it is required or optional. And a little description about the header, for example, it’s possible values.
Parameters:
Parameters are usually send in the URL. You can define them along with their key, and value and whether they are optional or not.
Arguments:
For defining the arguments, you need to specify it’s type too. Whether it can be an integer, a string, boolean value or a file object.
Example request body. You can write the CURL code inside it to give an example.
Status codes and their responses.
I wrote a complete documentation of a project using this tool. You can check that from here.
In order to include a React JS component dynamically, we need to use the Javascript’s built-in fetch API. Let’s say you have a simple component that renders an <h1> tag:
Now you want to render your React JS component “MyComponent” dynamically in div having id=”my-component”. First, you need to use the fetch API to get the content of MyComponent.js file.
If you check your browser console now, you will see the exact code you have in your React JS component file. But this code is in JSX format, we need to compile it to native Javascript code. We can do that using Babel library:
If you see the browser console now, you will see the native Javascript code.
Babel.transform: This function is used to transform the code from one format to another. It takes the code that needs to be transformed as 1st argument and an object for other options as 2nd argument.
presets: It will be an array that tells the Babel how to transform this code.
env: This ensures to convert the code such that it supports the older environments of Javascript like ES5.
react: This will convert the JSX or React code into plain Javascript code.
.code: This property will return the transformed code as string.
Convert JSX to JS
Now we just need to execute this to render our React JS component dynamically. So we will simply use the eval() function that takes Javascript code as input string and execute it.
eval(transpiledCode);
Here is the complete code to include the React JS component dynamically in your project.
A multi-purpose platform is created in Node.js and MongoDB. Developing an API in Node.js and MongoDB allows you to create real-time, high performance and scalable applications. When you are building a website or a mobile app, you might have a different design than what is already built. But your backend will be almost similar to your competitor. Let’s say you want to build a social network like Facebook. You will pick an HTML template or design a UI specific for your business. But you want to have a module to create users, posts, pages, groups, friends, chats and much more.
So we are providing you a multi-purpose platform that allows you to use social network, job portal, manage your media files and much more. It is a self-hosted script so all the data will be stored on your server, no third-party storage service is used here.
Tech stack 💻
Bootstrap 5+
React 18+
Node.js 20+
MongoDB 4+
User Registration and Profile 🙋🏻♂️
This API allows you to register an account. The passwords are encrypted before saving them in database. User can also login using his email and password that he entered during registration.
On successfull login, a Json Web Token (JWT) is generated and returned in the API response. The client application needs to save that token in its local storage because that token will be use in other APIs in headers to identify the user. This token is also stored in server as well. So if you want to logout a user manually, you can simply remove his token from database.
User can edit his name and profile image. The email field is read-only, it cannot be changed. User can also change his password. For that, he needs to provide his current password and enter his new password 2 times for confirmation.
Social Network Posts 📝
If you are building a social network, then this module allows you to create and manage posts for a social network. You can also share other’s posts on your timeline. You can edit or remove your own posts. Other users will be able to like, comment or share your posts. Users will be able to edit to delete their own comments. You will be able to reply to the comments on your posts, and you can also edit or remove your reply if you want. Users can also see the list of all users who has liked or shared your post.
Pages 📃
If you are running a business, you can create a page for your business and start posting about your products or services in that page. In order to create a page, you need to set it’s name, tell a little about the page, and provide a cover photo for the page. User can follow your page and start seeing your page’s posts in their newsfeed. Only creator of page can create a post in that page.
You can see a list of all users who has followed your page. User can also see a list of all pages he has followed. The owner of the page can edit or delete the page. Once page is deleted, all the posts inside that will be deleted as well.
Groups 🥳
You can create groups to create a community of like-minded people. In order to create a group, you need to enter the name of group, a little description about the group and it’s cover photo. You can see a list of all groups created in the platform. There are separate links from where you can see only the groups that you have created or the groups you have joined. You can join or leave the group whenever you want. However, admin of the group can also remove you from the group if he wants.
Only admin or group members can post in a group. Posts uploaded by admin will be immediately displayed on the groups newsfeed. However, the posts uploaded by group members will be held pending for approval from the admin. Admin can see a list of all posts uploaded by group members. He can accept or decline a post he wants.
Admin of the group can update the name or description of the group, and he can also change the cover photo of the group. Admin can delete the group as well. Upon deleting, all the posts uploaded in that group will be deleted as well.
Media 📂
This API allows you to upload media files (images, videos) on the platform. Each media file will have a title, alt attribute, and caption. These will help you in your Search Engine Optimization (SEO). You can edit or delete your own media files whenever you want.
Friends 🙏🏻
You can create friends by sending them a friend request, just like you do in Facebook. Other user can see a list of all friend requests he has received. He can accept or decline your request. If accepted, then you both will become friends and you can chat with each other. You can see a list of all of your friends. At any point, you can remove a user from your friend list.
Realtime Chat 💬
You can have realtime chat with your friends. Chats are end-to-end encrypted, that means that the messages are encrypted before sending to the server. And they are decrypted only after receiving the response from the server. Your messages will remain secure in-transit.
For realtime communication, we are using Socket IO. When you send a message, an event is emitted. The receiver will be listening to that event and display a notification alert that you have received a new message. If the chat is already opened, then the new message will automatically be appended at the bottom of the chat.
Job Portal 👨🏻🔧 👨🏻🍳 👩🏻🏫 👩🏻🎨
Since this is a multi-purpose platform and it is developed in scalable technologies (Node.js & MongoDB), a job portal platform is also added that allows recruiter to post jobs and candidates can apply on that job. Recruiter can see all the applications he has received on a job and can change the status of applicant to shortlisted, interviewing, rejected or selected etc. Candidate can upload multiple CVs and choose the relevant CV while applying for the job. Recruiter can update or delete the job any time.
You can also filter job applications by status. So if you are recruiter, you will post a job. Then you will start receiving applications from candidates. Recruiter can change the status from interviewing to shortlisted employess. Then recruiter can change the status to interviewing. Recruiter can also reject the candidate, but he also needs to provide a reason for rejection. Finally, recruiter can set the candidate as “Hired”. So there must be a way for recruiter to filter job applications by their status.
We also have a PHP and MySQL version of Job Portal website. You can get it from here.
Admin Panel 👨🏻💼
An admin panel is created where you can manage all the users, social network posts and jobs created on the platform. It is a single page application created in React JS and can be deployed as a sub-domain to your main website.
Super admin can see the list of all users. He can add a new user if he wants. An email with password set by admin will be sent to the new user. Admin can also update the user password as well. He can also delete the user, all the posts uploaded by that user will be deleted as well.
Super admin can see all the posts uploaded on social network platform. Just like users, he can delete any post he did not feel appropriate.
Admin can also see all the jobs posted by recruiter and if any job post goes against the standards, super admin can remove it.
Blogs 📜
Since this is a multi-purpose platform, so I added a blog module that allows you to write articles on your website. Admin can create blogs from admin panel and they will be displayed on user side. User can post a comment if they are logged-in. Other users or admin can reply to their comments. Admin can manage all posts and comments from admin panel. Admin can delete any post or command he did not find suitable.
We are using sockets to update the blogs in realtime. So if user is reading a post and admin changes something from admin panel, it will immediately gets updated on user side. User does not need to refresh the page.
Page Builder 🏗
We are using page builder to create blog posts. It allows you to create paragraphs, headings, images, videos and buttons.
You can set the attributes like id and class. You can also set CSS properties of each tag.
If you are using image or video, you can add alt and caption attributes as well.
Freelance Platform 👨🏻💻 🤑
This multi-purpose platform project also has a freelance platform where you can hire experts to get your job done. Or, if you are a skilled person, you can find work there.
There are 2 entities in freelance platform: Buyer 💰 and Seller 🤑. Buyer will create a task to be done, he will mention his budget and deadline. Buyer must have sufficient balance in their account. They can add balance using Stripe. 💳
Sellers will start bidding on that task. Seller will also send a proposal mentioning how he will get the work done, what is his offer and in how many days he will do it. 🌚
Buyer will see all the bids from sellers. He will also see a freelance profile of each bidder, telling the orders done by each seller, their ratings and reviews etc. ⭐️
Buyer can accept the bid of any seller he seems fit for the job. The seller will be notified and their order will be started. ⏰
On their order detail page, they can chat with each other. They can send messages 💬 with attachments 🧷. At any point, buyer or seller can cancel the order.
After the work is done, buyer can complete the order ✅. Once it is completed, the amount that was offered in the bid will be deducted from buyer’s account. 5 percent will be deducted as a “platform fee”, and the remaining 95% of the amount will be added in the seller’s account 🤑.
Buyer can also gives ratings ⭐️ to a seller and also can give a review about his experience. This will help seller build his freelance profile.
Seller can withdraw the money by entering his bank account details 🏦. These details will be sent to the admin panel 👨🏻💼. Admin can transfer the funds and once the transfer is completed, seller’s balance will be returned to 0.
Notifications 🔔
User will receive a notification when:
His freelance order gets completed/cancelled.
A new message has been received on his order.
His bid got accepted on freelance project.
His withdrawl request has been updated.
Someone commented on his post.
Someone replied to his comment.
Someone likes his post on social network.
His post has been shared by someone.
These notifications will be displayed as a bell icon 🔔 on header when user is logged-in. If he has any unread notifications, then it will be displayed as read.
Unread notification’s background will be gray. On clicking the notification, it will be marked as read.
Installer 🤹🏻♂️
Run the following commands in your “admin” folder:
npm install
npm start
In order to create a super admin, you need to run the following command in your “premium-api” folder once:
node installer.js
This will create a super admin in your database. You can set the email and password of your choice from “installer.js” file.
Paste the “multi-purpose-platform-nodejs-mongodb” folder in your “htdocs” folder if you are using XAMPP or MAMP, or in “www” folder if you are using WAMP.
Run the following commands in the “premium-api” folder:
More features can also be added on-demand in this multi-purpose platform. If you do not want all the features, we can remove or change features as per your needs.
A file manager web app is created in Laravel and React JS. We offer free 10 MB storage so you can test this script. Test it before you buy it. Easy deployment, you can just buy and upload the files on your server. Further instructions for deployment are in the file “README.md”. Check our tutorial if you need help in deployment.
We are using CloudBox Lite HTML template for this project.
I am using Laravel Sanctum API for handling authentication. It creates a token for each user and sends it in headers in AJAX requests. It is also useful so if you want to develop a mobile application for it, you can use the same authentication system. Because session authentication does not work on mobile.
2) Files and Folders
User can create as much folders as he wants and he can upload as much files as he wants unless his storage gets full. There is unlimited level of folder nesting just like in your computers, you can create folders and create folders inside it.
3) Rename
You can rename files and folders any time you want. You can also set the same name of different files in the same folder.
4) Private or public files
While uploading files, you can set if the file is publicly visible to other users. Or will it be only for you. You can share publicly available files with others.
User can change from public to private any time. Public files are saved in storage so they can be accessed by other users. While private files are saved in database in BLOB format. So they can only be accessible by the user who uploaded it.
5) Trash can
If you delete the file or folder by accident, it won’t be deleted permanently. It will be moved to trash where it remains unless you delete it. From trash can delete the file permanently or you can restore it. If you restore it, it will go to the same folder where it was before.
6) Share files
You can share files with other users as well if the file is public. While sharing file you can also set if the other user can just read it, or if he can modify the content of the file. Only text and source code file’s (txt, php, html, css, js, java, c, cpp, py, go, sql) content can be modified.
7) Realtime Collaboration
User can allow other’s to change the content of file without having to refresh the page. File owner can give write permission to a user and he will be able to edit the file. This is very useful for teams. Programmers can use this feature to work on the same project.
Making collaboration realtime using Node JS – File manager in Laravel and React JS
8) Profile
User can manage his personal information from his profile page. He can edit his name, phone and profile image. When user uploads a new profile image, we delete his old profile image. So only 1 image of user is saved in file system. The profile image is displayed when he shares a file with someone and also when someone adds him in his contact list.
9) Change Password
User can change his password. For that, he needs to enter his current password first. This is to prevent any other person to change his password. Passwords are stored using password_hash() PHP function that generates a store hash. It is a one-way hash, which means that once hashed, it cannot convert back to plain text. So even if someone sees your database, he won’t be able to tell the user’s passwords.
10) Email Settings
Now user can control when he wants to receive an email. Right now we are giving him 2 options:
When someone add me in his contact list.
When someone shares a file with me.
11) Contact List
If there are some people with whom you have files frequently. Then you do not need to type their email address everytime you share the file with them. Just add them in your contact list and next time you try to share a file with them, you will see a dropdown list with all your contacts. You can just pick the contact and hit “Share” button.
You can also see all the files you have shared with specific person from contact list.
