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.
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 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!
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)
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.
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😊
Wow,what an impressive project.
I am also building the same project currently but I am not using AWS for storing the images.
Okay...
What are you using to store your images?
I am storing all the blog information which consists of title,summary, body,cover image in the mongoDb database.
Oh great.
I am interested in how you store your images in the mongoDB
I actually did not store the images. I was reffering to storing the blogs information in the mongoDB database
Oh I see
so for the file upload i use a package called multer.
Exactly what I was thinking😀
I’ve used it before tho.
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.
Thank you🎉
@Samaresh
Does your App has a CMS to publish and manage blogs?
Not a CMS. Anyone can come and create blogs. Only they will be able to delete it. I coded everything manually.
I see
MERN is outdated.
Then you will ditch Node for Golang when you are a grown up developer.
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.
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.
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.
Wish you the best in your career Alex.
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.
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!
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.
Thank you Alex🙌
So in essence, baby developers use Node?
Everyone starts as a baby, it's fine.
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#.
Thank you.
Cool
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.
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
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.
Although it is none of my business may I ask you that your day to day job is developing UIs or something else?
I'm React front-end developer. I working with: SCSS, TS, Redux...
Great!
Awesome!!!
Thanks bro. You can write code remarks that I can improve my code ;)
Sure.
I will do well to go through your repo
I've made three projects e-commece (two roles), blog-app and a chat app using mern stack..
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.
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.
That's awesome Aimun🎉👏
Do you mind sharing links to projects or repositories?
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
Great!
I am going to check them out
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
Awesome 🙌
I will check it out
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.
Sure Jake
I will check up on twitter asap
Can't access this one github.com/shabraware/HEIN :D
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.
Oh Great!🎉🎉
Can't wait to see your progress.
Awesome experience, thx!
Most welcome Skylar