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
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 Component Testing with Vitest

React Component Testing with Vitest

Sources: Artem Zakharchenko
The closer your tests imitate real application usage, the more confidence they provide. However, for a long time, web developers had to...
1 hour 38 minutes 34 seconds
The complete React Fullstack course ( 2021 edition )

The complete React Fullstack course ( 2021 edition )

Sources: udemy
Do you want to learn the whole process of building your App ?. This is the course for you. We will start from the very beginning, from "I don't even know how use it..and why wo...
76 hours 58 minutes 6 seconds
Modern React with Redux [2023 Update]

Modern React with Redux [2023 Update]

Sources: udemy, Stephen Grider
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning React and Redux! Thousands of other engineers
37 hours 44 minutes 46 seconds
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Sources: udemy
Full Stack introduction to HATEOAS. In this course, you will learn the core concepts of HATEOAS as well as how to leverage this on a ReactJS Application. HATEOAS stands for: Hyp...
5 hours 51 minutes 37 seconds