Responsive React Blog App Tutorial | MERN Stack CRUD Project Complete Tutorial For Beginners
Responsive React JS Blog Application/Website Tutorial from scratch!
Hostinger Discount:
In this Tutorial video, I'll teach you how to create a fully complete blog website using React. You'll learn the newest featured in React Router 6, and many tips and tricks when it comes to building React Applications.
2024 Responsive React Portfolio Website Tutorial:
The complete project features JWT Authentication, Full CRUD functionalities with the posts, responsive design, Context API, Custom Hooks, React Router 6, API requests with axios, Custom API from Scratch, Data storage in MongoDB, File system, and more!
This is the 1st part of the 3 part series. Links to the 2nd and 3rd video should be below (if you're watching this a two weeks after this upload).
We'll implement JWT Authentication secure and seamless user access.
Real-world CRUD Operations: Create, read, update, and delete posts/articles that persist to MongoDB.
Users will be able to update their Profile Image, Upload Images when creating posts, update post images/thumbnail, delete images, and manage posts seamlessly.
Become a Patron:
Full Project SOURCE CODE:
Part 2 (Node Express API):
Assets:
Timestamps
00:00 Intro (Project Demo)
13:34 Hosting & FREE Domain
17:22 Project Folder Structure
23:44 Routing (with React Router 6)
39:12 General CSS Styles
53:00 Navbar CSS
59:00 Footer
01:04:00 Error Page
01:07:15 Home/Posts
01:25:53 Post Detail/Single Post Page
01:37:50 Author & Category Posts
01:42:23 Register & Login Page
01:56:18 Authors Page
02:03:49 Profile Page
02:18:00 Dashboard (My Posts) Page
02:26:55 Create & Edit Post Pages
02:38:05 Media Queries (Responsive Design)
