Skip to content

zalabhavy/BLOG_WEBSITE

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 

Repository files navigation

📝 BlogByMe - Blog Web Application

BlogByMe is a full-stack blogging platform built with the MERN stack. It allows users to create, read, and explore blogs with robust security features like JWT authentication, OTP verification, and secure MongoDB Atlas integration.


🔗 Live Demo

👉 Visit BlogByMe


🚀 Features

  • ✍️ Create and manage blogs
  • 🗂️ Add and assign blog categories
  • 🔍 Filter blog posts by category or keywords
  • 📰 Read the latest news on a dedicated news page
  • 🔐 Secure login and registration with JWT token
  • 🔁 OTP verification for new user registration
  • 🛡️ Protected routes and middleware-based access control
  • ☁️ MongoDB Atlas cloud database with enhanced security settings
  • 📦 Backend deployed using Render
  • 🌐 Frontend deployed using Vercel
  • 📱 Fully responsive design (Mobile + Desktop)
  • 📊 Optimized performance (Google PageSpeed scores shown below)

📸 Screenshots

Below are screenshots of various pages of the BlogByMe app

🔐 Login Page

Login Page

📝 Register Page

Register Page

➕ Add Blog Page

Add Blog Page

📰 Latest News Page

Latest News Page

🔍 Blog Home Page

Blog Home Page

🧾 PageSpeed Insights - Mobile

PageSpeed Mobile

🖥️ PageSpeed Insights - Desktop

PageSpeed Desktop

⚙️ Tech Stack

  • Frontend: React.js, Bootstrap CSS
  • Backend: Node.js, Express.js
  • Database: MongoDB Atlas (Cloud)
  • Authentication: JWT, OTP (via Email)
  • Deployment:

🔐 Security Features

  • JWT token-based session management
  • OTP verification during registration
  • Middleware to protect private routes
  • MongoDB Atlas secured with IP whitelisting and credentials

🧪 Performance Insights

✅ Excellent performance tested via Google PageSpeed Insights:

  • 📱 Mobile:

    • Performance: 96
    • Accessibility: 93
    • Best Practices: 100
    • SEO: 91
  • 🖥️ Desktop:

    • Performance: 100
    • Accessibility: 88
    • Best Practices: 100
    • SEO: 91

See screenshots above for full Lighthouse audit results.


📌 Getting Started (Local Development)

# Clone the repository
git clone https://github.com/your-username/BLOG_WEBSITE.git
cd BLOG_WEBSITE

# Install dependencies for backend
cd server
npm install
nodemon index.js

# Install dependencies for frontend
cd ../client
npm install
npm start

About

A dynamic MERN stack blog platform with features to create and manage blogs, categorize content, filter posts, and discover the latest news. Includes secure user authentication using JWT and OTP verification to ensure data privacy and access control.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors