Back to projects

MERN Blog Application

A feature-rich blogging platform built with the MERN stack, offering secure authentication, rich text editing, and a responsive design.

ReactViteTailwind CSSFlowbiteFramer MotionNode.jsExpress.jsMongoDBMongoosePassport.jsJWTBcryptReact QuillNodemailerAxios
Source Code

# MERN Blog Application


A modern, full-stack blogging platform designed to provide a seamless writing and reading experience through a responsive user interface and a secure backend.


Project Overview


This application serves as a comprehensive content management system for bloggers. It separates concerns between a high-performance React frontend and a scalable Node.js/Express backend. The platform supports user authentication via social providers and local strategies, ensuring a secure environment for creating and managing blog posts.


Technologies Used


  • Frontend: React, Vite, Tailwind CSS, Flowbite, Framer Motion
  • Backend: Node.js, Express.js
  • Database: MongoDB (Mongoose)
  • Authentication: Passport.js (Google OAuth), JWT, Bcrypt
  • Tools: React Quill, Nodemailer, Axios

    • Key Features


    1. **Advanced Authentication**: Secure user login via Google OAuth 2.0 and standard email/password registration with JWT sessions.

    2. **Rich Text Editor**: Integrated WYSIWYG editing using React Quill and Draft.js for formatting blog posts.

    3. **Responsive Design**: A mobile-first UI built with Tailwind CSS and Flowbite components.

    4. **Email Integration**: Automated email notifications and verification handling using Nodemailer and Mailtrap.


    Project Details


    The architecture follows a classic client-server model. The client, built with Vite for speed, consumes a RESTful API provided by the Express server.


    ### Challenges


  • OAuth Integration: implementing secure social login flows using Passport.js and handling callback redirects correctly.
  • Content Rendering: Safely storing and rendering rich HTML content generated by the text editors without exposing the site to XSS vulnerabilities.
  • State Management: Coordinating authentication state across the application to protect private routes.

    • ### Solutions


  • Modular Backend: Structured the Express application with separate routes for authentication and content, using middleware for session management.
  • Component Libraries: Leveraged Flowbite and Chakra UI to rapidly build accessible and consistent interface elements.
  • Secure Storage: Implemented proper password hashing with Bcrypt and secure cookie management for authentication tokens.

    • Conclusion


    This Blog Application demonstrates proficiency in full-stack JavaScript development, combining modern frontend tooling with robust backend security practices to create a functional and user-friendly platform.