[Brad Traversy] MERN Stack Front To Back: Full Stack React, Redux & Node.js [2018, ENG]

Original src:
https://github.com/bradtraversy/devconnector

Brad made a new version of this course in 2019

Original src v2:
https://github.com/bradtraversy/devconnector_2.0

My src v2:
https://github.com/marley-nodejs/MERN-Stack-Front-To-Back-v2.0

01 Introduction

Host

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 14.04.5 LTS
Release:	14.04
Codename:	trusty

$ docker -v
Docker version 18.03.0-ce, build 0520e24

Inside container:

$ node -v
v9.11.1

$ npm -v
6.0.1

Final project packages

$ npm list -g --depth=0
/usr/local/lib
+-- create-react-app@1.5.2
`-- npm@6.0.1

$ npm list --depth=0
project@1.0.0 /project
+-- bcryptjs@2.4.3
+-- body-parser@1.18.3
+-- concurrently@3.5.1
+-- express@4.16.3
+-- gravatar@1.6.0
+-- jsonwebtoken@8.2.1
+-- mongoose@5.1.1
+-- nodemon@1.17.4
+-- passport@0.4.0
+-- passport-jwt@4.0.0
`-- validator@10.2.0

$ npm list --depth=0
client@0.1.0 /project/client
+-- axios@0.18.0
+-- classnames@2.2.5
+-- jwt-decode@2.2.0
+-- moment@2.22.1
+-- react@16.3.2
+-- react-dom@16.3.2
+-- react-moment@0.7.0
+-- react-redux@5.0.7
+-- react-router-dom@4.2.2
+-- react-scripts@1.1.4
+-- redux@4.0.0
`-- redux-thunk@2.2.0

Visual Studio Code Settings:

{
    "editor.fontSize": 26,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "terminal.integrated.fontSize": 26,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "javascript": "html"
    },
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 10000,
    "prettier.singleQuote": true
}

Visual Studio Code Plugins:

ES7 React/Redux/React-Native/JS snippets
Bracket Pair Colorizer
Prettier formatter for Visual Studio Code
Live Server
Node.js Modules Intellisense

Chrome extensions:

React Developer Tools
Redux Developer Tools
Allow-Control-Allow-Origin

02 Basic Express Setup

005 MongoDB Setup With mLab

006 Install Dependencies Basic Server Setup

$ cd /project/
$ npm init -y

$ npm install --save express mongoose passport passport-jwt jsonwebtoken body-parser bcryptjs validator

$ npm install --save-dev nodemon

$ npm run server

007 Connecting To MongoDB With Mongoose

008 Route Files With Express Router

03 User API Routes JWT Authentication

009 Creating The User Model

010 User Registration Postman

https://github.com/emerleite/node-gravatar

$ npm install --save gravatar

011 Email Password Login

012 Creating The JWT

013 Passport JWT Authentication Strategy

https://github.com/themikenicholson/passport-jwt

014 Validation Handlers - 1

https://github.com/chriso/validator.js/

015 Validation Handlers - 2

04 Profile API Routes

016 Aside - Front End Visual

017 Creating The Profile Model

018 Current User Profile Route

019 Create Update Profile Routes

020 Profile Field Validations

with
.populate("user", ["name", "avatar"])

021 More Profile API Routes

022 Add Experience Education Routes

023 Delete Education Experience Routes

05 Post API Routes

024 Creating The Post Model

025 Post Create Route

026 Get Delete Post Routes

027 Post Like Unlike Routes

028 Add Remove Comment Routes

06 Getting Started With React The Frontend

029 A Look At The Bootstrap Theme UI

030 Implementing React

# npm install -g create-react-app
# su - nodejs

$ cd /project/
$ create-react-app client

$ npm install --save-dev concurrently

$ npm run dev

031 Bootstrap Assets Setup

https://fontawesome.com/get-started

032 Basic Layout

07 React Router Component State

033 React Router Setup (v4)

# cd client/
# npm install --save react-router-dom

034 Creating The Register Form With State

035 Creating The Login Form With State

036 Testing Registration With Our Form - No Redux Yet

# cd client/
# npm install --save axios

037 Error Handling Display

# cd client/
# npm install --save classnames

08 Redux Authentication

038 Why We Need Redux

039 Redux Store Chrome Extension Setup

# cd client/
# npm install --save redux react-redux redux-thunk

040 Redux Action Reducer Workflow Example

041 Registration The Error Reducer

042 Redux Login Action Set Current User

# npm install --save jwt-decode

043 Login Form Functionality

044 Logout Conditional Navbar Links

09 Dashboard Profile State - Part 1

045 TextFieldGroupInput Component

046 Profile Reducer Get Current Profile

047 Spinner Component Dashboard Start

048 Private Route Setup

https://tylermcginnis.com/react-router-protected-routes-authentication/

049 CreateProfile Component Route

050 Form Field Components

051 Create Profile Form

052 Create Profile Functionality

10 Dashboard Profile State - Part 2

053 Profile Actions Component Delete Account

054 Edit Profile Component

055 Add Experience Form

056 Add Experience Functionality

057 Add Education Form Functionality

058 Dashboard Experience Display Delete

# cd client/
# npm install --save moment react-moment

059 Dashboard Education Display Delete

11 Profile Display

060 Profiles Component getProfiles Action

061 Profile Items

062 Profile By Handle Sub Components

063 Profile Header

064 Profile About Credentials

065 Profile Github Touch Ups

12 Posts Comments

066 Post State addPost Action

067 Posts Post Form Component

068 getPosts Action PostFeed Component

069 Post Item Component

070 Delete Like Unlike Posts

071 Single Post Display

072 Comment Form Component Action

073 Comment Display Delete

13 Prepare Deploy

074 Securing Our Keys

075 Heroku Setup

076 Post Build Deployment

$ cd client/
$ npm run build

# npm install -g serve
$ serve -s build -l 8080

Marley

Any questions in english: Telegram Chat
Любые вопросы на русском: Телеграм чат

Files

README.md

Latest commit

History