A clone of TrustPilot website is created in PHP and MySQL using Laravel framework version 11. For frontend rendering, I am using Vue JS 3 and on admin side I am using React JS.
Files included:
.php
.css
.js
Features:
User can post reviews about a company.
Can flag a review.
Can share reviews on social media.
Company owners can claim a company by verifying their email address.
Automatically takes screenshot of a company home page.
A Job Portal website is created in PHP and MySQL using MVC architecture. MVC stands for Model-View-Controller and this architectural design is used by many websites for scalability.
✅ Compatible with almost every shared/dedicated/VPS hosting.
✅ Free support.
New features:
✅ Optimized sending bulk emails.
Files included:
.php
.css
.js
Tech stack:
PHP +7.0
MySQL +5.0
Bootstrap 4
Vue JS 3
Recruiter can post a job
Recruiter posted jobs
Change status of applicant
Edit/delete job
A recruiter can edit or delete any of his posted jobs at any time. This helps if the recruiter needs to change the requirements for a job or delete if the vacancy is already been filled.
Jobs Listing
Users will get a listing of all the jobs posted by recruiters.
Job Detail
They can view the job details by clicking the job title.
Filter Jobs
On the jobs listing page, users can filter jobs by the type of job they want, like developer, designer, etc. By the location to see if the job is in their city or if they can relocate to that city. Or by the nature of the job i.e. is the job part-time, full-time, or remote. Users can also search the jobs in their salary range. This way they can find jobs that pay them according to their needs.
Real-time updates on new jobs
Users will get real-time updates whenever a new job is posted by the recruiter. They do not have to refresh the page to check if there is any new job. To develop this feature, I have used sockets. You need to install Node JS in your system or server to make this feature work. Even if you do not have Node JS installed, all other features will work except for real-time job updates.
Email notifications of new jobs
Users can turn on notifications from recruiters. Whenever that recruiter posts a new job, all the users who have turned on their notifications will receive an email.
Admin can see all the stats
The admin of the website can see the total number of users registered. The total number of jobs that have been posted by recruiters. And the total number of applications that have been submitted for those jobs. The admin can see all this information on his dashboard.
Manage users
Admin will have the option to add new users to the website. While adding, he/she can select if the user be an applicant or a recruiter. Admin can also manage existing users. Admin can edit the user and can also delete the user if required. Admin can change the password of the user as well. This is helpful if the user is finding it difficult to receive the password reset email. Or if you want to prevent the user from logging in.
Deployment
This Job Portal website can be deployed on any server that supports PHP and MySQL.
MEVN stands for Mongo DB, Express JS, Vue JS, and Node JS. It is a technology stack used by developers to create full-fledged web applications. Most of the applications created in the MEVN stack are single-page applications. But it is up to you if you want to single page or multi-page web application.
Table of content
What is MEVN ?
Why MEVN ?
Same language for frontend and backend
Easy deployment
Seamless user experience
APIs for mobile apps
Mongo DB is scaled horizontally
Short learning curve
Better support for sockets
Future of MEVN
Projects developed in MEVN
Where to learn MEVN ?
Official documentation
YouTube
Blogs
Issues you will face in the development
Let’s get started.
1. What is MEVN ?
MEVN is a technology stack used to develop full-fledged web applications. You can easily create scalable web applications either single-page or multi-page applications. It is a new yet quickly evolving technology stack that has been adopted by a lot of developers already. Learning this will not only make you a frontend developer but a backend developer as well. Thus increasing your demand and reputation in the community.
Hiring a developer in this stack is easy for companies as well. Hiring individual developers for the backend and frontend is costly, especially for startups. So they end up looking for someone who knows both the backend and frontend.
2. Why MEVN ?
If you learn this technology stack, your demand is automatically increased since companies would love to have a developer that can handle both frontend and backend tasks. Even if you didn’t get a job as a full-stack developer, you can still get a job as either a frontend or backend developer since you can work in both.
Same language for frontend and backend
In this stack, the primary language is Javascript. Node JS is a Javascript runtime environment, Vue JS is a Javascript frontend framework and Express JS is a framework of Node JS for creating APIs. Mongo DB syntax is also very similar to Javascript. So you do not need to learn Javascript for the frontend and PHP or Python for the backend. One language i.e. Javascript is used for both sides (frontend and backend).
Easy deployment
Vue JS builds are minified code of HTML, CSS, and Javascript. So they can easily be deployed on most servers. You do not need to worry if your hosting supports PHP, Java, Python, or any other language. If your hosting supports HTML (which almost every hosting does) then you are good to go.
Node JS can also be easily deployed on Virtual Private Servers (VPS) or dedicated servers. You can check our detailed guide on how to deploy Node JS on VPS or dedicated servers.
Mongo DB can also be deployed on VPS or dedicated servers. But it can also be deployed on Mongo DB’s official site. You can check our tutorial for Mongo DB deployment.
Seamless user experience
Most of the apps created in this stack are single-page applications. They provide a better user experience since there is no page reload on any link. Only the required section of the page changes dynamically. Some of the websites that are single-paged are Gmail, Facebook, and Twitter.
APIs for mobile apps
Most of the rendering is done on the client side. This means you have to create APIs for each request. This helps you in the future when you want to develop mobile apps for your website. Android and iOS apps can easily communicate with APIs developed in Node JS.
Mongo DB is scaled horizontally
Horizontal scaling is performed by adding more nodes to the servers. Horizontal scaling is best for a non-relational database like Mongo DB since all the data is stored in a single document.
Moreover, if you have to add one more attribute to a single entity, you can easily add it to that document only. Unless in MySQL, where either you have to create a column that will result in assigning the value to all rows. Or you have to create a separate table and join them in each query which will slow down your application.
In Mongo DB, all data required for an entity is stored in a single document. No relationships are made. So data can be saved on different servers without being dependent on each other.
Short learning curve
If you know Javascript, you already know Vue JS. Unlike in React where you have to use JSX syntax, in Vue JS you can use legacy HTML and CSS code and use Javascript with it. If you know the basics of Javascript, spend a few hours on Vue JS official documentation and you will become a Vue JS developer.
Better support for sockets
Sockets are used for real-time communication. Like on Facebook, you do not have to refresh the page to check new notifications. Whenever a new notification is received, it automatically displays an alert. If you develop your web application in the MEVN stack, you will be able to add real-time features like alerts, notifications, chat messages, real-time collaborations, etc.
3. Future of MEVN
MEVN proving itself a bright future. A lot of developers are moving to this stack. It is in the race with MEAN and MERN stacks. It has solved a lot of issues that developers faced in web development. For example, during infinite scroll, the web page hangs due to too much data. Vue JS solved this by using the useVirtualList component. Node JS has solved real-time communication problems via sockets. And Mongo DB has solved the scalability problems and also the problems that came with tightly-coupled databases.
4. Projects developed in MEVN
To show you how easy it is to develop websites in this technology stack, we developed some projects in it. We have developed a chat app, a customer support ticketing system, and more.
5. Where to learn MEVN
You can learn this technology stack from many sources.
Official documentation
To stay updated with the latest versions and features, check out the official documentation of Vue JS. Node JS can also be learned from their official documentation. Mongo DB also came with outstanding documentation.
YouTube
Check this playlist to find a lot of tutorials on the MEVN stack.
Blogs
We have created many text-based tutorials on this stack.
6. Issues you will face in the development
You need to spend a lot of time to make the application up and running. The first version of your product might take more time and effort because you need to set up the APIs and basic functionality. However, we have created a boilerplate for authentication that will save you 100% time on rewriting the authentication code.
It is a single-page ecommerce website developed in Vue JS. Vue JS is an open-source Javascript framework specifically built to design user interfaces and is widely used for creating single-page applications.
Node JS is a Javascript run-time environment developed for creating the backend of applications. Its framework Express is widely used for creating APIs. It is built to create scalable applications.
Mongo DB is a no-SQL database. It is a non-relational database system. It is easily scalable because the data is loosely coupled.
Features
Free
Premium $100
Product management (admin panel)
Yes
Yes
Product listing
Yes
Yes
Product detail
Yes
Yes
Shopping cart
Yes
Yes
Checkout (PayPal & Stripe)
Yes
Yes
Order management (admin panel)
Yes
Yes
Order detail
Yes
Yes
Product specifications
Yes
Yes
Stock management
Yes
Yes
Search and sort
Yes
Yes
New order email
Yes
Yes
Product reviews
No
Yes
Shipping charges by country
No
Yes
Product image compression
No
Yes
Realtime chat between users and admin
No
Yes
Following is the feature list of this project:
Product management (admin panel)
Product listing
Product detail
Shopping cart
Checkout (PayPal & Stripe)
Order management (admin panel)
Order detail
Product specifications
Stock management
Product reviews
Search and sort
Shipping charges by country
Email to admin whenever a new order is placed
Product image compression
Realtime chat between users and admin
Add product
Admin will be able to add products. He will enter the name of the product. Add a little description of the product. And set the price of the product. The price will be in dollars. Along with them, the admin can upload one or more images of the product.
Product listing
Users will see the products added by the admin on their home page. The latest products are displayed first. Along with each product, a button will be displayed to view the detail of the product.
Product detail
Users can view the detail of the product. If the product contains more than one image, then it will be displayed as a beautiful slider. From this page, users will also be able to add products to the cart. If the product is already added to the cart, then he will be able to remove it from the cart.
Shopping cart
Users can add the product to the cart. From the cart’s page, he will be able to adjust the quantity of the product. There will be multiple products in the cart and you can set the quantity of each product separately. You will also see your total bill as soon as you change the quantity of any product added to the cart.
Checkout (Stripe & PayPal)
After adding the products to the cart and setting each product’s quantity, the user can go to the checkout page. Here, he can either pay via Stripe or PayPal. Both payment methods accept debit and master cards securely. When the user made the payment, his payment is verified from the server. If verified, then a new order will be created in the database.
Order management
Whenever a user made a payment via Stripe or PayPal, an order will be created. All orders will be displayed on the admin panel ordered by latest to oldest. By default, the status of the order is “Processing”. But admin can change the status of the order to “Completed” when the product is delivered to the customer.
Admin will also be able to view the total amount of the order, the payment method customer has used, and the user’s shipping details.
Order detail
Admin can view all the products that were included in each order. He can manually verify the payment by clicking the payment method. If he clicks “Stripe”, he will be redirected to the Stripe payments page. If he clicks “PayPal”, then he will be redirected to the PayPal business page. Admin can check the name, email, and phone of the user and also his shipping address.
Product specifications
Admin can add the specifications of each product and the user will be able to see it on the product detail page.
Stock management
Admin can set the number of units in stock for each product. When the user makes an order, then the number of units he has selected will be subtracted.
Product reviews
User can give reviews on a product and it will be displayed to all users who visit that product. Admin will have the ability to remove any review, for example, spamming, etc.
Search and sort
Users can search by product by its name, description, category, or specifications. Users can also sort the products by date or by price.
Shipping charges by country
Admin can set the shipping charges by each country because, in a global eCommerce website, users place orders from all over the world. For example, if your store is located in USA and someone places an order from the UK. Then you charge the shipping fee differently than other countries.
Email to admin whenever a new order is placed
Admin will receive an email whenever a new order has been placed by the user.
Product image compression
Now you can compress the product images from the admin panel. The 3 MB image can be reduced to just 182 KB and the image will still be of great quality.
Realtime chat between users and admin
Users will be able to have a chat with the admin to know more about a product before placing an order. I believe every eCommerce website should have this feature.
We are constantly updating this project and adding more features and enhancements to it. Following are all the builds that are released till today.
In the very first release, we build the basic E-commerce version where the admin can add products and users can see them. Add them to carts and order them. We also added Stripe and PayPal payment methods.
In the second release, we added more features. Allowing users to give reviews about a product. Allowing admin to charge a different shipping fee for each country and many more.
In the third release, we added functionality to compress product images and to have real-time chat between users and admin.
“Constra” is an HTML static template in HTML & CSS. It is an HTML template designed for the construction website. The businesses that allow construction-related services. We have converted to a dynamic website using Vue JS and Laravel.
You can check out the following tutorials. In these tutorials, we have shown you, how to convert a static HTML template into a dynamic construction website.
Part 1:
You will learn in this part:
How to convert an HTML template into a Vue JS app
Create single-page applications in Vue JS
Use the vue-router module
Use internal CSS, JS, and image files from the “assets” folder
How to fix the “Mixed spaces and tabs” error
Remove ESLint from the Vue JS app
Use Bootstrap, jQuery, and other JS libraries in the Vue JS app
How to fix “Can’t resolve popper.js”
Use the “background-image” property in Vue JS
Use slider library (Shuffle) in Vue JS
Part 2:
In this part, you will learn:
How to pass parameters in URL in Vue JS
How to fetch a single record in Laravel eloquent
How to call AJAX using Axios in Vue JS
Using “slick” JS library in Vue JS
Create a foreign key in Laravel migration
Create a has-many relationship in Laravel
Upload file in Laravel storage
You can download the complete source code from Github as well.
You can also check out our chat website developed in Vue JS, Node JS, and Mongo DB.
In this article, we will teach you how to pass value between 2 components in Vue JS. We will be using Vuex for this.
Video tutorial
Create a store
First, you need to create a store. To do this, install a module named vuex. Run the following command in your terminal:
npm install vuex
After that, you must create a folder named “vuex” in your “src” folder. Then, create a file named “store.js” inside “vuex” folder. Following will be the content of store.js file:
“variable” will be the variable that you need to pass between components. You can set its default value here.
Pass value to component 1
Let’s say you want to display the value in component 1. So I am going to create a simple paragraph tag to display a value.
<p v-text="variable"></p>
And we need to make this variable a computed property. So we will write the following Javascript code in component 1.
import store from "../vuex/store"
export default {
computed: {
variable: function () {
return store.getters.getVariable
}
}
}
First, we are including the store file that we created in the previous step. Our component is in “src/components” folder, and store file is in “src/vuex”, so we have to move a step back using “../”.
Then we are created a computed property “variable”, and it returns the “getVariable” value from the store getters object. The getters is the built-in property in Vuex store. And “getVariable” will be a function that we need to create in our store file.
So write the following code in the [getters goes here] section of store.js file:
getters: {
getVariable: function (state) {
return state.variable
}
}
It accepts a state object as an argument. And with this object, you can call the variables in the state() function create in the first step. Run the component 1 now and you will see the value “123” in your paragraph.
Pass value from component 2
Now support in your component 2, you want to change its value and it should reflect in component 1 as well. First, write the following code in the [mutations goes here] section of store.js file:
It accepts state and newValue as arguments. With the state object, you can change the values. And newValue is simply the new value that will be passed to it.
To call this function, we are going to create a simple button in our component 2.
Then we are going to create this method in our Javascript and call the setVariable function from our store file.
import store from "../vuex/store"
export default {
methods: {
updateVariable: function () {
store.commit("setVariable", 567)
}
}
}
commit function from Vuex store will call the function created in mutations object. Second parameter will be the new value. Run the app now and click on the button. As soon as you press the button, you will notice that the variable value in 1st component will automatically get updated.
Source code
[wpdm_package id=’1733′]
Conclusion
So you have learned how to create a Vuex store in Vue JS, and how to pass value between components in Vue JS. If you face any problems in following this, kindly do let me know. We also created a chat application where we implemented this technique, so you will know how it is used practically in projects.
In this article, we are going to provide you with a free course to develop a full-fledged real-time chat app in MEVN (MongoDB, Express, Vue JS, and Node JS) Stack. Here M stands for MongoDB which we have used as a database. E stands for Express which is a Node JS framework. V stands for Vue JS which will be our front end. We will be creating a single-page application in Vue JS. And N stands for Node JS which will be our backend.
You can download Node JS from here. And Mongo DB from their official site.
Features
Free
Premium $100
Sign up
Yes
Yes
Login/logout
Yes
Yes
Add contacts
Yes
Yes
Private chat
Yes
Yes
Message encryption
Yes
Yes
Chat with attachment
Yes
Yes
Realtime chat
Yes
Yes
Email verification
No
Yes
Reset password
No
Yes
User profile
No
Yes
Chat with emojis
No
Yes
Bookmark messages
No
Yes
Copy message
No
Yes
Archive chat with password
No
Yes
Group chat
No
Yes
Notifications page
No
Yes
Customer support
No
Yes
We will do the deployment of this app on live servers. You can find the link to all the tutorials of this series here. Following are the topics we have covered in this series.
Installation of Node JS server
server started
In the very first tutorial, we have done the installation of the Node JS server. We also connect our Node JS server with MongoDB. You can find the tutorial here.
Setup Vue JS CLI – A single page application
vue js
Then we set up our Vue JS app using CLI. We used Vue JS CLI because we will be creating a single page application. We will be using Vue 3. Right now, we will be using the app on the local server. But once it is done, we will teach you how you can create a production build of it. And also how you can make it live on your website. This tutorial can be found here.
Routing for single page application
As this is a single page application, so we will be doing routing using Vue components. You can learn how to implement routing in a single page Vue JS app from this tutorial.
Hello world
footer
In this part, we will learn how to integrate Bootstrap into your Vue app. So you can design the theme as per your choice. We also show you how you can create header and footer layouts in Vue JS. The header and footer will be displayed on each page. For the header, we will be creating a simple Bootstrap navbar. And for the footer, we will simply be displaying copyright text and the current year dynamically.
Registration
register
You will learn how to display a form using Vue JS. Sends the form values to the Node JS server. And how Node JS can save the data in the MongoDB database. You will also learn how to check if certain data exists in MongoDB or not. Moreover, you will also learn how to encrypt the passwords before saving them in MongoDB. So even if your database gets stolen, your user’s passwords will remain unknown to the hacker.
One more thing you will learn in this part is how to deal with CORS (Cross-Origin Resource Sharing) errors in the Node JS server.
Email verification
Email verification, reset the password, user profile – Vue JS, Node JS, Mongo DB
After successful registration, an email will be sent to the user’s email address. That email will have the verification code. And the user will be redirected to a page where he can enter his verification code.
He will not be able to log in until he verifies his email address.
Login
In this part, we do the authentication. You will learn how to generate JWT (JSON Web Tokens) and how to store them in local storage for future usage. You will also learn how to validate the encrypted passwords saved in MongoDB while authenticating.
Reset Password
If a user forgets his password, he can reset it. He just needs to enter his email address. An email will be sent to him with a link to reset the password. When he clicks that link, he will be redirected to a page where he can enter his new password.
Get logged-in user’s data
user name navbar
We will learn how to call AJAX with headers in Vue JS. How Node JS server read the headers? And how to create middleware in Node JS.
Logout
local storage empty
We will teach you how to log out as a user from MongoDB and from the Vue JS client app. We will remove the JWT token we create in the login part.
Contacts
add contact success
To chat with people, we need to add them to our contacts. We will be creating separate components in the Vue JS app for adding and displaying all contacts. We will also be creating a new module in the Node JS server. You will learn how to insert data in a nested array in MongoDB.
We will be calling AJAX requests using Axios in Vue JS. While deleting a contact, you will learn how to ask for confirmation using sweet alert dialogs.
delete contact confirmation
You will also learn how to remove an element from a nested array in MongoDB.
Chat with attachments
This is the main module of this app. We advise you to please put more focus on this part. It teaches you how to import CSS in specific Vue components only. How to send input type file from the Vue JS app to the Node JS server. How Node JS saves files on the server.
Encryption and Decryption
messages collection
We are saving messages in MongoDB in encrypted form. While fetching the messages, we are again decrypting the messages back to their original state. Even if someone has access to your database, he will not be able to read your messages. Because he does not have the key. The key will only be stored on the Node JS server.
You can see the messages are fully encrypted. On the home page, where we are displaying all user’s contacts, we will also be displaying unread messages from each contact.
Attachments uploaded with messages are also protected from direct URL access. So we will show you how you can convert a file in base64 string using Node JS. And download them to your system using the Vue JS app.
attachment uploads
Realtime chat using Socket IO
realtime new message toast
Chat will be real-time. Meaning users do not have to refresh the page to see new messages. He will automatically receive a notification. If the chat is opened, then the incoming message will be appended automatically.
We have “load more” functionality. This means that we will only show 10 messages in each AJAX call. To get the previous 10 messages, the user will click on that button and we will fetch 10 more messages. So you will learn pagination using Node JS and Mongo DB too.
Deploy Node JS, Mongo DB, and Vue JS apps
Deploy Node JS on Heroku, Mongo DB, and Vue JS
We will be deploying our Node JS server on Heroku. You can check our Heroku guide here. We will be deploying MongoDB on mongodb.com. And we will be deploying our Vue JS app on any hosting provider we choose. For example, a2hosting, Bluehost, Siteground, etc. We will create a production-ready build of our Vue JS app and upload it on our live server.
However, you might face some problems going live. That’s why we have written a detailed complete tutorial on the deployment on all these 3 platforms.
Search Contact
You can search your contacts by their email address. Searching with their email address points you to the right person. Because multiple people can have the same name. But email is unique in the entire “users” collection in MongoDB.
Group chat
group unread messages
Previously we discussed private chat. In this tutorial series, we also cover the group chat feature. You will be able to create groups. Add members to the groups. You will be sending an invitation to the members to join the group. The other person can accept your request to join the group or can ignore it.
Any member can leave the group anytime he wants. But this is not the case for admins. For the admin to leave the group, he must first assign someone else to the admin of the group. The other person must be a member of the group. After assigning someone else as an admin, he can easily leave the group.
People who are not members or the admin of the group, cannot send or view the messages in the group chat.
The chat in the group is also real-time. All the other members of the group will get a notification when someone sends a message. If they have opened the group, then the new message will automatically get appended at the end of the chat.
Group chat is also end-to-end encrypted.
And same as we did for private chat, we are displaying several unread messages from a group on the page where we are displaying all groups.
Emojis
In chat, you can also send emojis to the recipient. Emojis are also encrypted.
Bookmark message
You can also bookmark your favorite messages. This way, you can always see your bookmarked messages whenever you want. You can bookmark your messages as well.
Copy message
If someone sends you a lengthy message, like an essay. You can copy the whole message with a single click.
Archive chat with password
You can archive your private chat with a password.
Once archived, no one will be able to view the chat.
To view the chat, you must provide the correct password.
You can remove the password by simply entering the correct password.
Archived chats cannot be deleted. You must first un-archive the chat, then delete it.
Re-designed
I re-designed the website into a beautiful template. That’s how it looks now.
So you will be learning to create a full-stack chat app from scratch using Node JS, Mongo DB, and Vue JS. Again, you can find the tutorial for the complete series here. Enjoy!
