Build a Travel Blog App with React and Chakra UI MERN [2023]

Focused View

Benjamin Fischer

9:46:08

109 View

1. Introduction

1. Introduction.mp4

01:04

2. Environment Setup

1. Overview.mp4

01:04

2. Node & NPM.mp4

03:39

3. GIT.mp4

02:17

4. Visual Studio Code.mp4

01:04

5. Visual Studio Code Extensions.mp4

01:04

6. Prettier Extension Settings.mp4

02:28

3. Project Setup

1. Create React App.mp4

02:15

2. Starting Our App & Explanation.mp4

08:14

3. Removing Files We Dont Need.mp4

03:39

4. Setting up GIT.mp4

09:14

4. Chakra, Routing & Navbar Setup

1. Overview.mp4

01:27

2. How To Help Yourself.mp4

02:13

3. Installing Project Dependencies.mp4

02:22

4. Chakra Provider and Navbar Initiation.mp4

04:31

5. Navbar Part 1.mp4

06:32

6. Navbar Part 2.mp4

12:29

7. Navbar Part 3.mp4

05:39

8. Navbar Part 4 + React Routing.mp4

08:14

9. Navbar Part 5.mp4

05:51

10. Navbar Part 6.mp4

08:14

11. Navbar Part 7 & Our First GIT Commit.mp4

04:31

5. Setting Up Our Backend, Redux, & Blog Screen

1. Overview.mp4

01:38

2. Setting Up Backend Structure.mp4

13:12

3. Setting Up Mongo DB Database.mp4

05:40

4. MongoDB Compass.mp4

02:53

5. Blog Post Schema.mp4

03:18

6. Get Blog Post Route Part 1.mp4

04:21

7. Get Blog Post Route Part 2.mp4

03:24

8.1 blogposts.zip

8. Importing Data To Our Database.mp4

02:17

9. Redux Setup And Blog Post Slices.mp4

12:51

10. Blog Post Actions.mp4

05:25

11. Redux Store Provider.mp4

02:01

12. Blog Screen Part 1.mp4

09:07

13. Blog Screen Part 2 & Concurrently.mp4

07:49

14. Set Up Blog Screen Route.mp4

02:54

15. Blog Screen Part 3.mp4

09:23

16. Adding .env File To Gitignore.mp4

01:37

17. Debugging Blog Post Route.mp4

03:41

18. Pushing Our Work To The Remote Repository.mp4

01:15

6. Pagination

1. Overview.mp4

01:15

2. Pagination & Categories in Blog Post Route.mp4

08:56

3. Postman & Testing our Route.mp4

06:41

4. Blog Post Slice Pagination.mp4

05:57

5. Blog Post Actions Pagination.mp4

04:00

6. Pagination in Blog Screen.mp4

06:35

7. Redux & React Devtools.mp4

04:04

8. Save Your Work To The Remote Repository.mp4

01:26

7. Single Blog Screen

1. Overview.mp4

00:51

2. Get Blog Post Route.mp4

02:43

3. Blog Post Actions.mp4

03:24

4. Single Blog Post Screen Part 1.mp4

04:20

5. Debugging Blog Route.mp4

06:01

6. Single Blog Post Screen Part 2.mp4

11:10

7. Save Our Work To The Remote Repository.mp4

00:25

8. Contact Screen

1. Overview.mp4

01:33

2. EmailJS.mp4

05:18

3. EmailJS Credentials.mp4

03:42

4. Contact Screen Part 1.mp4

05:08

5.1 regex.zip

5. Contact Screen Part 2.mp4

13:27

6. Contact Screen Part 3.mp4

11:31

7. Contact Screen Part 4.mp4

01:47

8. Contact Screen Part 5.mp4

01:47

9. Save Our Work To The Remote Repository.mp4

00:44

10. Adding Name To The EmailJS Template.mp4

00:43

9. Login, Admin Console, & Creating A New Blog Post

1. Overview.mp4

02:43

2. User Schema.mp4

06:04

3. User Route.mp4

07:17

4.1 users.zip

4. Adding User Data To The Database.mp4

04:16

5. Login Test In Postman.mp4

03:40

6. User Slice In Redux.mp4

06:38

7. User Actions In Redux.mp4

04:43

8. Login Screen Part 1.mp4

13:32

9. Login Screen Part 2.mp4

20:21

10. Login Screen Part 3.mp4

02:09

11. Login Screen Part 4.mp4

03:48

12. Login Screen Part 5.mp4

26:29

13. Admin Console Part 1.mp4

08:52

14. Admin Console Part 2.mp4

07:02

15. Admin Console Part 3.mp4

10:52

16. Admin Console Part 4.mp4

07:40

17. Admin Console Part 5.mp4

07:00

18. Admin Console Part 6.mp4

05:36

19. Admin Console Part 7.mp4

12:15

20. Admin Console Part 8.mp4

05:30

21. Admin Console Part 9.mp4

03:54

22. Admin Console Part 10.mp4

05:25

23. Save Your Work To The Remote Repository.mp4

02:07

10. Edit Blog Post

1. Overview.mp4

00:56

2. Handling Server Errors.mp4

05:15

3. Edit Blog Post Tab Part 1.mp4

10:24

4. Edit Blog Post Tab Part 2.mp4

04:11

5. Post Edit Part 1.mp4

07:09

6. Post Edit Part 2.mp4

04:47

7. Post Edit Part 3.mp4

11:31

8. Post Edit Part 4.mp4

07:12

9. Accordion Icon.mp4

00:41

10. Testing Remove Post Work Flow.mp4

02:24

11. Debug Remove Post.mp4

02:19

12. Save Your Work To The Remote Repository.mp4

00:45

11. Home Screen & Last Refinements

1. Overview.mp4

00:50

2.1 landing.zip

2. Home Screen.mp4

16:06

3.1 world.zip

3. Browser Tab Information.mp4

02:45

4. About Screen.mp4

03:33

5. Save Your Work To The Remote Repository.mp4

01:07

12. Deployment Via Render

1. Deployment Settings.mp4

07:38

2. Push Your Settings.mp4

00:40

3. Render Deploy.mp4

13:43

Description

Build and deploy a travel blog web app from scratch with React, Redux, Express, NodeJs, MongoDB [MERN Stack + Chakra UI]

What You'll Learn?

Programming in JavaScript using React JS
Modern Redux with React JS
Creating a travel blog web application for an audience
React hooks
Password hashing
Redux Js Toolkit
Website administration
Storing images
Learn building applications with Chakra UI as a component library
Formik & Yup for easy form validation
React Routing
User Login
MongoDB setup
Object Data Mapping
REST API's

Who is this for?

Everybody who wants to learn modern web development, software engineering or simply wants to create their own travel blog web application to share their journeys with the rest of the world

Beginner in JavaScript, React or Programming

Looking for a modern Full Stack solution which is easy to learn

More details

Description
Hello and welcome to my course. This is a beginnerâ€™s course for building modern web applications. This is the right course for you if you are:
- Interested in web development
- Studying IT
- Interested in programming in general
- Upskilling your existing knowledge of React
- Interested how full-stack applications are build
- Solid understanding of programming and want to start with React/JavaScript
- Interested in Chakra UI.
- You are new to the world of IT and you want to start somewhere
What will you learn?
- React and React hooks
- Functional components
- State management with ReduxJs Toolkit
- Using a component library such as Chakra UI
- Styling and designing webpages
- Responsive design
- User registration and authentication (login)
- Writing an API and storing data to a database.
- Using MongoDB
- Using NodeJS
- Using Express
- Version control using Git with Github
- And many moreâ€¦
This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.
On this course we will build an travel blog web application called TravelBay, completely from scratch using the most popular JavaScript library called React in combination with Redux, Chakra UI, NodeJs, Express, MongoDB and many more. All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application.
Who this course is for:
Everybody who wants to learn modern web development, software engineering or simply wants to create their own travel blog web application to share their journeys with the rest of the world
Beginner in JavaScript, React or Programming
Looking for a modern Full Stack solution which is easy to learn

User Reviews

Rating

average 0

Total votes0

Focused display

Benjamin Fischer is a professional software engineer based in New Zealand with German roots. He has a passion for creating things that live on the internet. His Bachelor of information & communication technologies combined with years of experience and a talent for explaining things are a solid background for creating his courses. Benjamin loves cooking, travelling, rock & metal music and his family.

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.