How I Built My First MERN Stack Project as a Competitive Programmer

Rahul guptaRahul gupta
2 min read

Sure! Here's a ready-to-use blog body for your first Hashnode blog post, based on your skills as a MERN stack developer and competitive programmer.

As someone deeply involved in competitive programming, I’ve always loved solving algorithmic problems and writing efficient code. But I wanted to take my skills to the next level — by building something real that people could actually use.

That’s when I decided to dive into MERN stack development and create my first full-stack project.

Why I Chose MERN Stack

MERN stands for:

  • MongoDB: NoSQL database to store data in flexible JSON-like format.

  • Express.js: Lightweight framework to build backend APIs.

  • React.js: Frontend library for building fast, interactive UIs.

  • Node.js: JavaScript runtime for building the server-side logic.

I chose MERN because:

  • It’s JavaScript end-to-end.

  • It’s beginner-friendly but powerful enough to build serious apps.

  • It’s widely used in startups and big companies alike.


Project Overview

For my first MERN project, I built a simple web app where users can:

  • Register/Login (Authentication)

  • Create and view posts

  • Like or delete their own posts

It’s like a mini blogging or note-taking app — a great starter project.


Tech I Used

  • Frontend: React, Tailwind CSS (for styling), Axios

  • Backend: Express.js, Node.js, JWT for authentication

  • Database: MongoDB (with Mongoose ODM)

  • Hosting: Render (backend), Vercel (frontend), MongoDB Atlas (cloud DB)


Challenges I Faced

  • Connecting frontend to backend: Learning to handle CORS, Axios requests, and API structure took some time.

  • Authentication: Implementing secure login using JWTs was tricky but super rewarding.

  • Deployment: Figuring out how to deploy both frontend and backend on different platforms was a new experience.


What I Learned

  • How a full-stack app works end-to-end.

  • REST API design and calling backend from React.

  • Real-world debugging and fixing console errors 😅

  • Importance of writing clean, modular code.


What’s Next?

  • Add file uploads and user profile pictures.

  • Refactor the code using TypeScript.

  • Learn how to use Redux or Zustand for better state management.


Final Thoughts

Switching from solving coding problems to building full-stack projects opened up a whole new dimension for me. It’s incredibly satisfying to bring an idea to life and see it working in a browser.

If you’re a competitive programmer like me and want to get into development, start building — even small projects will teach you a ton.



0
Subscribe to my newsletter

Read articles from Rahul gupta directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Rahul gupta
Rahul gupta