Trang chủ

Web Development

MERN Stack

MERN 2024 Edition - MongoDB, Express, React and NodeJS

MERN 2024 Edition - MongoDB, Express, React and NodeJS

Loại khoá học: Web Development

Build Full Stack Application from Scratch with React Router 6.4+, React Query, Mongoose 7+, Cloudinary, Axios

50.000 VND

1.699.000 VND

Đầy Đủ Bài Giảng

Học Online Tiện Lợi

Kích Hoạt Nhanh 2-5 Phút

Thanh toán tự động

Được phép tải xuống

Mô tả

What's up everybody, this is John from Coding Addict and welcome to my MERN Stack course . During the course we will build full stack application (Jobify) from scratch, using MongoDB, Express, React and Node.js

During the course we will :

Create a React front-end application from scratch (VITE)
Add global styles to React Application
Build bunch of nice looking pages (Landing, Error, Register, Dashboard, etc)
Setup nice looking images
Setup routing using React Router 6.4+
Create server application from scratch
Use ES6 Modules on the back-end
Implement "nodemon" package
Setup MongoDB database in the cloud (Atlas)
Create routes and controllers
Extensively test in Thunder Client
Utilize "express-async-errors" package
Setup error handling in Express
Hash passwords
Setup validation layer with "express-validator"
Implement JWT for authentication and authorization
Connect front-end application with our server
Utilize "concurrently" package
Setup "proxy" in VITE
Programmatically navigate using React Router 6
Compare passwords
Setup nested pages and protected route using React Router 6
Implement logout functionality
Set JWT token in Postman programmatically
Implement various Axios configurations
Setup dayjs the front-end and back-end
Complete CRUD functionality
Setup permissions on the server
Create mock data (Mockaroo) and populate the database.
Setup nice charts and cards
Implement search/filter functionality on the server and front-end
Implement pagination on the server and front-end
Deploy MERN application to Render

Bạn sẽ học được gì

Learn how to build big full stack app from scratch

Learn how to connect Front-End application (React) with Backend application (Express, MongoDB, NodeJS)

Learn how to implement JWT for authentication and authorization

Learn how to implement React Hooks, Async/Await, React Router 6, Axios

Learn how to implement ES6 in Node

Learn how to deploy MERN app on Heroku

Learn best practices of Front-End and Server applications

Yêu cầu

Good Grasp of Javascript
Solid Understanding of ES6
React Basics
Node and Express Basics

Nội dung khoá học

19 sections

Introduction

5 lectures

Course Resources

00:04

Course Requirements

02:02

Free Resources

00:13

Video Blur Fix

01:35

Course Review

00:30

General Setup

9 lectures

VS Code

06:14

VITE - Info

01:23

VITE - Install

02:53

VITE - Folder Structure

06:20

Remove Boilerplate

00:55

Obtain Assets

04:02

Global CSS

03:18

Title and Favicon

02:15

Install All Libraries (Optional)

02:03

React Router

7 lectures

React Router - Info

02:30

React Router - Initial Setup

03:59

Create Pages

07:03

Setup index.js

05:51

Link Component

03:48

Nested Routes

07:36

Error Page

04:41

Landing Page

6 lectures

Styled Components - Intro

05:11

Wrapper

03:35

Landing Page

08:03

Landing Page - CSS (optional)

11:07

Logo Component

03:00

Logo and Images

01:38

Error Page

2 lectures

Error Page - JSX

03:54

Error Page - CSS (optional)

03:08

Register Page

2 lectures

Register Page - Setup

07:47

FormRow Component

07:18

Login Page

2 lectures

Login Page

04:43

Login and Register CSS (optional)

04:23

Dashboard Page

21 lectures

Dashboard Setup

03:39

Dashboard Structure

05:11

Dashboard CSS (optional)

03:19

Dashboard Context

09:14

React Icons

02:22

Navbar Structure

04:45

Navbar CSS (optional)

08:03

Links Data

04:34

Sidebar Structure

05:07

Sidebar Functionality

07:34

Sidebar CSS (optional)

11:27

NavLinks Component

02:50

Big Sidebar

05:32

Big Sidebar CSS (optional)

09:52

Logout Container

07:53

Logout Container CSS (optional)

05:54

Theme Toggle

03:46

Theme Toggle CSS (optional)

01:49

Dark Theme Logic

10:14

Dark Theme Logic - Bug Fix

01:33

Dark Theme CSS (optional)

07:48

Server

60 lectures

Folder Structure

05:43

ES6 Modules

05:27

Install Server Packages

03:25

Express and Nodemon

05:23

Thunder Client

03:24

JSON Middleware

04:50

Morgan and Dotenv

10:39

New Node Features (optional)

07:30

Get All Jobs

09:43

Create Job

07:44

Get Single Job

06:33

Edit Job

04:37

Delete Job

04:15

Not Found and Error Route

04:22

Not Found vs Error Route

04:34

Controller and Router

11:52

MongoDB

00:44

Atlas Account

06:09

Mongoose

01:05

Connect DB

03:12

Job Model

05:47

Create Job Controller

06:59

Async Errors

06:00

Get All Jobs and Get Single Job

05:51

Delete and Update Job

06:43

Status Codes

02:29

Custom Error

12:39

More Custom Errors

01:47

Validation Layer - Intro

03:10

Express Validator - Setup

11:11

Validation Middleware

08:15

Constants

05:01

Validate Job Input

09:54

Validate ID Params

06:43

Validate Job

10:28

User Model

03:24

User Controller and Router

04:54

Create User

02:10

Validate Register User

08:49

Admin User

03:21

Hash Password

06:13

Hash Utils

02:56

Validate Login

03:26

Login Logic

07:03

JWT

07:43

JWT ENV

01:54

Http Only Cookie

08:18

Authenticate User Setup

06:16

Verify Cookie

05:00

Verify JWT

05:55

Add User to Job Routes

04:45

Validate Owner

07:12

Logout Controller

03:25

User Routes

08:27

Get Current User

05:08

Update User

07:16

Get Application Stats

06:47

Proxy Setup

09:16

Concurrently

04:10

Axios

07:05

Register Page

5 lectures

React Router Action Intro

02:12

First Action

07:31

Register User Complete

14:27

Navigation State

03:30

React Toastify

05:40

Dashboard and Login

5 lectures

Login User

07:50

UseActionData Hook

05:47

Loaders

04:27

Get Current User

06:42

Logout

03:00

Jobs Pages

16 lectures

Add Job Structure

07:34

Select Input

08:14

Create Job Functionality

08:42

Add Job CSS (optional)

05:50

All Jobs Structure

06:29

All Jobs Context

02:04

Jobs Container JSX

03:41

Jobs Container CSS (optional)

02:47

Job Component

10:48

Job Component CSS (optional)

11:34

Edit Job - Setup

06:39

Route Params

05:12

Edit Job Loader

02:56

Edit Job JSX

05:16

Edit Job Action

03:02

Delete Job

07:23

Admin Page

3 lectures

Admin Page Setup

06:42

Admin Page Complete

05:30

Admin CSS (optional)

07:27

Profile Page

13 lectures

Avatar Images

01:08

Public Folder

05:13

User Schema Update

02:07

Profile Page Structure

09:46

Profile Action

07:05

Setup Multer

05:57

Cloudinary

04:57

Update User Functionality

12:16

Submit Button Component

06:28

Create Test User

04:53

Restrict Access to Test User

07:20

Mockaroo

04:37

Populate DB

08:53

Stats Page

8 lectures

Stats Route Setup

07:52

Group by Job Status

09:40

Group by Monthly Applications

09:43

Stats Page Setup

06:32

Stats Container

06:40

BarChart Container

03:13

Charts

08:05

Charts Container CSS (optional)

01:36

All Jobs Page

14 lectures

Query Params

05:44

Search Param

06:17

Job Status and Job Type

03:45

Sort

05:40

Pagination

10:59

Search Form Setup

09:08

Loader and Query Params

05:43

Controlled Inputs

09:03

Debounce

07:32

Pagination Setup

07:28

Render Buttons

07:10

Pagination Logic - First Approach

08:31

Pagination Logic - Complex Approach

13:56

Button Container CSS (optional)

07:08

Initial Deploy

3 lectures

Local Build

07:51

Render Intro

00:34

Deploy App

05:29

React Query and Other Extra Features

13 lectures

Build Front-End Programmatically

08:50

Update User - Fix

12:23

Global Loading

04:45

React Query - Install

07:02

Page ErrorElement

07:52

First Query with React Query

11:54

React Query in Stats Loader

09:27

React Query - Current User

04:40

Invalidate Queries

05:29

React Query - All Jobs

09:56

React Query - Edit Job

04:12

Axios Interceptors

06:01

Security Packages

05:48

Bonus

1 lectures

Bonus

00:11

Đánh giá của học viên

Chưa có đánh giá

Course Rating

5

0%

4

0%

3

0%

2

0%

1

0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Email

Nội dung

Khoá học liên quan

Cấu trúc dữ liệu và giải thuật Thực chiến với LeetCode

Cấu trúc dữ liệu và giải thuật Thực chiến với LeetCode

API TESTING MASTERCLASS -2023 using POSTMAN | NEWMAN |JMETER

API TESTING MASTERCLASS -2023 using POSTMAN | NEWMAN |JMETER

Developing a Multithreaded Kernel From Scratch!

Developing a Multithreaded Kernel From Scratch!

Introduction to VHDL for FPGA and ASIC design

Introduction to VHDL for FPGA and ASIC design

Microservices with Node JS and React

Microservices with Node JS and React

Java Design Patterns & SOLID Design Principles

Java Design Patterns & SOLID Design Principles

Django Masterclass : Build 9 Real World Django Projects

Django Masterclass : Build 9 Real World Django Projects

The Complete Guide To Build Rest Api's with Asp.Net and C#

The Complete Guide To Build Rest Api's with Asp.Net and C#

Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete Guide

The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

Thực chiến microservice với Spring Boot và Event Sourcing

Thực chiến microservice với Spring Boot và Event Sourcing

Next JS: The Complete Developer's Guide

Next JS: The Complete Developer's Guide

The Complete Python Developer

The Complete Python Developer

100 Days of Code: The Complete Python Pro Bootcamp

100 Days of Code: The Complete Python Pro Bootcamp

Automate Everything with Python

Automate Everything with Python

NLP - Natural Language Processing with Python

NLP - Natural Language Processing with Python

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi