HTTPS SSH

MERN-Stack-Front-To-Back

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

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

<br/> <hr/> <br/>

01 Introduction

<br/>

Host

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

<br/>

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

<br/>

Inside container:

<br/>

$ node -v
v9.11.1

<br/>

$ npm -v
6.0.1

<br/>

Final project packages

<br/>

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

<br/>

$ 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

<br/>

$ 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

<br/>

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"
    },
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 10000,
    "prettier.singleQuote": true
}

<br/>

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

<br/>

Chrome extensions:

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

<br/>

02 Basic Express Setup

<br/>

005 MongoDB Setup With mLab

<br/>

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

<br/>

007 Connecting To MongoDB With Mongoose

<br/>

008 Route Files With Express Router

<br/>

03 User API Routes JWT Authentication

<br/>

009 Creating The User Model

<br/>

010 User Registration Postman

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

$ npm install --save gravatar

<br/>

Application

<br/>

011 Email Password Login

<br/>

Application

<br/>

012 Creating The JWT

<br/>

Application

<br/>

013 Passport JWT Authentication Strategy

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

<br/>

Application

<br/>

014 Validation Handlers - 1

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

<br/>

Application

<br/>

015 Validation Handlers - 2

<br/>

Application

<br/>

Application

<br/>

Application

<br/>

04 Profile API Routes

<br/>

016 Aside - Front End Visual

<br/>

017 Creating The Profile Model

<br/>

018 Current User Profile Route

<br/>

Application

<br/>

019 Create Update Profile Routes

<br/>

020 Profile Field Validations

<br/>

Application

<br/>

Application

<br/>

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

<br/>

Application

<br/>

021 More Profile API Routes

<br/>

Application

<br/>

022 Add Experience Education Routes

<br/>

Application

<br/>

Application

<br/>

023 Delete Education Experience Routes

<br/>

05 Post API Routes

<br/>

024 Creating The Post Model

<br/>

025 Post Create Route

<br/>

Application

<br/>

026 Get Delete Post Routes

<br/>

Application

<br/>

Application

<br/>

Application

<br/>

027 Post Like Unlike Routes

<br/>

Application

<br/>

Application

<br/>

028 Add Remove Comment Routes

<br/>

Application

<br/>

Application

<br/>

06 Getting Started With React The Frontend

<br/>

029 A Look At The Bootstrap Theme UI

<br/>

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

<br/>

Application

<br/>

Application

<br/>

031 Bootstrap Assets Setup

https://fontawesome.com/get-started

<br/>

032 Basic Layout

<br/>

Application

<br/>

07 React Router Component State

<br/>

033 React Router Setup (v4)

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

<br/>

Application

<br/>

034 Creating The Register Form With State

<br/>

Application

<br/>

035 Creating The Login Form With State

<br/>

Application

<br/>

036 Testing Registration With Our Form - No Redux Yet

# cd client/
# npm install --save axios

<br/>

Application

<br/>

037 Error Handling Display

# cd client/
# npm install --save classnames

<br/>

Application

<br/>

08 Redux Authentication

<br/>

038 Why We Need Redux

<br/>

039 Redux Store Chrome Extension Setup

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

<br/>

Application

<br/>

040 Redux Action Reducer Workflow Example

<br/>

041 Registration The Error Reducer

<br/>

042 Redux Login Action Set Current User

# npm install --save jwt-decode

<br/>

043 Login Form Functionality

<br/>

<br/>

09 Dashboard Profile State - Part 1

<br/>

045 TextFieldGroupInput Component

<br/>

046 Profile Reducer Get Current Profile

<br/>

047 Spinner Component Dashboard Start

<br/>

048 Private Route Setup

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

<br/>

049 CreateProfile Component Route

<br/>

Application

<br/>

050 Form Field Components

<br/>

051 Create Profile Form

<br/>

Application

<br/>

052 Create Profile Functionality

<br/>

10 Dashboard Profile State - Part 2

<br/>

053 Profile Actions Component Delete Account

<br/>

Application

<br/>

054 Edit Profile Component

<br/>

Application

<br/>

055 Add Experience Form

<br/>

Application

<br/>

056 Add Experience Functionality

<br/>

057 Add Education Form Functionality

<br/>

Application

<br/>

058 Dashboard Experience Display Delete

<br/>

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

<br/>

Application

<br/>

059 Dashboard Education Display Delete

<br/>

Application

<br/>

11 Profile Display

<br/>

060 Profiles Component getProfiles Action

<br/>

Application

<br/>

061 Profile Items

<br/>

Application

<br/>

062 Profile By Handle Sub Components

<br/>

Application

<br/>

063 Profile Header

<br/>

Application

<br/>

064 Profile About Credentials

<br/>

Application

<br/>

065 Profile Github Touch Ups

<br/>

12 Posts Comments

<br/>

066 Post State addPost Action

<br/>

067 Posts Post Form Component

<br/>

Application

<br/>

068 getPosts Action PostFeed Component

<br/>

069 Post Item Component

<br/>

Application

<br/>

070 Delete Like Unlike Posts

<br/>

Application

<br/>

071 Single Post Display

<br/>

Application

<br/>

072 Comment Form Component Action

<br/>

Application

<br/>

073 Comment Display Delete

<br/>

Application

<br/>

13 Prepare Deploy

<br/>

074 Securing Our Keys

<br/>

075 Heroku Setup

<br/>

076 Post Build Deployment

$ cd client/
$ npm run build

Marley

<a href="https://labs.jsdev.org">labs.jsdev.org</a>