Build CNN Website Clone from Scratch: MERN Stack

Focused View

Km Habib

14:41:15

18 View

1. Introduction

1. Introduction [Same as Intro].mp4

02:51

2. Setting Up the Development Environment

1. Installation of Node.js.mp4

03:03

2. Setting up MongoDB.mp4

06:42

3. Create React App.mp4

03:20

4. Configuring Tailwind.mp4

05:07

3. Desigining Home Page

1.1 CNN.zip

1. Home Component With Header.mp4

10:34

2.1 CNN.zip

2. Design Header Advertisiment.mp4

06:44

3.1 CNN.zip

3. Designing Nav Bar.mp4

12:20

4. Design Breaking News.mp4

11:02

5.1 CNN.zip

5. Design Second News Column.mp4

13:22

6. Completing First Section.mp4

13:12

7.1 CNN.zip

7. Designing Second Section.mp4

12:39

8.1 CNN.zip

8. Completion of Second Section.mp4

10:20

9.1 CNN.zip

9. Designing Fourth Section.mp4

11:33

10.1 CNN.zip

10. Designing Rest Sections.mp4

17:30

11.1 CNN.zip

11. Design Footer Search Input Field.mp4

07:54

12.1 CNN.zip

12. Design Footer Category Row.mp4

11:51

13.1 CNN.zip

13. Create Article Page.mp4

12:41

14.1 CNN.zip

14. Completion of Designing Article Page.mp4

13:41

4. Auth System

1.1 CNN.zip

1. Designing Register Page.mp4

17:55

2.1 CNN.zip

2. Completion of Designing Register Page.mp4

11:19

3.1 CNN.zip

3. Password Validation.mp4

13:35

4.1 CNN.zip

4. Create Express Server and Initiate Post Request.mp4

09:57

5.1 CNN.zip

5. Create Router and Controller.mp4

08:49

6.1 CNN.zip

6. Connecting to MongoDB Atlas.mp4

06:49

7.1 CNN.zip

7. Creating User Model.mp4

07:45

8.1 CNN.zip

8. Writing Controller to Store Registered data.mp4

20:43

9.1 CNN.zip

9. Validation and Error handling.mp4

17:00

10. Designing Login Page.mp4

08:52

11.1 CNN.zip

11. Creating Login Backend.mp4

15:16

5. Admin Panel

1.1 CNN.zip

1. User Rights Access Via Express Session.mp4

14:06

2.1 CNN.zip

2. Designing Admin Panel Sidebar.mp4

14:04

3.1 CNN.zip

3. Creating Admin Header.mp4

15:07

4.1 CNN.zip

4. Adding Input Field for Creating News Article 1.mp4

16:03

5. Adding Input Field for Creating News Article 2.mp4

14:50

6.1 CNN.zip

6. Adding Text Editor.mp4

10:16

7.1 CNN.zip

7. Previewing Image and Video.mp4

19:17

8.1 CNN.zip

8. Inserting Category and SubCategory Data.mp4

13:59

9.1 CNN.zip

9. Feeding Role Tag and Type Data.mp4

08:43

10.1 CNN.zip

10. Fetch Type Data.mp4

14:45

11.1 CNN.zip

11. Fetch Category and Subcategory Data.mp4

14:53

12.1 CNN.zip

12. Adding Conditional Live Update Input field.mp4

20:39

13.1 CNN.zip

13. Processing news data.mp4

15:14

14. Write controller code to store news Data 1.mp4

16:44

15. Write controller code to store news Data 2.mp4

26:05

16.1 CNN.zip

16. Create News List.mp4

25:53

17.1 CNN.zip

17. Delete News.mp4

07:10

18.1 CNN.zip

18. Update News.mp4

11:08

19. Design Manage Categories.mp4

07:31

20. Display and delete categories.mp4

12:01

21.1 CNN.zip

21. Add Category and SubCategories.mp4

13:22

22.1 CNN.zip

22. Managing Tags.mp4

14:35

23.1 CNN.zip

23. Manage User Roles.mp4

17:44

24.1 CNN.zip

24. Manage User Account.mp4

07:40

25.1 CNN.zip

25. Create Settings 1.mp4

16:11

26. Create Settings 2.mp4

18:57

27.1 CNN.zip

27. Create Support System.mp4

18:01

6. Search

1.1 CNN.zip

1. Enable Search Option.mp4

07:56

2.1 CNN.zip

2. Creating Search system.mp4

17:16

3.1 CNN.zip

3. Create method to get searched news.mp4

07:28

7. News Live BroadCast

1.1 CNN.zip

1. Create component for LIve Update.mp4

16:50

2. Adding Socket io to broadcast news 1.mp4

24:00

3. Adding Socket io to broadcast news 2.mp4

09:32

8. Display Dynamic News Data

1.1 CNN.zip

1. Create Component to fetch news data.mp4

08:24

2. Write controller to fetch data with filter.mp4

08:31

3. Display Data in HomePage.mp4

21:04

4.1 CNN.zip

4. Display Database Data in Article Page.mp4

12:50

5. 5 Display Category Page.mp4

16:24

9. Conclusion

1. Congratulation !.mp4

01:36

Description

Master MERN(MongoDB, Express, React.js, Node.js): Constructing a CNN Website Replica with Full Stack Web Development

What You'll Learn?

How to build a responsive full-stack web app that can serve as a news portal, similar to the CNN website, using the MERN stack
How to create an admin panel to manage your web app’s content and users
How to use Mongoose to work with MongoDB and define schemas and models for your data
How to use Express to create a server and handle requests and responses
How to use React to create a dynamic and interactive front-end with components, hooks, and state management
How to implement features such as categories, subcategories, tags, types, live updates, user roles, and support forms for your news portal
How to use MongoDB GridFS to store and retrieve files
How to use Node js to run JavaScript on the server and use NPM to manage dependencies
How to use Mongoose Paginate to implement pagination for your data
How to use Socket io to enable real-time communication between the server and the client
How to use Express Session to manage user sessions and authentication
How to use Multer to handle file uploads and downloads
How to use Cors to enable cross-origin resource sharing

Who is this for?

This course is for anyone who wants to learn how to build a full-stack web app that can serve as a news portal, similar to the CNN website, using the MERN stack. Whether you are a beginner or an intermediate web developer, you will find this course useful and engaging, as it covers both the fundamentals and the advanced topics of web development with MongoDB, Express, React, and Node js. By the end of this course, you will have a functional web app that can display and manage news content

What You Need to Know?

Familiarity with HTML and CSS

Basic understanding of JavaScript and ES6

Experience with React js is helpful but not required

More details

Description
This course will teach you how to build a full-stack web app that can serve as a news portal, similar to the CNN website, using the MERN stack, which consists of MongoDB, Express, React, and Node.js. You will learn how to use Mongoose to work with MongoDB, Express to create a server and handle requests, React to create a dynamic and interactive front-end, and Node.js to run JavaScript on the server. You will also learn how to implement features such as categories, tags, live updates, user roles, and support forms. By the end of this course, you will have a functional web app that can display and manage news content on various topics, such as politics, business, sports, entertainment, health, etc.
Create a web app that can serve as a news portal, with features such as:
Categories: a way of organizing the news content into broad topics, such as World, U.S., Business, Technology, etc. Categories can help the users to navigate the news portal and find the content they are interested in. Categories can also have subcategories, such as Asia, Europe, Africa, etc. under World, or Markets, Economy, Personal Finance, etc. under Business.
SubCategory: a way of dividing the news content into more specific topics, such as Asia, Europe, Africa, etc. under World, or Markets, Economy, Personal Finance, etc. under Business. SubCategory can help the users to narrow down their search and find the content they are looking for. SubCategory can also be used to create different sections and menus for the news portal.
Type: a way of categorizing the news content by its format, such as Breaking, General, Live Update, Video, Photo etc. Type can help the users to choose the preferred way of consuming the news content. Type can also be used to display different icons and layouts for the news content.
Tags: a way of labeling the news content with specific keywords, such as Coronavirus, Election, Olympics, etc. Tags can help the users to filter and search the news content by their interests. Tags can also be used to create related articles and suggestions for the users.
Live updates: a way of providing the latest and breaking news to the users in real-time. Live updates can be displayed as banners, tickers, or pop-ups on the news portal. Live updates can also have different types, such as Breaking News, Live Blog, Live Video, etc.
User roles: a way of defining the permissions and access levels for different types of users on the news portal. User roles can include Admin, Editor, Reporter, Subscriber, Guest, etc. User roles can determine what actions the users can perform on the news portal, such as creating, editing, deleting, viewing, commenting, liking, sharing, etc. the news content.
Support forms: a way of collecting feedback, queries, complaints, and suggestions from the users on the news portal. Support forms can help the users to contact the news portalâ€™s team and get assistance or information. Support forms can also help the news portalâ€™s team to improve their service and quality.
Who this course is for:
This course is for anyone who wants to learn how to build a full-stack web app that can serve as a news portal, similar to the CNN website, using the MERN stack. Whether you are a beginner or an intermediate web developer, you will find this course useful and engaging, as it covers both the fundamentals and the advanced topics of web development with MongoDB, Express, React, and Node js. By the end of this course, you will have a functional web app that can display and manage news content

User Reviews

Rating

average 0

Total votes0

Focused display

React

Node.Js

MongoDB

Km Habib

Instructor's Courses

Hi, My name is Km Habib. I have been teaching programming over 6 years in my private training institution. Since education should not be bound by any limit, I decided to spread quality education for all. It's always pleasure to see trainee get skilled after completing quality course and improve their life by applying these skill in their workplace. From the experience of providing quality education I've created few course on udemy. I hope you will able to improve your life by getting the course. Wish you good luck.

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.