Master Full-Stack Web Development | Node, SQL, React, & More

18h 36m 51s
English
Paid
October 6, 2024
Build a fullstack project with Node.js, PostgreSQL, SQL, React, Redux and more! Covers APIs, authentication, and beyond!
More

Why should you take this course?

With five minutes, allow me to explain why.

This is the course that I needed before becoming a software engineer

This is the course that I needed before becoming a full-time software engineer, working downtown in San Francisco. It teaches the concepts that I put into practice every day. It's crucial to understand the entire full-stack.

But while I was self-learning, covering every layer full-stack was like searching for distant fragments of a huge puzzle. All the resources were spread out. They were all in different locations.

I needed it all in one place. I needed it to be all in one project. That is the purpose of this course.

This course is the selected highlights of months (years actually) of research. Of reading hundreds of coding articles. Of listening to tech talks. Of building projects at hackathons. Of studying computer science in college. Of working on projects as a software engineer.

All in one place. In one all-encompassing project.

Feature-focused, like the Industry

The project in this course mirrors projects that you would work on in the industry.

I also structured the project development to mirror how apps are built in the industry. You will evolve your full-stack project, just like how projects in the real world grow. You will be feature-focused.

You’ll build the project one feature at a time - continually improving the software and shipping to the users.  This is distinct from other courses that are architecture-focused. Meaning, you won’t build the entire backend, and then move on to the entire frontend. Instead, each new feature will involve every aspect of the full-stack architecture.

The DragonStack Project

What is the DragonStack Project?

The Dragonstack Project is a multi-account collector’s application for gathering dragons. You can trade, purchase, and breed your dragons! By selling dragons, you earn currency. Or if another account uses your dragon for its mating services, you also get currency. Each dragon has unique traits, and belongs to a specific generation.

This app is different. It's not a Facebook, nor Twitter clone. Now, the core of the architecture is the same. Behind those larger apps like Facebook and Twitter, are the concepts you'll learn in this course. But you'll use those concepts to create something unique. If you're already investing the time to learn the full stack, I want you to make something no else has made before. That way, you'll learn how to apply these concepts to innovate.

From Scratch

In this course, you will build everything from scratch. You will take over every layer of the full-stack. You won’t use any separate APIs for the features.

1. You’ll build the API. Sure, you can learn about web requests by consuming a public API. But in order to fully learn how these web requests APIs work, you need to build one yourself.

2. You'll be in full control over the database. You won't rely on a library to do manage the database for you. You won't treat the database like magic. No, you'll have full control, and generate the SQL yourself.

3. You'll build the authentication system. Authentication is an easy step to skip while learning. Don't. It's a critical concept to understand. 99% of the applications you make, or work on, will have an account base.

This from scratch is the core philosophy of the course. In addition to building the APIs from scratch, you’ll create the full backend. This will include the server, and core database files. Plus, you’ll build the full frontend, with the modern and very widely used React library.

The Full Picture Grounded with a Conceptual Understanding

As you work with new technologies, it is essential that you see the full picture. Therefore, in this course, you will learn more than just how to code in Node.js, PostgreSQL, React, and Redux. On top of that, you will gain an understanding of the design, models, and ideas behind these technologies. You’ll learn exactly how companies apply these technologies to their problems. With a foundational understanding of the concepts, you will be able to see how each layer fits together in the full-stack

Practical Experience

Just because this course places a large emphasis on concepts, does not mean you won’t dive into the code as soon as possible. This course also focuses on practical experience. After all, the concepts are only reinforced when you actually apply them and build the software!

By the end of the course, you’ll have so much experience working with the technologies. I have no doubt that you’ll be able to confidently add Node.js, PostgreSQL, React, and Redux to your resume. Plus, you’ll have an impressive full-stack project in your portfolio to prove it.

Not to mention, you can do many of the final course challenges to make your course project the most unique and advanced one around.

Course Challenges

Littered throughout the course are challenges. This is not the kind of course where you’ll be blindly following along the entire time. These challenges will give you the chance to implement the next feature yourself - reinforcing your knowledge, guided by your own experience.

As mentioned, there is also a list of final course challenges. These go beyond the scope of the course. But these are the ones that will make your project truly stand out.

Simplicity

On top of teaching full-stack web development and its core technologies, the overarching emphasis of this course is building code with simplicity. No matter what technology we code in, we will ensure to design our classes and build our functions in a simple way.

Now simple does not mean easy. Easy means to lie near. Just because something is easy and immediate does not mean it's right. Sometimes, the easy solution is actually a shortcut that will require even more work to fix later.

Our definition of simplicity is singularity. Simplicity in this course means to be one-fold. As much as possible, we will make our functions simple, one-fold, and singular in purpose. We don’t want our functions to have an overwhelming number of side effects that introduce unneeded complexity into our application.

Scalability

Simplicity is the prerequisite to scalability. Because you'll code the functions in a simple  way, you will find that you’ll be able to quickly add new features to the application. The upfront cost of carving out the most simple design pays huge dividends for scalability.

Progress in Dragonstack

Your progress with the dragonstack project will follow an exponential curve. Throughout the course, graphs will show your progress on this course. There will be an initial ramp-up period. However, once you make it past the hump, your pace will skyrocket. Stay determined to get that momentum going. It's one of the best feelings when you're riding that freeway of productivity.

Other Details:

Promo Music Credits

"Slow Motion" by Ben Sound.

Redux Broken Down

Redux can be a very complex concept to handle with frontend development and React. This course boils down Redux, and explains it a low level. We won’t look at Redux as some magic library that just solves all of our state problems. No, this course is going to fully dive into Redux. We’ll experiment with its functions, examine its parameters, and even consider the overall design decisions of the library.

Promises!

JavaScript Promises that is! Promises will play a huge role in the backend of this course. So if you were looking for a good excuse to learn how JavaScript promises work, then this is the perfect project for you! I promise…

Names

This course might spend more time than others discussing names. Some may say variable naming is arbitrary: “just give something a short and clear name and be done with it...” To that, I wholeheartedly disagree! Naming is one of the most important parts of software. Getting the name right can be the sole difference between smoothly flowing through understanding a codebase, and spending minutes or even hours trying to understand how functions work together.

Timely Delivery

Since Udemy allows students to speed up lectures, I’ll talk through the lectures in a timely manner that will be understandable at all speeds. Change the speed as you wish.

Requirements:

  • Some coding experience is required for this course. This course is not an intro to programming. It’s best taken after one or two intro to programming courses have already been completed.

  • Node, PostgreSQL, React, and Redux experience is NOT required. All of these concepts will be explained from the beginning.

  • JavaScript experience is recommended. This course will introduce JavaScript and explain every line. However, once a keyword has been introduced, the course assumes that you are familiar with the concept. The focus is on full-stack concepts, and not learning JavaScript for the first time. If this is your first time learning JavaScript, view the pace of the course as a great way to see all the different aspects of the language.

  • Some experience on the command line is recommended, but not absolutely required. This course does have a short refresher on command line principles, and we’ll only use the basics. But the more comfortable you are on the command line, the better.

Who this course is for:
  • Anyone with some programming experience, that wants to learn what it takes to make a full-stack application.
  • Students who have learned React, but have yet to build a full-stack project.
  • Those who have backend experience, but also want frontend experience. Same for frontend engineers, who want backend experience.
  • Students who know a little bit of Node, PostgreSQL, React, and/or Redux, but still haven’t put all of these concepts together.

What you'll learn:

  • Build a backend server and application with Node.
  • Build a web API with Node and Express.
  • Build a web application with React and Redux.
  • Build a secure authentication system from scratch.
  • Understand NodeJS under the hood, including the V8 engine and the famous event loop.
  • Understand relational database design and its advantages.
  • Understand essential web development concepts like web requests, client-server relationships, and the core web protocols.
  • Know the tradeoffs between certain software naming practices for functions and table names in the database.

Watch Online Master Full-Stack Web Development | Node, SQL, React, & More

Join premium to watch
Go to premium
# Title Duration
1 Course Introduction 02:58
2 Technologies of the Course 03:35
3 Application Tour and Overview 05:27
4 The Role of Node.js in Dragonstack 03:59
5 Set Up the Backend 07:22
6 Optional: Object-Oriented Programming 03:15
7 The Dragon Class 07:11
8 Improve the Dragon Class | Part 1 04:38
9 Improve the Dragon Class | Part 2 08:38
10 Nodemon for Development 04:05
11 Optional: Node.js Under the Hood - the V8 Engine 05:08
12 Optional: Node.js Under the Hood - the Event Loop 09:17
13 The Source of Truth for Dragon Traits 03:23
14 Traits in the Dragon Class 08:27
15 Generation Configuration 02:48
16 Generation Class | Part 1 08:19
17 Generation Class | Part 2 05:36
18 Generation Engine 09:09
19 Dragonstack Architecture Check 1 02:28
20 On Express.js 02:49
21 Set up the Server and Get Dragon 08:44
22 Codebase Organization | Part 1 05:35
23 Codebase Organization | Part 2 05:05
24 Get Generation 09:06
25 Dragonstack Architecture Check 2 01:27
26 PostgreSQL and Relational Databases Overview 07:57
27 Setup and Install PostgreSQL 04:16
28 Create the Dragonstack DB and the Node User 03:26
29 Generation SQL 07:29
30 Dragon SQL 08:00
31 Configure Script 10:49
32 Configure the Database Pool 06:19
33 Node-Postgres Pool Verification 04:40
34 Generation Table and Storing Generations 09:38
35 Get Generation with IDs 09:40
36 Optional: JavaScript Promises Overview 05:56
37 Dragons with Generation IDs 03:17
38 Store Dragons 11:20
39 Error Handling in Express.js 06:59
40 The Approach to Storing Dragon Traits 03:29
41 Trait Table 11:34
42 Trait Table and Get Trait ID 07:03
43 Dragon Trait Table 03:53
44 Store Dragon Traits 11:46
45 Verify Dragon Trait Storage 08:11
46 Get Dragon With Traits | Part 1 09:35
47 Get Dragon With Traits | Part 2 12:47
48 Dragonstack Architecture Check 3 01:57
49 Optional: JS in Browsers, the DOM, and React and Virtual DOM Overview 08:53
50 Set Up the React Frontend | Part 1 05:53
51 Set Up the React Frontend | Part 2 11:50
52 Generation Component 09:44
53 React State and Generation Fetch | Part 1 06:38
54 Backend Interlude: Cross-Origin Resource Sharing 05:45
55 Optional: Same Origin Policy 02:53
56 React State and Generation Fetch | Part 2 06:55
57 Fetch New Generations on a Timer 10:46
58 New Dragon in React 10:23
59 Dragon Avatar Component and React Props 06:32
60 New Dragon Button and React Bootstrap 06:19
61 Quick Styling 04:21
62 Optional: Dragon Avatar Image | Part 1 08:42
63 Optional: Dragon Avatar Image | Part 2 13:11
64 Redux Overview 05:54
65 Redux in Dragonstack and the Generation Reducer 06:59
66 Generation Action 08:51
67 Generation Action Creator 08:25
68 Redux Organization and Tools 08:45
69 Connect Generation Component and MapStateToProps 09:44
70 Generation Component and MapDispatchToProps 09:55
71 Redux Thunk 10:16
72 Updated Fetch Generation Action 07:34
73 Updated Fetch Generation Reducer 13:43
74 Fetch States 08:14
75 New Dragon Redux Flow 12:43
76 Connect the Dragon Componnet 10:30
77 Dragonstack Architecture Check 4 01:29
78 HTTP vs HTTPS and TLS Overview 06:24
79 Account Table 02:29
80 Account Table Store Account 04:27
81 Account API and New Account Request 10:08
82 Custom System Hash 02:59
83 SHA256 and App Secret 07:51
84 Hash Sensitive Information 09:39
85 Avoid Account Duplication and Get Account 11:21
86 Account Sessions 06:25
87 Build the Session Class | Part 1 08:30
88 Build the Session Class | Part 2 10:22
89 Set a Session Cookie 07:56
90 Shared Sessions and Set Session Helper | Part 1 08:41
91 Update Session ID in the Account Table 03:34
92 Shared Sessions and Set Session Helper | Part 2 06:44
93 Log In | Part 1 08:46
94 Log In | Part 2 09:26
95 Log Out 10:36
96 Root Component 09:01
97 AuthForm Component | Part 1 06:01
98 AuthForm Component | Part 2 07:20
99 Account Reducer 08:06
100 Sign Up Account Action 08:33
101 Account in the Redux Store 08:35
102 Display Errors and Render Based on the Account 07:43
103 Log Out and Account Reducer 03:37
104 Log Out Action and Fetch From Account 12:04
105 Log Out Button 05:46
106 Redux Log In 06:02
107 Get Authenticated Request 06:25
108 Guard Rendering Behind Authenticated Check 08:53
109 Frontend Button Clicked to Hide Error in AuthForm 04:37
110 Account Dragon Table 05:13
111 Store Account Dragon 06:33
112 Associate Account with New Dragons | Part 1 08:20
113 Associate Account with New Dragons | Part 2 10:21
114 Get Account Dragons 05:33
115 Get Account Dragons Request 06:01
116 Get Account Dragons With Traits 05:40
117 Fetch Account Dragons 07:07
118 Account Dragons Reducer 05:09
119 Display Account Dragons Skeleton 05:33
120 Account Dragon Rows 06:09
121 React-Router 09:06
122 Link Components and When to (Not) Use Anchor Tags 06:34
123 Auth Routes: Redirects 03:57
124 Auth Routes: Stateless Functional Components 05:13
125 Auth Routes: Higher-Order Components 06:01
126 Update Dragon Nickname 07:45
127 Edit Dragon 07:10
128 Fire Update Dragon Nickname 08:11
129 Multi-Acocunt Features Preview 03:03
130 Account Balance and Info 08:34
131 Account Info in React | Redux 06:21
132 Account Info in React | UI 04:36
133 Public and Sellable Dragons 08:05
134 Update Dragon with Dynamic Queries 12:59
135 Update Dragon in the API and UI 09:30
136 Get Public Dragons 08:24
137 Public Dragons Redux 08:57
138 Public Dragons Page 06:15
139 Public Dragon Rows 04:15
140 Update Balance 04:39
141 Get Dragon Account and Update Dragon Account 08:27
142 Buy Dragons Backend 13:41
143 Test Buy Dragons 03:49
144 React Buy Dragons 10:59
145 Breeder Class and Making Baby Dragons 07:05
146 Pick Trait 15:32
147 Dragon Sire Value 04:14
148 Update Sire Value in Account Dragon Row 04:53
149 Mate Dragons Request 13:25
150 Test Mate Dragons Request 05:21
151 Sire Button 04:38
152 Mating Options 07:27
153 Send Mate Request 07:52
154 Limit Dragons per Generation 07:58
155 Congratulations and Connect with Me! 00:58

Similar courses to Master Full-Stack Web Development | Node, SQL, React, & More

Stripe Payments JavaScript Course

Stripe Payments JavaScript Coursefireship.io

Duration 1 hour 29 minutes 26 seconds
React Simplified - Beginner

React Simplified - Beginnerwebdevsimplified.com

Duration 10 hours 58 minutes 46 seconds
Build a Realtime App with React Hooks and GraphQL

Build a Realtime App with React Hooks and GraphQLudemy

Duration 4 hours 32 minutes 39 seconds
Microservices with Node JS and React

Microservices with Node JS and ReactudemyStephen Grider

Duration 54 hours 13 minutes 19 seconds
The Creative React and Redux Course

The Creative React and Redux Coursedevelopedbyed.com

Duration 18 hours 13 minutes 6 seconds