Top 5 MERN STACK projects to improve your practical understanding🚀
#crypto#blockchain#cryptocurrency#offers
Bentil Shadrack

Bentil Shadrack @qbentil

About: Software Engineer || Promoting & sharing educative tips & resources from Devs💻 and for Devs💻| Buy me a ☕ https://www.buymeacoffee.com/qbentil

Location:
Accra, Ghana
Joined:
Sep 2, 2021

Top 5 MERN STACK projects to improve your practical understanding🚀

Publish Date: Mar 28 '23
244 53

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.

Comments 53 total

  • Samaresh Das
    Samaresh DasMar 29, 2023

    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.

    • Bentil Shadrack
      Bentil ShadrackMar 29, 2023

      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😊

      • Samaresh Das
        Samaresh DasMar 29, 2023

        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.

      • Abdulsalaam Noibi
        Abdulsalaam NoibiMar 30, 2023

        Wow,what an impressive project.

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

        • Bentil Shadrack
          Bentil ShadrackMar 30, 2023

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

          • Abdulsalaam Noibi
            Abdulsalaam NoibiMar 30, 2023

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

            • Bentil Shadrack
              Bentil ShadrackMar 30, 2023

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

              • Abdulsalaam Noibi
                Abdulsalaam NoibiMar 31, 2023

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

    • Bentil Shadrack
      Bentil ShadrackMar 30, 2023

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

      • Samaresh Das
        Samaresh DasMar 30, 2023

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

  • Aimun Nahar
    Aimun NaharMar 29, 2023

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

    • Bentil Shadrack
      Bentil ShadrackMar 30, 2023

      That's awesome Aimun🎉👏

      Do you mind sharing links to projects or repositories?

    • odedeji kehinde
      odedeji kehindeMar 30, 2023

      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.

    • odedeji kehinde
      odedeji kehindeMar 30, 2023

      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.

  • Abdulsalaam Noibi
    Abdulsalaam NoibiMar 30, 2023

    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.

    • Bentil Shadrack
      Bentil ShadrackMar 30, 2023

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

  • Pierre
    PierreMar 30, 2023

    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.

    • AlexErdei73
      AlexErdei73Mar 30, 2023

      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.

      • Bentil Shadrack
        Bentil ShadrackMar 30, 2023

        Thank you Alex🙌

      • Pierre
        PierreMar 31, 2023

        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.

        • AlexErdei73
          AlexErdei73Mar 31, 2023

          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.

          • Pierre
            PierreMar 31, 2023

            Wish you the best in your career Alex.

            • AlexErdei73
              AlexErdei73Apr 1, 2023

              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.

              • Hasnat M.
                Hasnat M.Apr 2, 2023

                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!

                • AlexErdei73
                  AlexErdei73Apr 3, 2023

                  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.

    • deji adesoga
      deji adesogaApr 1, 2023

      So in essence, baby developers use Node?

      • AlexErdei73
        AlexErdei73Apr 3, 2023

        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#.

      • Pierre
        PierreApr 4, 2023

        Everyone starts as a baby, it's fine.

    • E.R. Nurwijayadi
      E.R. NurwijayadiApr 3, 2023

      Cool

  • Skylar Gerlach
    Skylar GerlachMar 31, 2023

    Awesome experience, thx!

  • CryNet
    CryNetApr 2, 2023

    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.

    • Bentil Shadrack
      Bentil ShadrackApr 3, 2023

      Awesome!!!

      • CryNet
        CryNetApr 4, 2023

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

    • AlexErdei73
      AlexErdei73Apr 29, 2023

      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

      • Bentil Shadrack
        Bentil ShadrackApr 29, 2023

        Great!

      • CryNet
        CryNetApr 30, 2023

        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.

        • AlexErdei73
          AlexErdei73May 1, 2023

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

          • CryNet
            CryNetMay 1, 2023

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

  • Jimmy
    JimmyApr 3, 2023

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

  • JAKE
    JAKEApr 28, 2023

    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.

  • Salah Eddine Lalami
    Salah Eddine LalamiJun 11, 2023

    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

Add comment