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
