MERN Invoice Web App with Docker,NGINX and ReduxToolkit
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 MERN Invoice Web App with Docker,NGINX and ReduxToolkit
| # | Title | Duration |
|---|---|---|
| 1 | Introduction | 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 |
Similar courses to MERN Invoice Web App with Docker,NGINX and ReduxToolkit
Crack the Frontend Interview with React
Complete DApp - Solidity & React - Blockchain Development
React Router v4
React and Typescript: Build a Portfolio Project
MERN Stack From Scratch
PHP Symfony 4 API Platform + React.js Full Stack Masterclass
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux
React for Beginners
