JaxongirIntroduction
So you've been learning programming for a quite some time and learned web technologies such as Html, Css, JavaScript, React, and Node and you've built few projects from tutorials such as Todo App, Weather App etc... but believe me as the one who stuck in those tutorials and wasted quite long time, I did not make much progress and failed to get my first job which should be much earlier if I followed this path I offer in this blog. And as tutorials don't tech the fundamentals of programming which is problem-solving, tutorials teach only syntax but not thinking like a programmer which only you can learn by doing A LOT OF PRACTISE throw trial and error. Remember growth happens in discomfort
I agre that tutorials are great for beginners but they can't get you too far. Once you know fundamentals of technologies that you've been learning, you can move on to challenging projects to practise skills and get better at them.
Projects in this blog are intended for programmers who know fundamentals of MERN stack but stuck in tutorials and haven't been making progress. All these projects force you to learn new technologies that you are not comfortable with but remember growth happen in discomfort and struggles so work hard and smart.
These projects overlap in some areas, so building one project helps you build another project. Basically you can use widgets, functionalities that You implemented in one project, in another project. And this will be part of your future job in the company.
Why to build these project?. You should build these projects so that you build a programmer mind, thinking, and improve your logic and become MERN stack master, I've curated these 10 MERN projects which you can build to improve your programming skill and getting that programmer job that you've been dreaming of.
1. Video Confrencing Service
Examples: Zoom, Skype, Microsoft Teams
As pandemic fell upon us, individuals forced to study and work from home. And at these times, we've seen huge growth in remote video conferencing apps such as Zoom, Microsoft Teams and so on because they solve the issue of remote study and conferences. So why not to build them on your own and learn how those technologies work. This project challenges you and makes you be outside your favourite comfort zone.
You create API with GraphQL's Apollo Server or with REST API. Users are authorized using Passport js strategies and they are authorized with JWT tokens. You persist data in MongoDB or Postgres, the choice is yours. U use Redux for managing state of UI and implement real time video communication with WebRTC. You can also write tests which is used in most realistic projects if not at all. You will be forced to do a lof of google search and read documentations which is what you do in day-to-day job once you work for some company. You follow following cycle while building project "try, fail, learn, repeat".
Once you complete building the project, you deploy API to the heroku and UI to netlify. And can share it with the world.
Technologies to use on Front-End and Back-End
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- Apollo-Client/REST API - implement request with GraphQL or with REST
- react motion/spring for animations
- WebRTC - for realtime video communication
- socket.io-client - for real time data
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passportjs
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Apollo-Server/REST API - implement request with GraphQL or with REST API
- socket.io - for real time data
- Optional: Unit Test with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
2. Video Sharing App
Examples: Youtube, Snapchat, TikTok
I'm sure you've been using one or all of the mentioned video sharing apps in the given examples daily. You can build any of the mentioned apps that you like to impress future employers. As they require to use technologies that are used in all complex projects. So building them going to be very challenging but in the end you end up knowing a lot about technologies that day-to-day developer uses. And who knows maybe you built next big app and get rich from it.
You can create API with GraphQL or with REST API and data is persisted in MongoDB or Postgres. Authorization implemented JWT and authorization implemented with Passportjs. And u use Cloudinary API to upload images and videos as you don't want to fill the server huge amount of data. I'd recommend practise writing tests if you know how to write tests else you can build project without test. You implement real-time notifications with socket io library. And you store the data in MongoDB or Postgres.
You can host API on heroku and UI on netlify
Technologies to use on Front-End and Back-End
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- Apollo-Client/REST API
- react motion/spring for animations
- socket.io-client
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authorization with Passportjs
- Authorization with JWT
- Cloudinary API - for uploading images and videos
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Apollo-Server/REST API
- socket.io
- Optional: Unit Test and Integrations tests with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
3. Real Time Chat App
Examples: Slack, Whatsapp, Telegram, Discord
We all use one of the mentioned apps almost if not daily as they facilitate long-term distance and help us talk with our friends, family in real time through long-term distances. You work with socket library to implement this real time feature and and implement authentication and authorization for security of the users. Overall this is great challenging project in which you learn deeply a about technologies you use and improve your programming logic.
You write your APIs with REST or with GraphQL the choice is yours and persist the data in Postgres or in MongoDB. Real time data exchange is implemented in socket.io library. Users are authenticated with Passportjs strategies such as Google, Twitter, Facebook. And users are authorized with JWT tokens. Writing tests in real-world crucial as they help us to prevent nearly all bugs that cost money and time in the long run but if you opt to not write tests, that's also okay. You use emoji-mart for sending emojis in the UI. and you use Redux to manage the state of the whole app in single place
You can deploy both frontend and backend on heroku but it's recommended and easier to separately host them. So host API on heroku and UI on netlify
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- Apollo-Client/REST API
- socket.io-client
- emoji-mart
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passport js
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Apollo-Server/REST API
- socket.io
- Optional: Unit Test and E2E with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
4. E-Commerse App
Examples: Amazon, UberEats, Udemy
Online shopping is become ubiquitous in the modern times. Nearly all websites implement some kind of online store whether it'd be simple one like just selling few products, to selling huge amount of products in different categories like in Amazon, E-Bay and so on. And business for e-commerse is huge. Thus know how to build e-commerse app makes you more employable relative to your competitors and gets you more clients if you are freelancing.
You can write API with GraphQL or with REST API and data is stored in MongoDB or Postgres database and you store images in Cloudinary API' free plan. You create Admin panel for this project and process payments with stripe platform. You use d3.js libary visualizating data on the Admin Panel. Authentication implemented with Passportjs and authentication implemented with JWT. Writing unit, e2e, integration tests are not required but would be plus if you write them.
Upong completion of the project, API is hosted on heroku and UI is hosted on netlify
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- REST API
- D3.js
- stripe with use-shoppring-cart for payments
- socket.io-client
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passportjs
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Cloudinary API - for uploading images
- Apollo-Server/REST API
- stripe
- socket.io
- Optional: Unit Test and E2E with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
5. Social Media App
Examples: Instagram, Twitter, Facebook
Social media applications like Instagram, Facebook, Twitter are no doubt become unseperable part of our lives, we can chat, read latest breaking news, share videos, be-friend with strangers and more thanks to these applications. You can build them by yourself to improve your coding skills.
API is built with GraphQL or with REST API and data is stored in MongoDB or Postgres. Users are required to authenticate with Google or with email and authorization is implemented with JWT. You create animations with react libraries such react spring or motion or animation library of your choice. Images and videos are uploaded to Cloudinary API so you don't bug the server huge dataset
You use heroku to host your Backend code and netlify to host your React code
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- Apollo-Client/REST API
- react spring/motion
- socket.io-client
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passportjs
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Cloudinary API for image and video uploads
- Apollo-Server/REST API
- socket.io
- Optional: Unit Test and E2E with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
6. Blogging App
Examples: Medium, Dev.to, HackerRank
We all read articles on the internet like now you are reading in Dev.io. Creating blogging app is great as you can blogging app and host your own articles on your own app. I recommend building dev.to app but choice is yours.
You create API with GraphQL or with REST API and you store user generated data on MongoDB or Postgres. And you authenticate users with Passportjs strategies such as Google, Facebook or Twitter and users are authenticated with JWT tokens. Animations can be created with react motions or spring but you are free to implement animations on any library or on CSS alone. You can use remark which markdown package to create blogs posts in markdown. You can also optionally write unit, e2e and integration tests.
API is hosted on heroku and UI is hosted on netlify
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- Apollo-Client/REST API
- remark for markdown
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passportjs
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Apollo-Server/REST API
- Optional: Unit Test and E2E with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
7. Music Sharing App
Examples: Spotify, SoundCloud, Pandora
In this project you build any of the mentioned Music sharing and streaming apps in the example. You can also optionally implement storefornt which allow users to buy musics. This is overall fun and challenging project that make you grow.
API is created with GraphQL or with REST API and data of the app is persisted on MongoDB or on Postgres. Authentication is implemented with Passportjs and authentication is implemented with JWT tokens. UI animations are implemented with react spring or react motion or any react animation library of your choice. Images and videos are uploaded to Cloudinary API. If you can write tests, you can use React Test Library for unit testing and Cypress for E2E testing.
API is hosted on heroku and UI is hosted on netlify
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- Apollo-Client/REST API
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passportjs
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Cloudinary API for image and video uploads
- Apollo-Server/REST API
- Optional: Unit Test and E2E with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
8. Online Dating App
Examples: Tinder, Bumble, Match, Grindr
Online dating apps've become mainstream way of meeting your girlfriend/boyfires or potentially husband/wife. You might even be using one of these apps to date with people. As the person that represents programmer, I can build dating apps but I'm having 0% success in this regard :(, hahah no that's joke. So this is going to be very fun and also quite challenging project and will be great addition to your portfolio projects.
You create API with GraphQL or with REST and you store data in MongoDB or Postgres. And authentication are implemented with Passportjs and authorization is implemented with JWT tokens. Animations are implemented with react spring or react motion or react gsap or animation library that you'd like to use. You use socket.io library to create real-time interactions. And if you are comfortable with testing, you can write uinit, e2e and integration tests also.
API is hosted on heroku and UI is hosted on netlify
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- react-motion, react-sprint, react-gsp for animations
- Apollo-Client/REST API
- socket.io-client
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passportjs
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Cloudinary API for image and video uploads
- socket.io
- Apollo-Server/REST API
- Optional: Unit Test and E2E with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
9. Online Accommodation Booking App
Examples: Airbnb, Vrbo, HomeAway, Stayz
Airbnb is the mainstream way to rent places/houses when you are visiting to abroad. So why not build your own Airbnb app and stretch your programming skills. I tell you that this project is going to be very challenging but you also grow a lot from building this project. Once you complete this project and host it on the internet, you can put it in your portfolio which guarantees to get you, your dream job.
API is created with GraphQL or with REST and data is stored in MongoDB or Postgres. Payments are handled with stripe service with use-shoppring-cart. Authentication is handled with Passport js and authorization is implemented with JWT tokens. Animations are implemented with react spring/motion or of your choice. U use D3.js or recharts to visualize data.
You can also write all kinds of test such as: unit, E2E, and integration tests.
You use heroku to host Backend code and netlify to host Frontend code
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- Apollo-Client/REST API
- D3.js, Recharts
- socket.io-client
- stripe with use-shoppring-cart for payments
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passportjs
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Cloudinary API for image and video uploads
- stripe for handling payments
- socket.io
- Apollo-Server/REST API
- Optional: Unit Test and E2E with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
10. Online Library
Examples: Project Gutenberg, Goodreads, The Online Books Page, Open Library
Online libraries become essential for book lovers. As you can be going out for walk, running, or in the car, you can listen, read books on these apps. You can create online library like Project Gutenberg or Goodreads that allow you to listen or read book as you like.
You write API in GraphQL or with REST API and store the data in MongoDB or in Postgres. Authentication implemented in Passportjs and authorization is implemented with JWT tokens. payments handled with stripe. And UI animations are handled with react motions or react spring and you visualize data iwth d3.js or recharts libraries. You can also write tests but it's optional
You use heroku to host Backend code and netlify to host Frontend code
Front-End:
- React/NextJs
- Redux/Redux Toolkits
- Apollo-Client/REST API
- react-motions, react-spring, gsp react
- D3.js, Recharts
- socket.io-client
- stripe with use-shoppring-cart for payments
- Optional: Unit Tests, E2E, Integration Tests with React Testing library, Cypress
Back-End:
- Nodejs
- Authentication with Passportjs
- Authorization with JWT
- MongoDB with Mongoose, Postgres with Prisma or MySQL
- Cloudinary API for image and video uploads
- stripe for handling payments
- socket.io
- Apollo-Server/REST API
- Optional: Unit Test and E2E with Jest
Deploying:
- Front-End on Netlify
- Back-End: on Heroku
Summary
All of these 10 projects are hard enough to challenge developers in any level and for sure make them better developer in the end. Now get out of that tutorial purgatory and choose any one of these projects and build them and share your work. Happy coding :)
