DEV Community

Bentil Shadrack for Documatic

Posted on

Top 5 MERN STACK projects to improve your practical understanding🚀

In my journey to becoming a MERN STACK developer, I have come to appreciate building projects as a study guide.
Building projects by far has been said to be an instrumental way of boosting your skills and having enough hands-on experience as a beginner.
You want to improve your practical understanding of MERN stack development? Are you familiar with the entire procedure for creating applications utilising frameworks? What projects can you complete to prove your proficiency as a MERN-stack developer?

There are plenty of MERN stack projects ideas available to enhance your practical knowledge of MERN STACK Development. In this article, I have listed a few interesting beginners projects to learn MERN STACK web development along with some details for getting started.

hurrayyyy🎉🎉

Before we get to talking about these projects, Let's take a little break here to know what MERN Stack really is. What technologies form this Stack and the market value of a MERN Stack Developer.

What is MERN STACK?

MERN Stack is a JavaScript Stack which comprises powerful and robust technologies, used to develop scalable master web applications that includes backend, front-end, and database components. MERN Stack is a technology that is a user-friendly full-stack JavaScript framework for building applications and dynamic websites.
The main purpose of using MERN stack is to develop apps using JavaScript only.

mern

MERN Stack consists of FOUR technologies which are:

  • M-ONGODB (Database) : is for preparing document database and is a NoSQL (Non-Structured Query Language ) Database System
  • E-xpress : is used for developing Node.js web framework
  • R-eact : is for developing a client-side JavaScript framework
  • N-ode JS : is for developing the premier JavaScript web server

Top 5 MERN STACK projects to improve your practical understanding🚀

1. E-Commerce Website
One of the most popular MERN stack project suggestions for both newbies and experienced developers is an e-commerce website.
This project serves multiple purposes, both vendors and customers.
Customers:

  • Login/Signup to buy items
  • Browser through and filter products
  • Add/Delete products from cart and wishlist
  • Update their account details
  • Make payment for items purchased, etc.

Vendors

  • Login to their dashboard
  • perform CRUD operations on products
  • Manage users(customers)
  • Receive and review orders, etc.

Sample Repo 👉https://github.com/shabraware/HEIN.

2. Realtime Chat APP
A RealTime Chat Application is one of the simplest MERN Stack Applications that enables you to make use of mailing functionalities.
Some common feature of this App includes

  • User Login/Signup
  • Creating Chat rooms
  • Inviting users to chatroom via email
  • Add one-o-one chat with other users

Sample Repo 👉https://github.com/earthcomfy/lets-chat

3. Public Blog App
In a Public blog Application, you gain experience on adding privileges to writers on the contents they see on their dashboard as well as controlling that of a super Admin.
Some features of this App includes:

  • Writers login/Signup
  • Perform CRUD operations on Categories
  • Perform CRUD operation on Articles (User right reserved)
  • Manage writers and content on App (Admin right preserved)
  • Like / Comment Articles
  • Follow Writers
  • Browse Writers profiles
  • Filter Articles based on writers, categories, etc. Sample Repo 👉 https://github.com/qbentil/bentility Demo 👉 https://bentility.vercel.app/

4. Application for Food Delivery
Restaurants and customers should be able to communicate more easily thanks to this app. It must include an Admin Dashboard for Restaurant owners as well as a facing App for customers to order food.
Feature may include:

  • User Login / Signup
  • Add/Remove to/from Cart
  • Checkout order and make payment. (Online or Pay on Delivery)
  • Admin should be able to perform CRUD operation on food etc.

Sample
Repo 👉 https://github.com/qbentil/Bentilzone-Restaurant
Demo 👉 https://zone-restaurant.vercel.app/

5. Weather App
A Weather APP is one of the most prominent React Apps you can build in a few hours. This basic App gives you exposure on using external API's. It also involves a bit of state management to handle the data.

Some features of this App may include but not limited to:

  • Displaying the weather condition of the user's current location.
  • Search for the weather condition of a particular location.
  • Dynamic rendering of UI to suit weather condition etc.

Sample Repo 👉 https://github.com/qbentil/genuis-weather-app

Conclusion

In this article, we looked at what MERN STACK and the technologies involved.
The Apps listed here are based on personal experiences. Are you a MERN stack developer, which of the projects above have you built before? Which ones would you like to add? I will be glad to read them in the comments section. Comment on their demo or repository links.

Happy Hacking!
gif

Bentil here🚀
Are you a MERN stack developer, which of the projects above have you built before? Which ones would you like to add? Kindly share links to it or the repository. This can help others as well.

Kindly Like, Share and follow us for more.

Top comments (53)

Collapse
 
samareshdas profile image
Samaresh Das

I built a blog app with mern. People can authenticate, create, update and delete articles. Peoplr can also upload new profile pictures, update their profile details.
I also had some experience with AWS after building it as I am using aws to store the images for blog and host the backend also. It was an amazing experience and I loved it.

Collapse
 
qbentil profile image
Bentil Shadrack

Wow that's an awesome experience Samaresh🎉👏

Can you share link to the demo or repo?
That will be nice for others to check it out too😊

Collapse
 
clericcoder profile image
Abdulsalaam Noibi

Wow,what an impressive project.

I am also building the same project currently but I am not using AWS for storing the images.

Thread Thread
 
qbentil profile image
Bentil Shadrack

Okay...
What are you using to store your images?

Thread Thread
 
clericcoder profile image
Abdulsalaam Noibi

I am storing all the blog information which consists of title,summary, body,cover image in the mongoDb database.

Thread Thread
 
qbentil profile image
Bentil Shadrack

Oh great.
I am interested in how you store your images in the mongoDB

Thread Thread
 
clericcoder profile image
Abdulsalaam Noibi

I actually did not store the images. I was reffering to storing the blogs information in the mongoDB database

Thread Thread
 
qbentil profile image
Bentil Shadrack

Oh I see

Thread Thread
 
clericcoder profile image
Abdulsalaam Noibi

so for the file upload i use a package called multer.

Thread Thread
 
qbentil profile image
Bentil Shadrack

Exactly what I was thinking😀
I’ve used it before tho.

Collapse
 
samareshdas profile image
Samaresh Das • Edited

Here it is.
Blog

Though some bugs are there, I am still working towards fixing those and optimizing the app.
The git repo is private.

Thread Thread
 
qbentil profile image
Bentil Shadrack

Thank you🎉

Collapse
 
qbentil profile image
Bentil Shadrack

@Samaresh
Does your App has a CMS to publish and manage blogs?

Collapse
 
samareshdas profile image
Samaresh Das

Not a CMS. Anyone can come and create blogs. Only they will be able to delete it. I coded everything manually.

Thread Thread
 
qbentil profile image
Bentil Shadrack

I see

Collapse
 
pierreb profile image
Pierre

MERN is outdated.

  • PostgreSQL with JSON is better that MongoDB
  • If you stick with a full JS stack, NextJS is better than Express+React
  • If you need a production grade API in JS, HAPI is better than Express
  • And overall, use TS as much as possible

Then you will ditch Node for Golang when you are a grown up developer.

Collapse
 
alexerdei73 profile image
AlexErdei73

It is not about your framework knowledge but how well you understand how it works.
I like Next, because it is a great system and their docs are well made. What you are saying is just not true. You say Next is better than React and Node. It is almost the exact same thing codwise, the difference is mainly their cloud based architecture and server side rendering. It is better for SEO. If you don't pay them you have plenty of restrictions to cope with and there are performance problems. I suspect that these disappear, when you pay enough or at least getting better. My jam-stack apps are rocket fast apart from some minor things to improve. I deployed on Heroku, which costs money but easy and good quality. The better or worse depends on the use case. An ecommerce app is better on Next because of SEO. A Facebook clone with chat is better as a jam-stack app.

Collapse
 
pierreb profile image
Pierre

Seems like I didn't express myself clearly or you didn't understood it...

What I'm saying is: for people who want to stick with a full JS stack (front + back), the NextJS (and similar fullstack JS frameworks) approach is better, as it provides the structure, tooling etc.. to just focus on code without reinventing the wheel.

As performance seems to be important to you, why didn't you switch to Golang? The Pope of NodeJS wrote this: medium.com/@tjholowaychuk/farewell...

There is no Facebook clone that can run on a JAM stack... you have 0 idea how complex is a real-time chat infrastucture that scale. And MongoDB would be the worst choice here.

JAM / MERN = 2015. I'm writing this for new developers, who should NOT learn MERN or JAM, go straight to Golang + PostgreSQL + React, and you will thank me later.

Thread Thread
 
alexerdei73 profile image
AlexErdei73

I have some idea about Facebook clones, although a lot does not have chat ability. My one has.
alexerdei73.github.io/fakebook
You can try and chat with me there in the messanger.
I could have used MongoDB and Node to write it. I did not do, I simply used Firebase.
Scaling can be a problem, but mainly not because of the programming language. JavaScript is good enough for this. The scaling problem can be solved with the right infrastructure.
That is true that lot of people choose Next, because they do not need to deploy separately the front and backend parts. I deploy on Heroku. Its not free but good quality and fast. If I needed it even scales well, but it's expensive. Heroku uses AWS, so it works just like Firebase regarding the performance.

Thread Thread
 
pierreb profile image
Pierre

Wish you the best in your career Alex.

Thread Thread
 
alexerdei73 profile image
AlexErdei73

You are actually right that seeking a job especially right now with MERN stack is really hard. It is not because it is bad or outdated. There are simply too many developers out for the jobs.

Thread Thread
 
hasnaties profile image
Hasnat M.

Jeez.. this argument of yours made me realise that I don't know shitt. Even, it took me an hour to research what you're guys saying. Please do standoffs like this from time to time. I support it. Cheers matess!

Thread Thread
 
alexerdei73 profile image
AlexErdei73

No worries. In this stuff no one knows everything and those who say they are lying. Keep on learning. MERN stack is great to start with to get experience. It is less good for job hunting, which is currently hard anyway. It gives you good basics for learning more. After this Angular is getting straightforward. Then maybe a second language on the backend and an SQL database.

Collapse
 
qbentil profile image
Bentil Shadrack

Thank you Alex🙌

Collapse
 
desoga profile image
deji adesoga

So in essence, baby developers use Node?

Collapse
 
alexerdei73 profile image
AlexErdei73

Node is pretty much straightforward to learn if you know JavaScript. In theory from that point you are a full-stack JavaScript developer. In practice it is very hard to find a job with it if you were not a fight-trained senior. It is especially true for the MERN stack when your front end framework is React and database is MongoDB. It is easy to learn, so you get the most competition. First steps to learn Angular after this with Typescript and SQL. After this a second back-end language like Java or C#.

Thread Thread
 
qbentil profile image
Bentil Shadrack

Thank you.

Collapse
 
pierreb profile image
Pierre

Everyone starts as a baby, it's fine.

Collapse
 
epsi profile image
E.R. Nurwijayadi

Cool

Collapse
 
ucrynet profile image
CryNet • Edited

I have been created my personal blog on MEVN stack (V - are Vue). You can use my code as example:
github.com/uCryNet/crynet.tech
It's typical blog with auth, search, filters and CRUD. If you can see how it works, you are welcome:
crynet.tech/

P.S. I use TS too.

Collapse
 
alexerdei73 profile image
AlexErdei73

I tried your blog-site. I like the front-end. It is a nice design and looks great. You even put there a little animation with CSS, which is also great. You have some great content there too, which is unfortunately in Russian, so not for me really. If I had some time, I would looked at it with Chrome, which translates the things easily. If I were you I would make it bilingual, maybe Russian and English. That would be really cool. Maybe I will post there my article if I can do that easily in English, I will have a look. You can make an account on my one and post a nice article too about JS or Typescript. There are no pictures here, just colour coded code samples. The link is:
alexerdei73.github.io/my-dev-website

Collapse
 
ucrynet profile image
CryNet

Thank you for feedback. Yeah, site need to update, add new features and develop. But I have a couple of hours on weekend for work on the site.

Thread Thread
 
alexerdei73 profile image
AlexErdei73

Although it is none of my business may I ask you that your day to day job is developing UIs or something else?

Thread Thread
 
ucrynet profile image
CryNet

I'm React front-end developer. I working with: SCSS, TS, Redux...

Collapse
 
qbentil profile image
Bentil Shadrack

Great!

Collapse
 
qbentil profile image
Bentil Shadrack

Awesome!!!

Collapse
 
ucrynet profile image
CryNet

Thanks bro. You can write code remarks that I can improve my code ;)

Thread Thread
 
qbentil profile image
Bentil Shadrack

Sure.
I will do well to go through your repo

Collapse
 
aimunhidden485 profile image
Aimun Nahar

I've made three projects e-commece (two roles), blog-app and a chat app using mern stack..

Collapse
 
caleb_odedeji profile image
odedeji kehinde

How superb! Aimun, love those set of projects.

I use MERN stack as well. And With this number of projects, you must have gained quiet a number of useful experience.

Do you happen to know how to perform CRUD operations on mongoose sub documents like you would single its documents.

I am currently building a note app(MERN) and my data structurings for the notes data are embedded, and seem to be stuck at this point.

Dunno If this interest you or if you'd like to help figure this out ? If affirmative,

you probably might want to consider we continue on say Twitter [mobile.twitter.com/Caleb_Odedeji] .

I'd be glad, look forward to it Aimun.

Collapse
 
caleb_odedeji profile image
odedeji kehinde • Edited

How superb! Aimun, love those set of projects.

I use MERN stack as well. And With this number of projects, you must have gained quite a number useful experiences.

Do you happen to know how to perform CRUD operations on mongoose sub documents like you would single its documents.

I am currently building a note app(MERN) and my data structurings for the notes data happen to be embedded documentd( by just one step though) and I seem to be stuck at this point performing CRUD on the sub documents.

Dunno if this interest you or if you'd like to help out ? if affirmative,
you probably might want to consider we continue on say, twitter [mobile.twitter.com/Caleb_Odedeji] .

I'd be glad, look forward to it Aimun.

Collapse
 
qbentil profile image
Bentil Shadrack

That's awesome Aimun🎉👏

Do you mind sharing links to projects or repositories?

Collapse
 
aimunhidden485 profile image
Aimun Nahar

yeah sure.. Here it is
e-commerce: github.com/aimunhidden485/e-commer...
Blog: github.com/aimunhidden485/snapBlog...
Chat: github.com/aimunhidden485/chata-ap...
Though I've not deployed the chat app yet. Currently fixing some issues

Thread Thread
 
qbentil profile image
Bentil Shadrack

Great!
I am going to check them out

Collapse
 
lalami profile image
Salah Eddine Lalami

check IDURAR : github.com/idurar/idurar-erp-crm
IDURAR is Open Source ERP/CRM (Invoice / Inventory / Accounting / HR) Based on Mern Stack (Node.js / Express.js / MongoDb / React.js ) with Ant Design (AntD) and Redux
GitHub Repository : github.com/idurar/idurar-erp-crm

Image description

Collapse
 
qbentil profile image
Bentil Shadrack

Awesome 🙌
I will check it out

Collapse
 
jake0011 profile image
JAKE

Hey Bentil, looked up your works and i must say these are very cool stuff.

i’d love to connect as i am also Ghanaian, check your twitter.

i’ll follow you on here as well.

Collapse
 
qbentil profile image
Bentil Shadrack

Sure Jake
I will check up on twitter asap

Collapse
 
jimzzzz profile image
Jimmy

Can't access this one github.com/shabraware/HEIN :D

Collapse
 
clericcoder profile image
Abdulsalaam Noibi

Thanks for sharing this insightful Article.

I am currently building the public blog App.
I am also looking forward to add the following of writers and liking writers articles functionality.

Collapse
 
qbentil profile image
Bentil Shadrack

Oh Great!🎉🎉
Can't wait to see your progress.

Collapse
 
skylargerlach58938 profile image
Skylar Gerlach

Awesome experience, thx!

Collapse
 
qbentil profile image
Bentil Shadrack

Most welcome Skylar