Mern Invoice Web App With Docker,Nginx And Reduxtoolkit

Build a functional MERN Project with Docker,React and ReduxToolkit,NGINX,Express and more…..

What you'll learn

Modern Redux with ReduxToolkit and ReduxToolkit Query

Running multiple Docker containers using Docker Compose

Load balancing and reverse proxying using NGINX within a Docker Container

Token based authentication with reuse detection and refresh token rotation

Social Authentication with Google

Custom Logging in NodeJS with Morgan and Winston

Email sending with Mailhog for development and Mailgun for production

How to setup and use Cloudinary for Image upload

How to serve a MERN web app securely using HTTPS and SSL

Ubuntu server config for production

How to setup and use Portainer to manage containers in a production environment

How to setup and user NGINX proxy manager within a production environment

Requirements

This course is NOT for beginners. You must have at least 1 year of RELEVANT javascript experience preferably on the MERN Stack

Node js with Express Basics

Docker and containerization basics

React JS Basics

Redux basic concepts such as actions, reducers,store etc

React UI frameworks and how they work. Specifically It would be great if you have some basics of Material UI, since this is what we shall use.

ReduxToolkit basics. It's now official that the recommended way to build redux applications is through the use of Redux toolkit. Have some basic knowledge on this.

Git and Github.

NGINX basics and how servers work.

HTTP vis-a-vie HTTPS and SSL Certificates.

You should also have a computer running either MacOS or linux(preferably). If you are on windows, where possible I shall provide windows workarounds, but I have not fully tested this on windows.

Please ensure that your machine is powerful enough to run docker, as we shall be using docker both in development and in production.

Description

Hi, welcome to this course on building a functional fullstack MERN app, that can be used for generating invoices, quotations and receipts.We shall build this app, step by step, by leveraging tools and technologies such as Docker, NGINX, NGINX Proxy manager, Makefiles,Portainer, shell scripts, MongoDB, Express, ReduxToolkit and Redux Toolkit query, also called RTK-Query.You will also learn how to serve your application on a custom domain name, and serve it securely over HTTPS with SSL Certificates from letsencrypt.This course is NOT for absolute beginners. It is aimed at those with at least 1 year of relevant Fullstack Javascript experience. Having prior exposure to the MERN Stack will be advantageous.This app was built by one person(myself), so of course, none of us is perfect. You might discover bugs here and there , or see ways of improving the codebase. Kindly, if you are able to fix any bugs you come across,or see ways of improving the codebase, please raise a PR on the repo.I will review and merge in the changes for the benefit of all the other learners of this course.Who am I? I am Alpha Ogilo, a self-taught full-stack software developer, currently working as a Senior Software Engineering Manager.My Hope is that you shall gain immense value from this.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Lecture 2: Course Requirements

Lecture 3 Lecture 3: What you are getting yourself into - Demo

Lecture 4 Lecture 4: Project Resources Links

Section 2: Project Setup

Lecture 5 Create Working Directory and setup Github

Lecture 6 Project Initialization

Section 3: Very Brief Intro to Insomnia

Lecture 7 Intro to Insomnia

Section 4: Configure Nodejs with Docker

Lecture 8 Dockerfile Config

Lecture 9 Docker Compose Config

Lecture 10 Building Backend Docker Containers

Section 5: Makefiles

Lecture 11 How to setup and use Makefiles

Section 6: Logging in NodeJS

Lecture 12 Introduction to Logging

Lecture 13 Logging Setup

Section 7: Setup ReduxToolkit

Lecture 14 Introduction

Lecture 15 Theory of NGINX as a reverse proxy/load Balancer(Don't skip please)

Lecture 16 NGINX Backend config

Lecture 17 Add client and NGINX to docker compose

Section 8: Mongoose Models

Lecture 18 Mongoose Config

Lecture 19 Mongo Sanitize

Lecture 20 User Model

Lecture 21 Verification Token Model

Section 9: Helpers, Middleware,Utilities

Lecture 22 Helpers

Lecture 23 Middleware

Lecture 24 Email Utilities

Section 10: Token Based Authentication

Lecture 25 What is the difference between access and refresh tokens?

Lecture 26 Register and Verify User Emails

Lecture 27 Login User, get Access and Refresh Tokens

Lecture 28 Refresh Token Controller

Lecture 29 Resend Email Verification Tokens

Lecture 30 Reset User Password

Lecture 31 Logout User

Section 11: User Profile Controllers

Lecture 32 Get User Profile Controller

Lecture 33 Update User Profile

Lecture 34 Delete My User Account

Lecture 35 Get All Users - Admin Only

Lecture 36 Delete User Account

Lecture 37 Deactivate User Account

Section 12: Setup HomePage and Basic Components

Lecture 38 Install packages, Setup React Router Dom

Lecture 39 Common Components Part 1

Lecture 40 Common Components Part 2

Lecture 41 Setup HomePage and custom theme

Section 13: Register and Verify User

Lecture 42 Create Auth and Register API Slice

Lecture 43 Password Strength Indicator

Lecture 44 Register Form Part 1

Lecture 45 Register Form Part 2

Lecture 46 Register Form Part 3

Lecture 47 AuthWrapper

Lecture 48 Register Page

Lecture 49 Verification Page

Section 14: Login & Logout User

Lecture 50 Login AuthSlice and Service

Lecture 51 Login Form

Lecture 52 Login Page

Lecture 53 LogoutUser API Slice

Lecture 54 Auth Nav

Lecture 55 Profile Info

Lecture 56 Logo

Lecture 57 MenuList

Section 15: Resend Email Verification and Password Reset

Lecture 58 Resend Email Verification Link

Lecture 59 Password Reset Service

Lecture 60 Password Reset Pages

Section 16: Protected Routes

Lecture 61 Auth Required

Lecture 62 Dummy Dashboard and Users List Page

Lecture 63 Re-Authentication with Refresh Token

Lecture 64 UsersList Page

Section 17: Google Authentication

Lecture 65 Passport Install and Configuration

Lecture 66 Register App on Google

Lecture 67 Google Controllers/Routes

Lecture 68 useAuthUser Hook

Section 18: Customer and Document Model

Lecture 69 Customer & Document Model

Lecture 70 Create & Update Customer Controllers

Lecture 71 Delete & Get All Customers Controllers

Lecture 72 Create & Update Documents

Lecture 73 Get & Delete Document controller

Section 19: Cloudinary for Image upload

Lecture 74 Install and setup Multer

Lecture 75 Cloudinary Config

Section 20: User Profile Frontend

Lecture 76 User Profile API Slice

Lecture 77 Profile Page

Lecture 78 Edit Profile Page Form

Lecture 79 UsersList Page

Section 21: Customers Frontend

Lecture 80 CRUD CustomersApiSlice

Lecture 81 Customers Page

Lecture 82 Customer Create Form

Lecture 83 Customer Edit Form

Lecture 84 Single Customer Page

Section 22: Generate PDF(Backend)

Lecture 85 Custom PhantomJS Image

Lecture 86 Create Email Template

Lecture 87 Create PDF Template

Lecture 88 Generate pdf controller

Lecture 89 Create Payment controller

Section 23: Documents (Frontend)

Lecture 90 Documents Api Slice

Lecture 91 Documents Components

Lecture 92 Global Documents Components

Lecture 93 Documents Page

Lecture 94 Document Create Edit Form Part 1

Lecture 95 Document Create Edit Form Part 2

Lecture 96 Document Create Edit Form Part 3

Lecture 97 Payment Form

Lecture 98 Single Doc Page Part 1

Lecture 99 Single Doc Page Part 2

Section 24: Dashboard

Lecture 100 Payment History

Lecture 101 Dashboard Page

Section 25: Deployment

Lecture 102 Intro to IaaS,PaaS and Dbaas

Lecture 103 Digital Ocean Droplet

Lecture 104 Mailgun Config

Lecture 105 Client Production Config

Lecture 106 MongoDB Atlas Config

Lecture 107 Server Config

Lecture 108 NGINX Proxy Manager Setup

Lecture 109 Portainer Setup

Lecture 110 Project Setup

Lecture 111 Bash Deployment

This course is NOT for absolute beginners. It is aimed at those with at least 1 year of relevant FullStack Javascript experience. Having prior exposure to the MERN Stack will be advantageous.