MERN Blog Application

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.