The MERN Stack Blogify Project: Web Development [2023]

Focused View

i novotek Academy,Jacky Aron

17:23:54

58 View

1. LIVE DEMO

1. Project Live Demo.mp4

10:16

2. Project Features.mp4

02:01

3. Live Link Preview.html

2. HOW TO TAKE THIS COURSE & RESOURCES IMPORTANT !!

1.1 Templates.zip

1. How to take this course.html

3. GETTING STARTED BACKEND

1. Setting Up The Environment.mp4

03:35

2. VSCODE Customisation.mp4

02:26

3. Folder Structure.mp4

02:45

4. MVC Explained.mp4

04:15

5. Create Express Server.mp4

07:13

6. Final Source Codes.html

4. DATA MODELLING-BACKEND

1. Data Structure.mp4

03:14

2. Creating Github Branch for data modelling.mp4

02:09

3. User Data Modelling.mp4

03:14

4. Post Data Modelling.mp4

07:07

5. Category And Comment Modelling.mp4

03:22

5. AUTHENTICATION & AUTHORISATION-BACKEND

1. Authentication & Authorisation Overview.mp4

02:56

2. How JSON WEB TOKEN (JWT) Works.mp4

06:02

3. Exploring More About JWT.mp4

04:26

4. Dummy User Registration Controller.mp4

06:55

5. Installing Postman.mp4

04:20

6. Connect to MongoDB Database.mp4

03:53

7. Create MongoDB Connection String.mp4

05:14

8. Installing Nodemon and VSCODE MongoDB Extension.mp4

03:11

9. User Registration.mp4

09:34

10. Hash User Password.mp4

05:17

11. Login User.mp4

08:44

12. Generate Token.mp4

06:48

13. Dummy Profile Controller.mp4

05:16

14. Is Login Middleware Logic Implementation.mp4

05:46

15. Get Token From Request Header.mp4

05:01

16. Verify Token.mp4

03:24

17. Save User into Request Object.mp4

08:31

18. Get User Profile Controller Improved.mp4

05:40

6. ERROR HANDLING-BACKEND

1. Global Error Handler Middleware.mp4

08:12

2. Catch Async Errors.mp4

03:45

3. Refactored Error Handlers.mp4

02:36

7. POST CATEGORIES API-BACKEND

1. Create Category and Modified isLogin Middleware.mp4

09:31

2. Fetch All Categories.mp4

02:26

3. Delete and Update Category.mp4

05:33

8. POSTMAN CONFIGURATIONS-BACKEND

1. Environment In Postman.mp4

05:10

2. Environment Variables in NodeJS(dotenv).mp4

08:45

9. POST AND COMMENT CONTROLLER-BACKEND

1. Create Post Controller.mp4

13:27

2. Delete, Update Fetch Single And All Post Controllers.mp4

06:17

3. Create Comment Controller and Populate Post Comments.mp4

11:03

4. Update And Delete Comment.mp4

04:57

10. BLOCKING AND UNBLOCKING, FOLLOWING UNFOLLOWING CONTROLLERS-BACKEND

1. Blocking User Controller.mp4

10:39

2. User Blocking Router and Fixed User Blocking Bug.mp4

04:54

3. Unblocking User Controller.mp4

08:34

4. Who view My Profile Controller.mp4

13:40

5. User Following Logic.mp4

02:54

6. User Following Controller.mp4

07:29

7. Fixed Following Controller.mp4

09:14

8. Unfollow User Controller.mp4

06:01

11. FORGOT AND PASSWORD RESET-BACKEND

1. Password Reset Logic.mp4

03:48

2. Email Sending Using Nodemailer utility Function.mp4

09:24

3. App Passowrd for Gmail Account.mp4

05:29

4. Forgot Password Controller.mp4

10:39

5. Trying Forgot Password Controller.mp4

03:12

6. Forgot Password.mp4

09:53

7. Password Reset Controller.mp4

07:05

12. ACCOUNT VERIFICATION BACKEND

1. Account Verification Logic.mp4

03:51

2. Account Verification Controller.mp4

07:21

3. Account Verification Route.mp4

03:36

4. Account Verification.mp4

08:49

5. Is Account Verified Middleware.mp4

07:29

13. POST LIKES AND DISLIKES CONTROLLERS BACKEND

1. Post Like Controller.mp4

08:14

2. Post Like Route.mp4

02:07

3. Disliking a Post Controller.mp4

04:13

14. POST CLAPS AND SCHEDULING CONTROLLERS BACKEND

1. Post Claps controller.mp4

04:19

2. Schedule Post Controller.mp4

07:52

3. Schedule Post Route.mp4

07:52

15. HIDING AND SHOWING POSTS

1. Hiding Scheduled and Hide Posts if Login User is Blocked Logic.mp4

05:54

2. Hiding Posts From Blocked Users Controller.mp4

07:56

3. Hide Scheduled Posts Controller.mp4

05:25

4. Populating MongoDB IDs.mp4

05:25

5. Fixed Profile Controller.mp4

00:35

16. FILE UPLOAD CONTROLLER BACKEND

1. File Upload Middleware.mp4

10:08

2. Create Post With Image.mp4

06:22

3. Profile Image Upload.mp4

04:51

17. USER AUTHENTICATION & AUTHORISATION FRONTEND

1. Create React Application.mp4

02:30

2. Install Tailwindcss.mp4

04:36

3. Configure React Router DOM.mp4

03:51

4. Rendering HomePage Component.mp4

05:30

5. Render Login Form.mp4

02:46

6. Install Redux Toolkit and Create Login Action.mp4

10:03

7. User Login Action Slice and Reducer.mp4

08:34

8. Configure Redux Store and Install DevTool Extension.mp4

03:43

9. Dispatch Login Action.mp4

05:34

10. Fixed Cors Error.mp4

03:09

11. Save Login User Into LocalStorage.mp4

05:33

12. Error-Success-Loading Components.mp4

05:55

13. Display Loading, Error, and Success Message Upon Login.mp4

08:45

14. Redirect User After Login And Display User Profile Component.mp4

06:31

15. Display Public Navbar.mp4

05:23

16. Display Private Navbar.mp4

01:48

17. Conditionally Display Navbar.mp4

02:47

18. Logout User.mp4

05:14

19. Protected Component.mp4

05:45

20. Modified User Registration API.mp4

02:08

21. Register User.mp4

09:20

22. Display Loading Error Upon Registration.mp4

03:53

23. Global Action Logic.mp4

03:08

24. Avoiding The Annoying Popups.mp4

05:26

18. WORKING ON POST FRONTEND

1. Fetch Public Posts Action.mp4

07:49

2. Fetch Public Posts.mp4

08:09

3. Display Post Categories in React Select Component.mp4

09:16

4. Fetch All Categories.mp4

07:28

5. Handle Image Form Input.mp4

03:50

6. Dispatch Action To Create Post.mp4

10:34

7. Display Error, Loading, and Success when creating Post.mp4

05:04

8. Client Side Post Validation.mp4

12:59

9. Private Navbar Profile Link and Post Details Component.mp4

04:22

10. Post Details Action.mp4

09:38

11. Post Statistics.mp4

07:01

12. Post Days Ago and Reading Time.mp4

05:58

13. Displaying Private Posts.mp4

05:24

14. Prevent User From Deleting Any Post-Backend.mp4

06:00

15. Prevent User From Deleting Any Post-Frontend.mp4

03:47

16. Post Deleting Frontend.mp4

09:01

17. Change Logo And Avoid Success Popups for post.mp4

05:44

18. Post Details Page Improved.mp4

04:15

19. Private Posts Improved.mp4

04:10

20. Render Post Update Form.mp4

04:50

21. Update Post Endpoint To Support Image Update.mp4

06:20

22. Avoid Popups when Creating Post.mp4

01:48

23. Update Post Frontend.mp4

07:42

24. Liking of a Post.mp4

09:52

25. Disliking Post.mp4

03:01

26. Display Post Clapping Icon and Modified Post API.mp4

03:32

27. Avoid Reloading when a post is Liked or Disliked.mp4

02:27

28. Post Clapping.mp4

03:06

29. Post Views Controller-Backend.mp4

04:14

30. Post Views Count Frontend.mp4

06:02

19. POST COMMENTS FRONTEND

1. Rendering Comment Form.mp4

02:48

2. Comment Action.mp4

05:26

3. Dispatch Comment Action.mp4

02:48

4. Display Comment Lists.mp4

05:42

5. Reload After comment is Created.mp4

03:52

20. USER PROFILE FRONTEND

1. Public Profile Controller.mp4

04:25

2. Render User Profile Component and Modified Post Views Controller.mp4

07:54

3. Modified Public Profile Controller.mp4

02:21

4. User Public Profile Action.mp4

06:09

5. Display User Public Profile Data.mp4

06:09

6. Display Users Posts.mp4

07:46

21. USER BLOCKING & UNBLOCKING FRONTEND

1. User Blocking Another User Action.mp4

07:09

2. User UnBlocking Another User.mp4

02:46

3. Conditionally showing block and unblock user button Logic.mp4

03:12

4. User Private Profile.mp4

05:46

5. Conditionally showing block and unblock user button.mp4

07:12

6. Trying Blocking and Unblocking User Logic.mp4

02:14

22. FOLLOWING & UNFOLLOWING

1. Following and Unfollowing User.mp4

10:42

2. Private User Profile Details.mp4

06:22

3. Display User followers and Posts.mp4

07:32

23. PROFILE & COVER IMAGE UPLOAD FRONTEND

1. Profile and Cover Image Upload Controller - Backend.mp4

08:40

2. Profile and Cover Image Upload Actions.mp4

04:16

3. Upload User Profile Image.mp4

07:00

4. Upload User Cover Image.mp4

08:21

5. Fixed Profile Picture on the Navbar.mp4

03:50

24. USER ACCOUNT VERIFICATION FRONTEND

1. Check if user account is verified.mp4

04:48

2. Show warning If User Account is Not Verified.mp4

05:18

3. Dispatch Account Verification Action.mp4

07:25

4. Avoid Automatically Logging Out And Display Success when email is sent.mp4

03:43

5. Account Verification Logic.mp4

03:14

6. Rendering Account Verification Component.mp4

01:44

7. Dispatch Account Verification Action.mp4

11:17

25. PASSWORD RESET & FORGOT PASSWORD FRONTEND

1. Password Reset Action.mp4

06:22

2. Dispatch Password Reset Action.mp4

05:27

3. Password Reset Error And Success Message.mp4

06:19

4. Render Password Reset Form.mp4

04:22

5. Dispatch Action To Reset Password.mp4

05:54

6. Password Reset Loading, Error & Success.mp4

02:26

26. USER PROFILE UPDATE FRONTEND

1. Update User Profile API-Backend.mp4

04:31

2. Render Update User Profile Component.mp4

05:13

3. Dispatch Action To Update User Profile.mp4

04:40

4. Display Profile Update Loading, Error & Success.mp4

01:47

27. PAGINATION, FILTERING AND SEARCHING OF POST FRONTEND

1. Filter Post By Category.mp4

04:40

2. Search Post by Title - Backend.mp4

03:16

3. Post Pagination Backend.mp4

09:50

4. Post Pagination Frontend.mp4

08:19

5. Searching Functionality Frontend.mp4

04:25

6. Filtering Post By Category.mp4

08:14

7. Render Schedule Post Component.mp4

05:34

8. Dispatch Action To Schedule Post.mp4

09:58

28. FURTHER RESOURCES

1. Further resources.html

29. WHAT NEXT

1. Whats next.html

Description

Harnessing MongoDB, Express.js, React.js, and Node.js for Powerful Web Applications

What You'll Learn?

User Authentication: Learn how to implement secure user registration and login processes using strategies like password hashing and JSON Web Tokens.
File Upload: Understand how to allow users to upload files like profile pictures or post attachments securely and efficiently.
User Relationships: Learn to implement social features such as following and unfollowing other users
User Blocking: Implement a blocking and unblocking system, allowing users to manage who can interact with them or see their content.
Post Scheduling: Gain knowledge on how to implement post scheduling, enabling users to create content that will be automatically published at a specified future
User Profile: Learn to create a user profile system where users can view and manage their personal information, posts, and social interactions.
Password Reset: Understand the process of securely implementing password reset functionality, allowing users to recover their accounts when they forget
Forgot Password: Implement a secure system to recover forgotten passwords, which involves sending recovery emails to users' registered email addresses.
Account Verification: Learn how to implement a user verification system using technologies like email verification to ensure that users have valid email address
Profile Update: Enable users to update their profile information such as username, email, profile picture, and password.
Hide Posts from Blocked Users: Learn how to modify your application's visibility rules to hide a user's posts from those they have blocked.
Hide Scheduled Posts: Understand how to effectively hide scheduled posts from your application's feed until their scheduled publishing time arrives.
Pagination: Gain a practical understanding of how to implement pagination in a web application. Learn how to break down your data into manageable pieces
Filtering: Understand the essential techniques of implementing data filtering.
Searching: Master the process of integrating a robust search functionality into your web application.

Who is this for?

Frontend and Backend Developers: Developers who are familiar with either the frontend or backend and wish to expand their skillset to become full-stack developers will benefit greatly from this course

Current MERN Stack Developers: Developers already familiar with MERN but looking to expand their practical experience through a comprehensive project should consider this course.

Web Development Students: This course is an excellent fit for students pursuing a degree or certification in web development or a related field, offering hands-on experience with building a real-world application.

Career Switchers: Individuals considering a career transition into tech, specifically web development, will find the step-by-step, comprehensive nature of this course an excellent entry point.

Entrepreneurs and Business Owners: Those who wish to build their own blogging platform or understand the mechanics behind such a system for their business may also find this course beneficial.

Coding Bootcamp Students or Graduates: Perfect for reinforcing and applying the skills learned in intensive programs, this course provides a practical and in-depth project experience.

Aspiring Full-Stack Developers: If you're interested in learning full-stack development, particularly using MongoDB, Expressjs, Reactjs, and Node.s (MERN), you'll find this course incredibly useful.

What You Need to Know?

Familiarity with Reactjs: Students should have a good understanding of Reactjs and its core principles such as components, state, props, lifecycle methods, and hooks.

Understanding of Redux: A solid grasp of state management using Redux, including actions, reducers, and the Redux store, is necessary as this course will build upon these concepts.

Familiarity with Nodejs: You should be comfortable with Nodejs, asynchronous programming, and understand concepts such as callbacks, promises, and async/await.

Familiarity with Expressjs: Experience with Expressjs is a must, including routing, middleware, handling requests and responses.

Familiarity with MongoDB: Familiarity with MongoDB, including how to structure data, perform CRUD operations, and use the MongoDB driver or Mongoose, is necessary.

Basic Understanding of RESTful APIs: Knowledge of creating and interacting with RESTful APIs will be beneficial as we'll be building and consuming APIs throughout the course.

Comfortable with JavaScript and ES6 Features: As MERN Stack is based on JavaScript, having a strong grasp of JavaScript, including ES6 features like arrow functions, destructuring, spread operator, and template literals, is critical.

More details

Description
Course Title: The MERN Stack Blogify Project: Full Web Development Unleashed
Embark on a journey to become a proficient full-stack developer with our comprehensive MERN Blogify Project Course. This course leverages the power of MongoDB, Express.js, React.js, and Node.js (MERN) to guide you in creating a fully-featured blogging platform from scratch.

Throughout this immersive learning experience, you'll gain hands-on expertise in developing and integrating essential web application features using cutting-edge technologies. These include user authentication, file uploading, social features such as following and unfollowing users, a user blocking system, and post scheduling capabilities.

You'll learn how to build robust user profiles, complete with the ability to update profile information and manage user-to-user relationships. Dive deep into user experience considerations and data security as you implement password reset and account verification functionalities.

In line with the ever-evolving digital world, the course also covers more nuanced features like hiding posts from blocked users and concealing scheduled posts until the predetermined publishing time arrives.

This course not only equips you with the necessary coding skills but also trains you in best practices for development, teaching you to write efficient, maintainable code. You'll learn to troubleshoot and debug your application effectively, handle errors, and understand the intricacies of deploying a MERN stack application to the cloud.

By the end of this course, you will have built a fully-functional, real-world blogging platform and be armed with the skills to create and deploy your own web applications using the MERN stack. Whether you're an aspiring web developer or looking to enhance your full-stack skills, this course is designed to propel you toward your career goals.

Join us in the MERN Blogify Project Course and harness the power of full-stack development to bring your innovative ideas to life!
Who this course is for:
Frontend and Backend Developers: Developers who are familiar with either the frontend or backend and wish to expand their skillset to become full-stack developers will benefit greatly from this course
Current MERN Stack Developers: Developers already familiar with MERN but looking to expand their practical experience through a comprehensive project should consider this course.
Web Development Students: This course is an excellent fit for students pursuing a degree or certification in web development or a related field, offering hands-on experience with building a real-world application.
Career Switchers: Individuals considering a career transition into tech, specifically web development, will find the step-by-step, comprehensive nature of this course an excellent entry point.
Entrepreneurs and Business Owners: Those who wish to build their own blogging platform or understand the mechanics behind such a system for their business may also find this course beneficial.
Coding Bootcamp Students or Graduates: Perfect for reinforcing and applying the skills learned in intensive programs, this course provides a practical and in-depth project experience.
Aspiring Full-Stack Developers: If you're interested in learning full-stack development, particularly using MongoDB, Expressjs, Reactjs, and Node.s (MERN), you'll find this course incredibly useful.

User Reviews

Rating

average 0

Total votes0

Focused display

React

Node.Js

MongoDB

MERN Stack

i novotek Academy

Instructor's Courses

I-Novotek Academy is a web development bootcamp that helps students learn the latest technologies and become proficient in web development. We provide an intensive, 5-month program in which students learn how to design, build, and maintain websites and web applications using technologies including HTML, CSS, JavaScript, ReactJS, Node.js, and more. Our experienced instructors guide students through each step of the process so they can learn quickly and be productive from day one.

Jacky Aron

Instructor's Courses

As a web developer and a teacher, I find immense joy in the art of coding. The challenge of solving problems, building functional websites, and sharing my knowledge with eager learners keeps me excited every day. While my roots are firmly planted in the USA, I currently reside in the beautiful UK, providing a cross-cultural perspective to my teaching and coding experiences. Living in two different worlds has offered me unique insights into the dynamic field of web development, which I aim to share with my students. This blend of experiences helps me bridge the gap between different coding practices and teaching methodologies. So, whether you're a complete beginner or a seasoned coder looking for a fresh perspective, I'm here to guide you on your coding journey. Let's have some fun with coding together!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.