Blogspace

A full-stack blogging platform: write rich posts with a block-based editor, save drafts, publish with tags, and discuss through likes, comments and nested replies with real-time notifications.

Live demo: https://blogging-mern-webapp.netlify.app. Use Try the demo account on the sign-in page, or sign up.

Features

• Rich-text editor (Editor.js): headings, lists, quotes, code, embeds and images
• Drafts, publishing with tags, and a dashboard to manage published posts and drafts with read/like/comment stats
• Home feed with pagination, trending posts and tag filters; search across posts and users
• Likes, comments and nested replies, with a notifications inbox (likes, comments, replies)
• Profiles with bio and social links; email/password and Google sign-in (Firebase)

Tech stack

Layer	Tech
Frontend	React 18, React Router, Tailwind CSS, shadcn/ui (Radix), lucide icons, Vite
Backend	Node.js, Express, Mongoose, JWT, bcrypt
Data & media	MongoDB Atlas; images uploaded straight to AWS S3 via signed URLs
Hosting	One Netlify site: static frontend + the Express API as a Netlify Function at /api/*

Security

• Only a post's author can edit, publish or delete it; drafts are only served to their author
• Likes are toggled server-side (counts can't be inflated); search input is escaped
• Upload URLs require login; profile images must come from the app's own bucket
• JWTs expire after 7 days; emails are only returned to their owner
• No secrets in the repo: credentials live in Netlify environment variables, and Google sign-in is verified with the public Firebase project id (no service-account key)

Performance

• Writer-only pages (editor, dashboard, settings) and Firebase are lazy-loaded, so readers download about half the JavaScript
• SVG icons instead of an icon font pack (CSS went from 595 KB to 33 KB)

Running locally

npm --prefix server install && npm --prefix client install
# server/.env: DB_LOCATION, SECRECT_ACCESS_KEY, AWS_ACCESS_KEY, AWS_SECRET_ACCESS_KEY
node server/server.js          # API on :3000
npm --prefix client run dev    # app on :5173 (proxies /api to :3000)

Project structure

client/                 React app (Vite)
server/app.js           Express API
server/Schema/          Mongoose models: User, Blog, Comment, Notification
server/functions/api.js Express wrapped as a Netlify Function
netlify.toml            Build, functions and redirects