Skip to main content

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

18h 36m 51s
English
Paid

Embark on your journey to becoming a full-stack web developer with our comprehensive course. Build a complete project using Node.js, PostgreSQL, SQL, React, Redux, and more. Gain insights into APIs, authentication, and beyond!

Course Highlights

Why Choose This Course?

This course is designed to equip you with essential knowledge to thrive as a software engineer. Learn the full-stack concepts applied daily by professionals, centralized in one all-encompassing project.

This course encapsulates the collected wisdom from years of coding, engineering projects, and academic insights.

Feature-Driven Project Approach

Our course mirrors real-world industry practices by focusing on developing features incrementally. You will build the project one feature at a time, integrating both frontend and backend elements seamlessly.

The DragonStack Project

The DragonStack Project offers a unique multi-account application for dragon collection. You'll engage with unique concepts such as trading, purchasing, and breeding, providing a rich learning experience distinct from traditional app clones.

Comprehensive Learning From Scratch

Build every layer of the full-stack from the ground up, taking full control over the API, database, and authentication system. This hands-on experience ensures a deep understanding of each technological component.

The Full Picture with Conceptual Clarity

Beyond coding skills, develop a foundational understanding of how technologies like Node.js, PostgreSQL, React, and Redux are applied in solving real-world problems.

Hands-On Practical Experience

Apply concepts and develop a production-ready project with extensive practice. By the end of the course, confidently list these technologies on your resume supported by a robust portfolio piece.

Course Challenges and Improvements

Enhanced learning with challenges throughout the course will build your problem-solving skills and reinforce your knowledge, making your project truly unique.

Course Philosophy: Simplicity and Scalability

Prioritizing code simplicity ensures seamless scalability for feature additions, contributing to maintaining a clean and manageable codebase.

Additional Course Details

Promo Music Credits

"Slow Motion" by Ben Sound.

Deep Dive into Redux

Learn Redux thoroughly by breaking down its concepts to a low level, ensuring an in-depth understanding of frontend development complexities.

Mastering JavaScript Promises

Dive deep into JavaScript promises critical for backend development, making the course a perfect opportunity to master this essential concept.

The Importance of Naming

Understand the significance of choosing precise names in your codebase, facilitating clearer comprehension and smoother workflows. Proper naming can drastically alter how effectively functions work together within a codebase.

Timely Delivery of Content

All lectures are designed for varied learning speeds, allowing students to adjust playback speed without losing comprehension.

Course Requirements

  • Some coding experience is required. Ideally, you should have completed one or two introductory programming courses.
  • No prior experience with Node, PostgreSQL, React, or Redux is required; these will be taught from scratch.
  • JavaScript experience is recommended. The course will rapidly introduce JavaScript concepts applied in a full-stack context.
  • Familiarity with the command line is helpful but not mandatory, as basic principles are covered early in the course.

Target Audience

  • Individuals with basic programming experience eager to build full-stack applications.
  • Students familiar with React but lacking full-stack project experience.
  • Backend developers wishing to gain frontend skills, and vice versa.
  • Students with foundational knowledge of Node, PostgreSQL, React, and/or Redux who wish to consolidate these skills.

What You'll Learn

  • Develop a complete backend server and application with Node.
  • Create a web API using Node and Express.
  • Build robust web applications using React and Redux.
  • Implement a secure authentication system from scratch.
  • Gain a deep understanding of NodeJS internals like the V8 engine and event loop.
  • Learn relational database design principles and their benefits.
  • Acquire essential web development knowledge, including web requests and client-server interactions.
  • Evaluate software naming practices and their impact on function and table names in databases.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 155 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 155 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction
All Course Lessons (155)
#Lesson TitleDurationAccess
1
Course Introduction Demo
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
Unlock unlimited learning

Get instant access to all 154 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription