Build A Travel Blog App With React And Chakra Ui Mern [2023]
Published 2/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English
| Size: 4.32 GB[/center]
| Duration: 9h 46m
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
Requirements
A computer with an internet connection and an interest in building web application
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 somewhereWhat 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.
Overview
Section 1: Introduction
Lecture 1 Introduction
Section 2: Environment Setup
Lecture 2 Overview
Lecture 3 Node & NPM
Lecture 4 GIT
Lecture 5 Visual Studio Code
Lecture 6 Visual Studio Code Extensions
Lecture 7 Prettier Extension Settings
Section 3: Project Setup
Lecture 8 Create React App
Lecture 9 Starting Our App & Explanation
Lecture 10 Removing Files We Don't Need
Lecture 11 Setting up GIT
Section 4: Chakra, Routing & Navbar Setup
Lecture 12 Overview
Lecture 13 How To Help Yourself
Lecture 14 Installing Project Dependencies
Lecture 15 Chakra Provider and Navbar Initiation
Lecture 16 Navbar Part 1
Lecture 17 Navbar Part 2
Lecture 18 Navbar Part 3
Lecture 19 Navbar Part 4 + React Routing
Lecture 20 Navbar Part 5
Lecture 21 Navbar Part 6
Lecture 22 Navbar Part 7 & Our First GIT Commit
Section 5: Setting Up Our Backend, Redux, & Blog Screen
Lecture 23 Overview
Lecture 0 Setting Up Backend Structure
Lecture 24 Setting Up Mongo DB Database
Lecture 25 MongoDB Compass
Lecture 26 Blog Post Schema
Lecture 27 Get Blog Post Route Part 1
Lecture 28 Get Blog Post Route Part 2
Lecture 29 Importing Data To Our Database
Lecture 30 Redux Setup And Blog Post Slices
Lecture 31 Blog Post Actions
Lecture 32 Redux Store Provider
Lecture 33 Blog Screen Part 1
Lecture 34 Blog Screen Part 2 & Concurrently
Lecture 35 Set Up Blog Screen Route
Lecture 36 Blog Screen Part 3
Lecture 0 Adding .env File To Gitignore
Lecture 37 Debugging Blog Post Route
Lecture 0 Pushing Our Work To The Remote Repository
Section 6: Pagination
Lecture 38 Overview
Lecture 39 Pagination & Categories in Blog Post Route
Lecture 40 Postman & Testing our Route
Lecture 41 Blog Post Slice Pagination
Lecture 42 Blog Post Actions Pagination
Lecture 43 Pagination in Blog Screen
Lecture 44 Redux & React Devtools
Lecture 45 Save Your Work To The Remote Repository
Section 7: Single Blog Screen
Lecture 46 Overview
Lecture 47 Get Blog Post Route
Lecture 48 Blog Post Actions
Lecture 49 Single Blog Post Screen Part 1
Lecture 50 Debugging Blog Route
Lecture 51 Single Blog Post Screen Part 2
Lecture 52 Save Our Work To The Remote Repository
Section 8: Contact Screen
Lecture 53 Overview
Lecture 54 EmailJS
Lecture 55 EmailJS Credentials
Lecture 56 Contact Screen Part 1
Lecture 57 Contact Screen Part 2
Lecture 58 Contact Screen Part 3
Lecture 59 Contact Screen Part 4
Lecture 60 Contact Screen Part 5
Lecture 61 Save Our Work To The Remote Repository
Lecture 62 Adding Name To The EmailJS Template
Section 9: Login, Admin Console, & Creating A New Blog Post
Lecture 63 Overview
Lecture 64 User Schema
Lecture 65 User Route
Lecture 66 Adding User Data To The Database
Lecture 67 Login Test In Postman
Lecture 68 User Slice In Redux
Lecture 69 User Actions In Redux
Lecture 70 Login Screen Part 1
Lecture 71 Login Screen Part 2
Lecture 72 Login Screen Part 3
Lecture 73 Login Screen Part 4
Lecture 74 Login Screen Part 5
Lecture 75 Admin Console Part 1
Lecture 76 Admin Console Part 2
Lecture 77 Admin Console Part 3
Lecture 78 Admin Console Part 4
Lecture 79 Admin Console Part 5
Lecture 80 Admin Console Part 6
Lecture 81 Admin Console Part 7
Lecture 82 Admin Console Part 8
Lecture 83 Admin Console Part 9
Lecture 84 Admin Console Part 10
Lecture 85 Save Your Work To The Remote Repository
Section 10: Edit Blog Post
Lecture 86 Overview
Lecture 87 Handling Server Errors
Lecture 88 Edit Blog Post Tab Part 1
Lecture 89 Edit Blog Post Tab Part 2
Lecture 90 Post Edit Part 1
Lecture 91 Post Edit Part 2
Lecture 92 Post Edit Part 3
Lecture 93 Post Edit Part 4
Lecture 94 Accordion Icon
Lecture 95 Testing Remove Post Work Flow
Lecture 96 Debug Remove Post
Lecture 97 Save Your Work To The Remote Repository
Section 11: Home Screen & Last Refinements
Lecture 98 Overview
Lecture 99 Home Screen
Lecture 100 Browser Tab Information
Lecture 101 About Screen
Lecture 102 Save Your Work To The Remote Repository
Section 12: Deployment Via Render
Lecture 103 Deployment Settings
Lecture 104 Push Your Settings
Lecture 105 Render Deploy
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
