How I Built My First Full Stack Project: A Blog Website Using MERN

Building my first full-stack project using the MERN (MongoDB, Express.js, React, and Node.js) stack was an exciting journey. I wanted to create a blog website where users could write, edit, and share their thoughts. In this blog post, I'll describe how I built it, the challenges I faced, and the lessons I learned.

Why I Chose the MERN Stack

The MERN stack is widely used for building modern web applications. Here’s why I chose it:

• MongoDB: A NoSQL database that stores data in a flexible JSON-like format.
• Express.js: A minimal and powerful backend framework for Node.js.
• React.js: A fast and efficient frontend library for building interactive UI.
• Node.js: A runtime environment that allows JavaScript to run on the server.

Features of the Blog Website

• User authentication (Sign-up, Login, Logout)
• Create, read, update, and delete (CRUD) blog posts
• Image upload for blog posts
• Commenting system
• Responsive UI with React

Tech Stack & Tools Used

• Frontend: React.js, React Router, Axios, Tailwind CSS
• Backend: Node.js, Express.js, bcrypt.js (for password hashing), JWT (for authentication), Multer (for image uploads)
• Database: MongoDB (Atlas)
• Deployment: Vercel (Frontend), Render (Backend & Database)

Step-by-Step Development Process

1. Setting Up the Backend (Express & MongoDB)

I started by setting up the server using Express.js and connecting it to MongoDB Atlas.

• Installed dependencies:

  npm init -y
  npm install express mongoose cors dotenv bcryptjs jsonwebtoken multer

• Created an index.js file and set up the basic Express server.
• Connected MongoDB using Mongoose and created models for users and blog posts.
• Implemented authentication using JWT and bcrypt.js for password encryption.

2. Building the Frontend (React.js)

Once the backend was ready, I moved to the frontend using React.js.

• Installed dependencies:

  npx create-react-app blog-client
  cd blog-client
  npm install axios react-router-dom

• Created routes for:
  • Homepage (showing all blogs)
  • Single blog post page
  • Create/Edit/Delete blog post pages
  • Authentication (Login & Register)
• Used Axios to interact with the backend API.
• Used Tailwind CSS for styling and responsiveness.

3. Adding Image Upload Feature

I used Multer on the backend for blog post images to handle file uploads.

• Set up Multer to store images in a folder and return the image path.
• Allowed users to upload images when creating blog posts.
• Displayed images dynamically on the frontend.

4. Implementing Authentication

• Used JWT tokens for authentication.
• Created a middleware to protect certain API routes.
• Stored JWT tokens in local storage to maintain user sessions.
• Redirected users dynamically based on their authentication status.

5. Deployment

• Deployed the backend on Render and frontend on Vercel.
• Configured CORS for secure API calls.
• Connected the frontend and backend with the correct API URLs.

Challenges I Faced

1. CORS Issues: I had to configure CORS properly to allow frontend-backend communication.
2. JWT Token Expiry: Initially, tokens were not expiring properly, leading to authentication issues.
3. Database Connectivity Errors: Faced some issues with MongoDB Atlas connections, which I solved by ensuring proper connection string usage.

Lessons Learned

• Understanding authentication flow (JWT, password hashing, protected routes) was crucial.
• Breaking down the project into smaller tasks helped in better implementation.
• Debugging errors using console logs and Postman made API testing easier.
• Deployment issues taught me the importance of environment variables and CORS settings.

Conclusion

Building this blog website using the MERN stack was a great learning experience. It gave me hands-on experience with full-stack development, authentication, and deployment. If you’re looking to build your first full-stack project, I highly recommend starting with something simple like a blog website.

If you have any questions or need guidance, feel free to connect with me!