Build A Travel Blog App With React And Chakra Ui Mern [2023]

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