MERN Invoice Web App with Docker,NGINX and ReduxToolkit

24h 38m 4s
English
Paid

Course 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.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 110 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online MERN Invoice Web App with Docker,NGINX and ReduxToolkit

0:00
/
#1: Introduction

All Course Lessons (110)

#Lesson TitleDurationAccess
1
Introduction Demo
01:20
2
Lecture 2: Course Requirements
01:18
3
Lecture 3: What you are getting yourself into - Demo
18:54
4
Create Working Directory and setup Github
02:54
5
Project Initialization
13:02
6
Intro to Insomnia
04:19
7
Dockerfile Config
09:00
8
Docker Compose Config
17:27
9
Building Backend Docker Containers
06:59
10
How to setup and use Makefiles
05:58
11
Introduction to Logging
02:15
12
Logging Setup
14:08
13
Introduction
07:34
14
Theory of NGINX as a reverse proxy/load Balancer(Don't skip please)
03:38
15
NGINX Backend config
11:03
16
Add client and NGINX to docker compose
09:30
17
Mongoose Config
08:29
18
Mongo Sanitize
01:46
19
User Model
20:41
20
Verification Token Model
04:17
21
Helpers
04:50
22
Middleware
22:54
23
Email Utilities
11:10
24
What is the difference between access and refresh tokens?
03:41
25
Register and Verify User Emails
34:51
26
Login User, get Access and Refresh Tokens
20:07
27
Refresh Token Controller
14:19
28
Resend Email Verification Tokens
13:02
29
Reset User Password
20:02
30
Logout User
06:43
31
Get User Profile Controller
07:38
32
Update User Profile
10:07
33
Delete My User Account
04:35
34
Get All Users - Admin Only
12:28
35
Delete User Account
06:31
36
Deactivate User Account
05:52
37
Install packages, Setup React Router Dom
06:16
38
Common Components Part 1
20:45
39
Common Components Part 2
12:25
40
Setup HomePage and custom theme
23:41
41
Create Auth and Register API Slice
16:58
42
Password Strength Indicator
07:09
43
Register Form Part 1
16:35
44
Register Form Part 2
21:31
45
Register Form Part 3
07:52
46
AuthWrapper
01:41
47
Register Page
14:06
48
Verification Page
13:02
49
Login AuthSlice and Service
09:48
50
Login Form
16:10
51
Login Page
14:59
52
LogoutUser API Slice
06:28
53
Auth Nav
11:19
54
Profile Info
23:27
55
Logo
04:36
56
MenuList
17:41
57
Resend Email Verification Link
18:51
58
Password Reset Service
02:03
59
Password Reset Pages
21:53
60
Auth Required
05:02
61
Dummy Dashboard and Users List Page
11:07
62
Re-Authentication with Refresh Token
14:49
63
UsersList Page
32:48
64
Passport Install and Configuration
10:07
65
Register App on Google
06:49
66
Google Controllers/Routes
13:50
67
useAuthUser Hook
09:29
68
Customer & Document Model
17:14
69
Create & Update Customer Controllers
11:20
70
Delete & Get All Customers Controllers
25:15
71
Create & Update Documents
09:03
72
Get & Delete Document controller
18:50
73
Install and setup Multer
09:05
74
Cloudinary Config
14:02
75
User Profile API Slice
08:50
76
Profile Page
29:16
77
Edit Profile Page Form
34:42
78
UsersList Page
09:54
79
CRUD CustomersApiSlice
07:33
80
Customers Page
22:53
81
Customer Create Form
21:14
82
Customer Edit Form
21:14
83
Single Customer Page
21:01
84
Custom PhantomJS Image
07:13
85
Create Email Template
12:15
86
Create PDF Template
36:26
87
Generate pdf controller
09:03
88
Create Payment controller
07:29
89
Documents Api Slice
06:07
90
Documents Components
17:23
91
Global Documents Components
06:25
92
Documents Page
23:48
93
Document Create Edit Form Part 1
23:16
94
Document Create Edit Form Part 2
26:24
95
Document Create Edit Form Part 3
33:34
96
Payment Form
15:42
97
Single Doc Page Part 1
19:52
98
Single Doc Page Part 2
40:04
99
Payment History
08:03
100
Dashboard Page
28:49
101
Intro to IaaS,PaaS and Dbaas
02:20
102
Digital Ocean Droplet
09:37
103
Mailgun Config
11:17
104
Client Production Config
01:54
105
MongoDB Atlas Config
04:35
106
Server Config
13:09
107
NGINX Proxy Manager Setup
14:54
108
Portainer Setup
11:04
109
Project Setup
11:58
110
Bash Deployment
17:18

Unlock unlimited learning

Get instant access to all 109 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

REACT ROUTER (v6)

REACT ROUTER (v6)

Sources: ui.dev (ex. Tyler McGinnis)
There’s an easier way to master React Router. Our linear course is like having a smart, experienced friend sit down next to you, walk you through each concept, and apply what yo...
3 hours 15 minutes 27 seconds
Data fetching with React Server Components

Data fetching with React Server Components

Sources: Build UI
Since its release 10 years ago, React's core APIs have remained surprisingly stable. The original component boundary that supports state and lifecycle methods still works to thi...
1 hour 15 minutes 56 seconds
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

Sources: fullstack.io
Learn advanced React, Node, TypeScript, and GraphQL by creating a ready-to-use application in this online course. Explore each of these technologies and find out how to create a...
30 hours 50 minutes 42 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.

Sources: Marc Lou
CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively. Unlike traditional...
11 hours 38 minutes 42 seconds