You can buy each project separately too as well. Besides getting all the pro features of all 14 projects, we also provide additional services to them.
Secure payment
We allow users to make payments easily and securely using their bank accounts. You can contact us here and we will send you an invoice to make the payment.
Source code
Complete source code is included in all the projects. You will enjoy the pro version of each project.
Support
If you encounter any problem in installing the project or deployment, our technical support team is here. You can schedule a meeting with them and they will be able to assist you over AnyDesk or TeamViewer.
Use as a college project
If you are a student and are looking to get ready-to-go projects to learn about code and how real projects work, this will be beneficial for you. Also, Node JS projects are good learning points for students in advanced programming.
Customize as you want
Once you download the projects, you can customize them as per your needs. You can change the color theme, add new features to it, etc.
Get help in deployment
Once projects are set up in your local host, we will be here if you needed any help in deployment to the live server. For Node JS projects, we will assist you in deployment to Heroku. And for Mongo DB projects, we will help you with a deployment to mongodb.com.
Picture Competition is a mobile responsive real-time web application developed in Node JS and Mongo DB. Its frontend is designed in Bootstrap and Vue JS. You can create competition between 2 people and the others can vote on the person based on looks or skills etc.
It uses login authentication using JWT (JsonWebToken). It does not use the browser session due to the following reasons:
Sessions are destroyed once your app is restarted from terminal.
Sessions are not linked with the server, they are stored in browser only.
The benefit of using JWT is that you can always log out a user from your Mongo DB. Just go to the “users” collection and find the specific user. Then empty the “accessToken” field of that user’s document.
Login and Registration
2. Create Competitions
Registered users can create competitions between 2 users. You can enter name and upload 1 picture of each competitor. There is no limit in the number of competitions to create, you can create as many as you want. You can view your created competitions on your “My Competitions” page.
As soon as you create a competition, it will automatically be displayed to all the users as well as to the admin in real-time. Users do not have to refresh the page to see new competitions. It uses Socket IO to display data in real-time.
Create Competition
3. Search
Users can search competitions by the name of competitors. Data is filtered and rendered using Vue JS. There is no need to press the enter key, the data is filtered as soon as the user starts typing in the search box.
Search and Sort
4. Sort
Users can also sort the competitions by any of the following for sorting functions:
Highest votes to lowest.
Lowest votes to highest.
Oldest to newest.
Newest to oldest (default).
5. Vote on Competition
Logged-in users can vote on the competition. You can either vote on one of the competitors. Once the vote is cast on one competitor, it cannot be removed. Also, you can cast your vote on only one of the competitors, not on both of them. It is also real-time, as soon as the vote is cast, it will automatically be displayed to all the users and the counter is incremented. The counter displays the number of votes cast on each competitor.
Votes
6. Delete Competition
Competitions can only be deleted by either of the users who created the competition, or by the admin. Once the competition is deleted, all the uploaded images will be deleted too. As soon as the competition is deleted, it will automatically be removed from all the other users too, without having them refresh the page.
7. Realtime Update using Sockets
Sockets are used for real-time communication. Instead of fetching the data from the server after regular intervals, sockets attach listeners to the client-side. Listeners are listening to the events sent from the server. The server will emit the event and the client will listen to that event and respond accordingly. In this project, sockets are used for the following features:
When competition is created.
When competition is deleted.
To increase the counter after vote is casted to the competition.
Notifications.
8. Notifications
When a competition is deleted by the admin, the admin will write the reason for the deletion. Thus, a notification will be sent to the user along with the reason why his competition was removed. By default, notification status is “unread” and they are highlighted. As soon as the user clicks on any of the notifications, that notification will be marked as “read” and it will no longer be highlighted.
Notifications
9. Load More Button
When the data in the database increases, it is not feasible to load all the data in a single AJAX request. So a “load more” button is created to solve this problem. For example, 10 records are fetched in the first AJAX request. The next 10 records will be fetched when the “load more” button is clicked, and so on.
Load More
10. Admin Panel
Admin panel is created so you (administrator) can delete any competition you find offensive. The default email and password of admin are:
email = admin@gmail.com password = admin
11. Manage Competitions
Admin can delete competitions that he finds offensive. However, the admin must give the reason why that competition is deleted. A notification will be sent to the user who created that competition and he will be able to view it from the top navigation bar.
12. Reset Password
Now you will be able to reset your password if you ever forgot. You just need to enter your email address and an email will be sent to you with a link to reset the password. We are using the nodemailer module to send an email.
Forgot PasswordReset Password
13. Email Verification
When a new user registers, we are sending a verification email to the user’s entered email address. The user will not be able to log in until he verifies his email address. When a user clicks the link on his email address, he will receive a message that says that his account is verified. Then he will be able to log in successfully.
Email Verification
14. SMTP Configurations from Admin Panel
To send an email, you will need an SMTP server. Every SMTP server requires some configurations to set up that include, host, port, email, and password. You can write these values directly hardcoded in your code, but to update these values in the future, you have to find these values in the code and update them.
In this project, you can set these configurations directly from the admin panel. Once the values are set, new emails will be sent using the new configurations.
SMTP configurations from admin panel
15. Adult Image Validation
This is a must-have feature if you are creating a website that allows users to upload pictures and they will be seen to the world. Anyone can upload an image that contains adult content, and it will not be good for your business. So when the user is uploading pictures while creating competition, the system will automatically check if the image is safe to upload.
If the image is an adult image, then an error will be shown to the user and it will not be uploaded.
16. Admin Panel Stats
Admin can see total users, total competitions, and total votes cast so far. They are also real-time, so when a new user is registered, or new competition is created, or event a new vote is cast, it will automatically be incremented here.
Also, when competition is deleted, the number will automatically get decremented as well, without having the admin refresh the page.
Admin Panel Stats
17. Real-time Comments
Users can comment on each competition. And they are also real-time as well. Once a new comment is added, it will immediately be displayed to all the other users as well. They do not have to refresh the page to see new comments.
Real-time Comments
18. User Profile
Users can now update their names and profile pictures. We are using the fs (file system) module to upload the picture. User can also add their bio, date of birth, country, and social media links. Media links include Facebook, Instagram, google plus, Twitter, and LinkedIn.
User can also change their account password. In order to change the password, the user must enter the current password. The new password should be entered twice for confirmation.
User Profile
19. Free Customer Support
This is not a feature of the project, but it is a free service provided for the pro version only. That means if you find any difficulty in installing or configuring the project, we will help you install it. Also, if you encounter any error or a bug in the released version, then it can be fixed too.
These are all the features we have right now in the picture competition web app. We are open to more ideas. If you have more ideas to add, kindly do let us know.
A Financial Ledger script is created in Node JS, Mongo DB, and Vue JS. A financial ledger is used to track your daily finances, for example, your income, your expenses, etc. This script allows you to track your total income, total spending, and your current total balance. They are referred to as “stats” in the script. You can debit the entry by entering the amount that is negative. And you can credit an entry by simply writing its amount.
We have used the HTML and CSS code from this codepen. We have made it dynamic by using the latest technologies like, Vue JS for front-end, Node JS for back-end, and Mongo DB as the database. It has complete CRUD (Create, Read, Update, Delete) operation. It has the following features:
Insert data in Mongo DB using Node JS.
Fetch all documents from Mongo DB.
Update specific document in Mongo DB.
Delete documents from Mongo DB.
Case-insensitive search in Mongo DB documents.
Search by sub-string from Mongo DB document’s keys.
Realtime data insert.
Real-time update.
Realtime deletes.
“Load more” capability.
Datetimepicker library.
EJS templating engine.
Express-formidable for handling form fields.
Skip, limit and sort in Mongo DB.
Video tutorial:
1. Insert Data in Mongo DB using Node JS
An interface that allows you to enter the values (time, description, and amount), created in Vue JS. It binds those input field values to the Vue JS model. To enter the time, we are using a library datetimepicker. We are calling an AJAX request to the Node JS server with the input field values as FormData object when the form submits. That will simply insert a new document in Mongo DB collection “entries”. When the data is inserted, it is also inserted in the Vue JS array. This allows the new data to be appended automatically without having to refresh the page. The stat values automatically are updated based on if the entry is debit or credit.
2. Fetch All Documents from Mongo DB
An AJAX request is sent from the client to view all the data from the database. The server will return all the documents sorting from latest to oldest i.e. newest records will be shown first. The sorting is performed based on the date field selected during insertion. When the data is returned, it is concatenated in the Vue JS array that allows the user to view the data when the page loads. When the data is fetched, the stats are also updated automatically.
3. Update Specific Document in Mongo DB
To update specific documents, we are using Mongo DB auto-generated ObjectId field “_id”. This allows you to search the document, then we can perform the update query. To update the document, we are using HTML’s contenteditable attribute that allows you to edit the HTML node innerHTML by just typing in it. When the content of that div changes, we are sending an AJAX request to the Node JS server that performs the update query. If you update the amount value, then the stats will also get a change in real-time.
4. Delete Documents from Mongo DB
Deleting an entry will remove the document from the Mongo DB collection too. The row will be removed and the stats will be updated too.
5. Case insensitive Search Mongo DB
You can search the entries by description you have put during the insertion, or you can search the entries by either they are debited or credited. For example, you can write “debit” in the search box and it will show all the entries that are debited. The same goes for the “credit” search query.
6. Sub-string Search Mongo DB
While searching by description, you do not need to know the exact words. You can type the part of the description you have remembered and it will search the record anyway.
7. Realtime Mongo DB Data Insert
When a new entry is added, it is automatically prepended in the list using Vue JS. You do not have to refresh the page to view the new entries.
8. Realtime Update in Mongo DB
The same goes for the updation. You can update the entry’s description or the amount by simply typing in its box. When you start typing it automatically gets updated in the Mongo DB too. Also, the stats values also get updated if there is any change in the amount.
9. Realtime Delete in Mongo DB
With each entry, there is a minus (-) sign. On clicking that button, it will remove the entry from the list and also from the Mongo DB. The stats also gets updated accordingly.
10. Load More Capability
In the real-world, when you are creating a financial ledger, there will be hundreds of entries. So loading all entries when the page loads will slow down your application. So what we do is, load a few entries when the page loads. Then we show a button called “Load more”. Upon clicking that button, we will fetch the next entries from Mongo DB and so on. We will be using AJAX to fetch more entries.
11. Datetimepicker Javascript
In the financial ledger, it is important to enter the date the entry was added. So on the web, we have a library called datetimepicker by XDSoft. We are using this library to enter dates and times easily.
12. EJS Templating Engine in Node JS
In Node JS, to render files, there is an engine called EJS. It is used to render HTML files. The rendered files will have an extension “.ejs” instead of “.html” or “.php”.
13. Express Formidable Module in Node JS
In Node JS, to handle FormData object sent using AJAX, we are using a Node JS module named express-formidable. As the complete app is in Javascript, so there are a lot of AJAX requests in this app. Each AJAX request will send a FormData object to send values that the server will process.
14. Skip, Limit and Sort in Mongo DB
While fetching the records from Mongo DB, you can skip the records that are already been displayed to the user. Similarly, to load the data faster, you can limit the number of records to be fetched from Mongo DB in one request. To display the latest entries added, you can sort the records fetched from Mongo DB.
When you hear the word “social networking site”, the first name that came to your mind must be Facebook. Then Instagram, Twitter, etc. We create a social networking site project just to give you an idea of how things work. It is not the exact code used in tech giants like Facebook. But it gives you an idea of how they do it.
Track system mails: All the emails sent from the system (Mail::to) function will be stored in a database. And the admin can view all the emails from the admin panel.
Online/offline status: Now you can know when your friends are online and when they are offline. This will be helpful because you can just leave a message if the person is currently offline.
Last scene of the user: You can also see your friend’s last scene active. This will help in situations like earthquakes etc. you can know which friends are not active in recent times.
Track user activity: Admin can view the activities of users like when they are logged in when they created a page when they joined a group etc.
A Laravel blog website along with an Android app is created with an admin panel. It uses the design template from https://bootstrapmade.com/. It has the following key features:
Google Adsense approved
The project is tested with Google Adsense and it was approved by Google for monetization. You just have to link with your Google account and you will start receiving money once you reach the Google payment threshold.
User side
70 built-in blog posts.
Random quotations.
Total users display.
Custom advertisement to generate revenue.
Share posts on Twitter and Facebook.
Limit access to some features for registered users only.
Registration with Email Verification.
Secure Login.
Comment on Post.
Reply to the comment.
Related Posts.
Subscribe to the newsletter.
Social Links.
A section to sell items directly.
Amazon affiliate links.
Realtime Chat with admin (Firebase).
Manage Profile.
Change Password.
Custom Advertisement.
Admin panel
Dashboard Statistics.
Add/Edit blog posts.
Add/Edit items that sell directly.
Manage Inbox.
Manage Comments.
Realtime Chat with users (Firebase).
Android app
We also developed an Android App for this project which your users can download from Google Play Store and read your blog posts from that app. Here is the demo of the Laravel blog android app:
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.
Features
Free
Premium
Login and registration
Yes
Yes
Upload files
Yes
Yes
Download files
Yes
Yes
Delete files
Yes
Yes
Share Files publicly via link
Yes
Yes
Email verification
No
Yes
Reset password
No
Yes
Create folders
No
Yes
Private file sharing
No
Yes
Rename files & folders
No
Yes
Move files
No
Yes
Search files
No
Yes
Stripe and PayPal
No
Yes
Blog integration
No
Yes
Image compression
No
Yes
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.
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.
Whether you are creating an E-commerce website or simply wanted to receive payments from your website using PayPal and Stripe, this script already contains all the source code you need to show Stripe and PayPal payment buttons and receive payments directly in your Stripe and PayPal accounts.
It also has a full shopping cart implementation, where you can add products to the cart, update quantities, remove products from the cart and move to checkout.
Demo
Home page
Here you can add products to the shopping cart and also you can remove products from the shopping cart.
When you add or remove a product from the shopping cart, you will see the shopping cart badge on top updating its values in real-time.
Shopping cart
On clicking the above “Cart” button you will be redirected to the shopping cart page where you can change the number of products and can also remove the product from the shopping cart.
You can also see the grand total at the bottom right that changes in real-time as you change the quantity of product or when you remove a product from the shopping cart.
Checkout
Here you can make the payment using Stripe or Paypal.
Fully documented code
Comments have been added with each line of code for explanation.
Separate file for each function
To manage the code, each payment method is separated in its own file. So you can easily change and modify the code as per your needs.
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.
