In this comprehensive, step-by-step tutorial, you will learn how to build and deploy a complete MERN stack blog application ("Bitblog") from scratch.
This isn't just a simple demo; it's a full-featured platform with a modern front-end, a secure back-end, and a complete admin dashboard to manage all your content, users, and comments. This is the perfect portfolio project to impress employers!
By the end of this video, you will have built:
✅ A beautiful, responsive blog homepage using React and ShadCN
✅ Secure user authentication (Sign up & Login) with JWT
✅ A powerful admin dashboard to manage posts, users, and comments
✅ A rich text editor (like Medium) using Tiptap
✅ Image uploads handled by Multer and stored in Cloudinary
✅ A secure and efficient REST API with Node.js and Express
✅ User profile management and settings
💻 Front-End Tech Stack:
– React (with TypeScript)
– React Router
– ShadCN (for modern UI components)
– Framer Motion (for animations)
– Tiptap (for the advanced text editor)
⚙️ Back-End Tech Stack:
– Node.js & Express.js.
– MongoDB (with Mongoose)
– JWT (JSON Web Token) for authentication
– Bcrypt (for password hashing)
– Multer & Cloudinary (for file uploads)
– Winston & Logtail (for logging)
– Helmet, CORS, compression, express-validator & more for security
🔗 ESSENTIAL LINKS:
Blog api docs page: https://docs.blog-api.codewithsadee.com/
Frontend Assets: https://drive.google.com/file/d/1zAjiFs7HSpm41RCSzEDQmBPHrjJ5tEHU/view?usp=sharing
Source code (Frontend): https://www.patreon.com/posts/source-code-blog-140001975?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Source code (Frontend) Buymeacoffee: https://buymeacoffee.com/codewithsadee/e/462834
Source code (Backend) FREE: https://www.patreon.com/posts/rest-api-source-130599482?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Github Gist: https://gist.github.com/codewithsadee/e60ef18142d09b2f8ca5ae991452a3bb
Hostinger Special Link for Hosting: http://hostinger.com/in/codewithsadee
TIMESTAMPS:
00:00 Intro
04:13 Backend: Demo
22:44 Backend: Project initial
50:00 Backend: Root route
53:06 Backend: Handle server shutdown
54:51 Backend: Setup MongoDB
1:05:59 Backend: Setup winston for logging
1:16:47 Backend: Register
2:04:40 Backend: Login
2:30:44 Backend: Logout
2:46:30 Backend: Get current user
3:00:42 Backend: Update current user
3:14:21 Backend: Delete current user
3:21:11 Backend: Get all user
3:32:08 Backend: Get user by id
3:36:23 Backend: Delete user by id
3:39:48 Backend: Create a blog
4:26:31 Backend: Get all blogs
4:35:08 Backend: Get blogs by user
4:39:31 Backend: Get blog by slugs
4:46:23 Backend: Update blog
4:58:48 Backend: Delete a blog
5:11:49 Backend: Like a blog
5:25:32 Backend: Unlike a blog
5:30:58 Backend: Create a comment
5:42:43 Backend: Get comments by blog
5:47:03 Backend: Delete a comment
5:55:50 Backend: Setup Hostinger for API hosting
6:11:15 Backend: Domain configuration
6:12:11 Backend: Setup Nginx
6:17:20 Backend: SSL certificate
6:21:07 Backend: Setup BetterStack for API monitoring
6:24:41 Backend: Setup Logtail for API logging
6:34:47 Backend: Setup GitBook for API documentation
6:48:49 Frontend: Demo
6:56:18 Frontend: Initial Setup
7:02:19 Frontend: Login
7:21:37 Frontend: Signup
7:40:47 Frontend: Root layout
7:41:48 Frontend: Loading
7:44:37 Frontend: Header
8:05:25 Frontend: User settings
8:29:09 Frontend: Footer
8:33:13 Frontend: Home
8:58:55 Frontend: All blogs
9:02:24 Frontend: Blog detail
9:16:18 Frontend: Admin layout
9:43:21 Frontend: Dashboard (blog create, edit, delete) & user management
11:45:15 Frontend: Deployment
Like, share, and subscribe for more full-stack tutorials!
Top comments (0)