CF

MERN Invoice Web App with Docker,NGINX and ReduxToolkit

24h 38m 4s
English
Paid

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.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 110 lessons

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

Related courses

  • SOLID React Book thumbnailUpdated 3mo ago

    SOLID React Book

    By: Islem Maboud
    Learn how to apply the principles of SOLID in React to create clean and high-quality code. Enhance your programming skills with the book SOLID React.
    5/5
  • Scale React Development with Nx thumbnailUpdated 2y ago

    Scale React Development with Nx

    By: egghead.io
    On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code. But there's a bit more to
    1h 34m
  • React Supabase Full Course thumbnailUpdated 2y ago

    React Supabase Full Course

    By: Fireship
    Build and deploy a full-stack, production-ready web app with Supabase, React, and Postgres.
    1h 39m5/5

Frequently asked questions

What prerequisites are needed before enrolling in this course?
This course is designed for individuals with at least one year of full-stack JavaScript experience. Familiarity with the MERN stack will be advantageous, as the course builds on these foundational skills to develop a full-stack application.
What kind of application will I build in this course?
In this course, you will build a functional MERN stack application used for generating invoices, quotations, and receipts. This project involves setting up a full-stack environment using tools like Docker, NGINX, and Redux Toolkit, and you will learn to serve the app on a custom domain with HTTPS using SSL certificates.
Who is the target audience for this course?
The course targets developers who have intermediate experience in full-stack JavaScript development. It's suitable for those looking to enhance their skills in deploying full-stack applications using the MERN stack, Docker, and related technologies.
What specific technologies and tools will I learn in this course?
Throughout the course, you will work with Docker, NGINX, NGINX Proxy Manager, Makefiles, Portainer, shell scripts, MongoDB, Express, Redux Toolkit, and RTK-Query. You'll also learn about setting up HTTPS with SSL certificates from Let's Encrypt.
What topics are not covered in this course?
The course does not cover basic JavaScript or MERN stack concepts aimed at beginners. It assumes prior knowledge and focuses instead on application deployment and integration using advanced tools and technologies.
How much time should I expect to commit to this course?
The course includes 110 lessons, with a focus on hands-on development and integration tasks. While the exact runtime isn't specified, students should be prepared to spend significant time on each lesson to fully understand and implement the covered concepts.
How will the skills learned in this course benefit my career?
The skills gained from this course, such as deploying a MERN stack application with Docker and NGINX, and managing state with Redux Toolkit, are highly applicable in modern web development jobs. These technologies are widely used, and mastering them can enhance your ability to work on complex web applications and improve your job prospects in software development.