Master Deno, React, Mongo, NGINX running with Docker-Compose

Master Deno, React, Mongo, NGINX running with Docker-Compose
Master Deno, React, Mongo, NGINX running with Docker-Compose
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 20.5 Hours | 10.7 GB

Deno the new kid in town – How to use with Mongodb and React hooks running dev/prod in dockerized containers with NGINX.

You just found the most comprehensive online resource on Deno, React Mongo, Docker, Docker-Compose and NIGNX available to date. This project-based course will introduce you, step by step to all of the modern tools that all top the line Deno and React developer should know in 2020.

We will build together a strong foundation during the course of this project, starting with Docker and Docker-Compose.

We will learn how to Dockerize all the applications we will need, creating no one or two Docker containers but four, we will learn how:

Create a Docker Image to host our Deno Application with hot-reload function
Create a Docker Image to host our Rect Drag’n’Drop application also with hot-reload
Create a Dockerized MongoDb container where we will map the data to a volume on our machine, so we never miss the data.
Create a NGINX Docker container to proxy the request between the API requests and the Front-End Requests.

And all that is just the beginning, we will also:

  • Setup Visual Studio to an extra fast development
  • Install all the necessary tools together
  • Learn how to create a Deno server using Oak
  • Learn how to connect Deno with MongoDb
  • Learn how to validate our data using Validasour
  • Make how to make our React application look Amazing with UiKit
  • Learn how to mutate state directly using Immer
  • Take Axios to make HTTP connections to its extreme
  • Learn step by step, the main hooks in react:
  • useState
  • useEffect
  • useReducer
  • useCallback
  • useMemo
  • and many custom hooks we will create
  • All you need to know to set up NGINX in Docker

The curriculum is going to be very hands-on as we walk you from start to finish of releasing a professional-grade Deno and React project from your development machine all the way into production.

We jump directly into the deep end and get our hands dirty, however along the way we will cover all Deno basics and then going into advanced topics so you can make right decisions on architecture and tools on any of your future Deno and React projects.

What you’ll learn

  • Backend Development
  • Frontend Development
  • Docker
  • Docker-Compose
  • MongoDb
  • Running development setups in containers
  • NGINX
Table of Contents

Create our Docker compose file
1 Creating the Docker compose file

Create our Dockerfile
2 Creating the frontend Dockerfile
3 Creating the API Dockerfile

Installing Deno and React on our containers
4 Creating our React app in a Docker container
5 Hello from Deno from Docker

Creating our Deno App
6 First part of our journey Backend with Deno

Creating our server using Oak
7 Importing our first module Oak
8 Exporting our routes
9 Creating our first Controller

Connecting to Mongo
10 Connecting Deno to Mongo
11 Saving our first value into MongoDB
12 Refactoring for a Singleton our first Design Pattern

Validating with Validasaur
13 Creating our Model and Schema
14 Validating our post request

Creating our CRUD (CreateReadUpdateDelete)
15 GetAll Endpoint with Mongo
16 Get the query parameters from URL and request one item
17 Return a 404 when no to-do is found
18 Delete a to-do from Mongo
19 Updating a record in Mongo
20 Validating the Update
21 Creating our custom validator using Validasaur
22 Validasaur limitations notNull and requiredWhen and Optional

Repositories and Interfaces
23 Creating our first Interface
24 Creating our first Mongo Repository
25 Testing all endpoints with postman

Setting the headers
26 How to add headers to one of our endpoints
27 Implement our first middleware
28 Creating Content Type Json responses without need to set the headers

Creating middle-wares
29 Creating a not found middle-ware

Cleaning up the Any types
30 Cleaning up the Any types – RouterContext type
31 Cleaning up Response type and Importing Status Enum to define our Not Found
32 Cleaning up the Application type
33 Cleaning up the Next type
34 Finally a type we can choose

Creating new routes
35 Creating the order to- do router
36 Creating a more standard router URL using Docker to keep the API version
37 Reusing our new router creator to create the new to-do order endpoints

Understanding and creating the data shape
38 Data shape in MongoDB
39 Validating the MongoID

Creating Projections, Lookups and Aggregation in MongoDB
40 Creating Lookups and more Projections in MongoDB
41 Creating projections in MongoDB
42 Implementing our projections in Deno
43 Saving our order to-do into MongoDB

Docker signals to close (SIGTERM, SIGINT, SIGQUIT) – Respect
44 Understanding why we should always respect the SIG Family
45 Implement the Deno listeners for your Docker termination signals
46 Deno is listening but nothing happens, is Docker really saying something
47 Passing the termination signal from Deno to Oak
48 Refactoring the code to a Signal Manager function

Setting up CORS with Deno
49 Deno, CORS. What and why
50 Pre-Fligth, when options are not always a option

Back from the Future
51 Inserting the ID into your new todo response (trust me we will need that later)

Creating the React App (Front End)
52 Second leg of the journey React and the frontend

Starting our React project
53 Review and clean up

Installing and setting up UIkit
54 Installing ans setting up UIkit

Creating the Navbar for our application
55 Creating the Navbar and the Logo
56 Adding the search bar on the Navbar
57 Refactoring the Navbar to its on component
58 Let’s make it Sticky to the top

Creating the To-do Card
59 Creating the card
60 Refactoring the card component

Grouping things
61 Creating our groups

Being able to Drag’n’drop
62 Making it Drag’n’drop
63 Refactoring group and grouping items

Creating a Float Action Button
64 Creating a floating action button
65 Refactoring the float action button

Creating a Modal Popup
66 Creating and triggering our modal
67 Creating the body of our modal
68 Adding a Input field, a text area and a select area on our modal
69 Adding a footer to the modal
70 Refactoring the modal to its own component

Creating and use our first React Hook
71 Creating our first Hook use State
72 Create use State for our text area and option
73 Renaming the groups

Installing and using Immer
74 Installing and using Immer to help us control the state

Reaming all the console error
75 Cleaning up the code, adding keys to components and default value to options

Looping multidimensional arrays to create our 3 groups with cards
76 Looping multidimensional arrays
77 Looping multidimensional arrays
78 Passing props to To-do Card and creating its ID

Creating and using our second React Hook
79 Listening to events using useEffect Hook

Creating our first Reusable Custom Hook
80 Refactoring our Drag’n’drop hook
81 Creating our first custom hook
82 Passing Parameters and Functions to our custom hooks

Creating a custom React Hook that reuse our other Custom React Hook
83 Creating a new custom hook useGroupHook that uses our previous custom hook
84 Making our custom hook more reusable
85 Adding proper names to our group containers

Creating still another custom hook that clean itself up after a run
86 Start to use hooks on our search bar
87 Adding a new to-do to local storage
88 Close the modal and cleaning up the fields for a new entry
89 Passing the Edit Function using use Context
90 Editing our list of to-dos
91 Pre-populating the modal before open
92 Re-utilizing the Add modal to Edit
93 Moving an edit to-do from one group to another
94 Implement the duplicate functionality
95 Refactoring to-do management to a massive new custom hook
96 Understand per value and per reference
97 Let’s explore a new hook use Ref to compare closure values with current values
98 Finally use Reducer
99 From exporting 8 functions and states to export only state and dispatch
100 Refactoring to-dos to a use Reducer hook
101 Using dispatch to change the state
102 Using our new massive new hook
103 Fixing the modal to use state and dispatch
104 Calling functions inside our Reducer
105 The satisfaction of the victory
106 Quick clean up
107 Refactoring the search bar into a custom hook
108 Using use Effect cleanup to remove our timers
109 Creating a local storage hook for our to-dos
110 Making our use Local Storage very generic using callback functions
111 Introduction to Drag’n’drop
112 Finding the element we need to delete
113 Dispatching a new action to remove the to-do from the group
114 Removing the element from the local storage and UI… but then…
115 React vs UIkit who will win the DOM manipulation
116 Finding the correct to-do to add
117 Adding to-do to local storage, but wait
118 Finish our Drag’n’Drop between groups
119 Keeping our to-dos safe in local storage using hooks
120 Taking care of the moving event
121 Implementing the move reducer
122 The art of debugging
123 Deleting elements in a multidimensional array
124 Passing props, and re-passing, and passing again… it must have a better way
125 Passing values and functions from one side to another using use Context
126 Refactoring our use Context to its own file
127 Persisting our to-do in local storage

Keeping and working with our data in local storage
128 Keep our to-dos safe in local storage using hooks
129 Deleting elements in a multidimensional array

Using the use Context hook
130 Passing props, and re-passing, and passing again… It must have a better way
131 Passing values and functions from one side to another using use Context
132 Refactoring our use Context to its own file

More work with local storage
133 Persisting our to-do in local storage
134 Adding a new to-do in local storage

Controlled components
135 Closing the modal and cleaning up the fields for a new entry

More about use Context, that is an important hook to master
136 Passing the Edit function using use Context
137 Editing our list of to-dos
138 Pre populating the modal before open

Reusing components
139 Re-utilizing the Add modal to Edit
140 Moving an edit to-do from one group to another

Yet another functionality to our cards, duplicate
141 Implementing the duplicate functionality

Yet another custom hook, and this is a big one
142 Refactoring to-do management to a massive new custom hook
143 Understand per value and per reference

use Reducer, it’s nor Redux but looks a lot like it
144 Finally use Reducer
145 Refactoring to-dos to a use Reducer hook
146 From exporting 8 functions and states to export only state and dispatch

use Reducer, understanding state and dispatch
147 Using our new massive new hook
148 Using dispatch to change the state
149 Fixing the modal to use state and dispatch

Reducer with a little help from its friends
150 Calling functions inside our Reducer
151 The satisfaction of the victory
152 Quick clean up

Refactoring the search bar to a reusable custom hook
153 Refactoring the search bar into a custom hook

Refactoring the local storage to a reusable custom hook
154 Creating a local storage hook for our to-dos
155 Making our useLocalStorage very generic using callback functions

Drag’n’Drop in all its glory (I know you’re waiting for it!)
156 Introduction to Drag’n’Drop

Drag’n’Drop between groups
157 Finding the element we need to delete
158 Dispatching a new action to remove the to-do from the group
159 Removing the element from the local storage and UI… but then…

Drag’n’Drop React vs UIkit, who will win
160 React vs UIkit who will win with the DOM manipulation

Update the Drag’n’Drop changes into the local storage
161 Finding the correct to-do to add
162 Adding to-do to local storage, but wait

More Drag’n’Drop between two different groups
163 Finishing our Drag’n’Drop between groups

Even more Drag’n’Drop now in the same group, just changing the order
164 Taking care of the moving event
165 Implementing the move reducer

The art of debugging, when, how and why
166 The art of debugging

Use Callback, one more important React Hook to learn
167 Use Callback, solving some of our warnings with use Callback
168 Code clean up, removing all warnings and using use Callback to do so

Installing Axios and fetching data from our API
169 Installing Axios
170 Using Axios to make a GET request to our endpoint
171 From Deno to our Local Storage
172 Reconstructing our flattened array to a 3 Dimensional array
173 Fixing the new error that happened when you started using the new data
174 Fixing issues with different types of ID’s
175 More use Callback, it is like someone called it back again (got it)

Lets finally post something from React to Deno
176 Creating a useReact Middleware httpDispatchMiddlware
177 Enriching the delete todo dispatch payload
178 Removing unnecessary data from the duplicate todo before post it
179 Our first post to our Deno API
180 Adding the new Todo in local storage as well

Appendix Setup, Configurations, Installations and etc
181 Installing Node, Chrome, VSCode, Yarn
182 Install Postman
183 MongoDB Compass
184 Connecting to MongoDB inside Docker using Compass
185 Using MongoDB Compass – Update, Delete, Clone, Drop Collections and Databases
186 Installing VSCode modules
187 Configuring VSCode Prettier
188 Emmet and speed up coding
189 Add extension tools for chrome
190 Installing Docker Extension
191 Installing Deno and Denon on Mac
192 Installing Brew on Mac
193 Installing Docker

What happens next
194 Congratulations you got here, now what happens next