Penster Frontend
A modern, fully responsive, and feature-rich Blog Website built using the MERN stack (MongoDB, Express.js, React.js, Node.js) with Tailwind CSS for styling. This platform allows users to read, write, edit, like, comment, bookmark, and share blog posts. It supports dark/light mode, and user authentication using JWT and Google OAuth.
📝 MERN Blog Website
A modern, fully responsive, and feature-rich Blog Website built using the MERN stack (MongoDB, Express.js, React.js, Node.js) with Tailwind CSS for styling. This platform allows users to read, write, edit, like, comment, bookmark, and share blog posts. It supports dark/light mode, and user authentication using JWT and Google OAuth.
🚀 Features Overview
✅ Authentication & User Management
- Email/Password registration with email verification
- Google OAuth integration
- Forgot password via email reset
- Profile management with avatar upload
- User following/follower system
📝 Blog Post Management
- Create, edit, delete blog posts with rich Markdown editor
- Upload cover images via Cloudinary or Link
- Save drafts and publish later
- Add categories and tags
🌐 Social Features
- Like/unlike blog posts
- Comment, edit, and delete comments
- Bookmark blogs for later reading
- Follow/unfollow authors
- View user profiles and authored blogs
🔍 Search & Discovery
- Real-time blog search (title, category, author)
- Filter by category and sort by:
- Latest
- Most liked
- Most commented
- Infinite scroll for blog listing
🎨 UI/UX Features
- Dark/Light theme toggle (with localStorage support)
- Fully responsive design
- Toast notifications for actions
- Animations and loading states
- Image upload preview & drag-and-drop upload
🧩 Tech Stack
🔹 Frontend
- React.js with TypeScript
- Vite for lightning-fast builds
- Tailwind CSS for utility-first styling
- React Router DOM for routing
- Axios for API requests
- Context API or Redux Toolkit for global state
🔹 Backend
- Node.js with Express.js
- MongoDB with Mongoose ORM
- TypeScript support for type safety
- Passport.js for authentication
- Multer for file uploads
- Cloudinary for image storage
🔐 Authentication System
- JWT-based token authentication
- Email verification system via Nodemailer
- Forgot password and password reset
- Google OAuth 2.0 login
- Protected API routes and sessions
☁️ Image & File Handling
- Secure image upload with Multer
- Optimized storage and delivery using Cloudinary
- File type & size validation
📁 Codebase Architecture
- Component-based folder structure
- Controller-based backend architecture
- Custom React hooks for reusable logic
- Middlewares for auth, error handling, file uploads
- Context providers for theme, auth, global state
⚙️ Performance & Optimization
- Lazy loading components & routes
- Infinite scroll for better UX
- Debounced search input
- Image optimization strategies
- Indexed MongoDB queries
- Caching where applicable
📬 Email System
- Integrated with Nodemailer
- HTML email templates for:
- Email verification
- Password reset
- SMTP or third-party email service ready
🌍 Future Improvements (Optional Ideas)
- Add Notifications for new followers/comments
- Add Analytics Dashboard for blog views and user activity
- Offline Mode with Service Workers
- Real-time Chat or Commenting System using WebSockets
📸 Screenshots (Add screenshots here)
🙌 Acknowledgements
Made with ❤️ using the MERN Stack
