Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development React

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

Build a fullstack project with Node.js, PostgreSQL, SQL, React, Redux and more! Covers APIs, authentication, and beyond!
Rating: 4.5 out of 54.5 (389 ratings)
3,088 students
Created by David Joseph Katz
Last updated 12/2018
English
English [Auto]
30-Day Money-Back Guarantee

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.
Curated for the Udemy for Business collection

Course content

11 sections • 186 lectures • 18h 54m total length

  • Preview02:57
  • Preview03:34
  • Application Tour and Overview
    05:26
  • Preview00:25
  • Important Reference: Software Requirements and Installations | Article
    01:01

  • Preview00:48
  • Preview03:58
  • Set Up the Backend
    07:21
  • Optional: Object-Oriented Programming
    03:14
  • The Dragon Class
    07:10
  • Improve the Dragon Class | Part 1
    04:37
  • Improve the Dragon Class | Part 2
    08:37
  • Nodemon for Development
    04:04
  • Preview05:07
  • Preview09:16
  • The Source of Truth for Dragon Traits
    03:22
  • Traits in the Dragon Class
    08:26
  • Generation Configuration
    02:47
  • Generation Class | Part 1
    08:18
  • Generation Class | Part 2
    05:35
  • Optional Challenge: Generation Engine
    00:49
  • Generation Engine
    09:08
  • Preview02:27

  • Preview | Feature 1. Create Dragons: Express.js
    00:31
  • On Express.js
    02:48
  • Set up the Server and Get Dragon
    08:43
  • Codebase Organization | Part 1
    05:34
  • Codebase Organization | Part 2
    05:04
  • Get Generation
    09:05
  • Preview01:26

  • Preview | Feature 1. Create Dragons: PostgreSQL and the Database
    00:32
  • PostgreSQL and Relational Databases Overview
    07:56
  • Setup and Install PostgreSQL
    04:15
  • Create the Dragonstack DB and the Node User
    03:25
  • Generation SQL
    07:28
  • Dragon SQL
    07:59
  • Configure Script
    10:48
  • Configure the Database Pool
    06:18
  • Node-Postgres Pool Verification
    04:39
  • Generation Table and Storing Generations
    09:37
  • Get Generation with IDs
    09:39
  • Optional: JavaScript Promises Overview
    05:55
  • Optional Challenge: Dragons with Generation IDs and Store Dragons
    00:50
  • Dragons with Generation IDs
    03:16
  • Store Dragons
    11:19
  • Error Handling in Express.js
    06:58
  • The Approach to Storing Dragon Traits
    03:28
  • Trait Table
    11:33
  • Trait Table and Get Trait ID
    07:02
  • Dragon Trait Table
    03:52
  • Optional Challenge: Store Dragon Trait Associations
    00:40
  • Store Dragon Traits
    11:45
  • Verify Dragon Trait Storage
    08:10
  • Optional Challenge: Get Dragon with Traits Function
    00:45
  • Get Dragon With Traits | Part 1
    09:34
  • Get Dragon With Traits | Part 2
    12:46
  • Preview01:55

  • Preview | Feature 1. Create Dragons: React.js and Redux
    00:28
  • Optional: JS in Browsers, the DOM, and React and Virtual DOM Overview
    08:52
  • Set Up the React Frontend | Part 1
    05:52
  • Set Up the React Frontend | Part 2
    11:49
  • [Optional] Upgrade to Babel Version 7
    00:48
  • Generation Component
    09:43
  • Single Script to Start the Backend and Frontend
    00:58
  • React State and Generation Fetch | Part 1
    06:37
  • Backend Interlude: Cross-Origin Resource Sharing
    05:44
  • Optional: Same Origin Policy
    02:52
  • React State and Generation Fetch | Part 2
    06:54
  • Fetch New Generations on a Timer
    10:45
  • Optional Challenge: New Dragon
    00:33
  • New Dragon in React
    10:22
  • Dragon Avatar Component and React Props
    06:31
  • New Dragon Button and React Bootstrap
    06:17
  • Optional Challenge: Quick Styling
    00:49
  • Quick Styling
    04:20
  • Optional: Dragon Avatar Image | Note
    00:31
  • Optional: Dragon Avatar Image | Part 1
    08:41
  • Optional: Dragon Avatar Image | Part 2
    13:10
  • Redux Overview
    05:53
  • Redux in Dragonstack and the Generation Reducer
    06:58
  • Generation Action
    08:50
  • Generation Action Creator
    08:24
  • Redux Organization and Tools
    08:44
  • Connect Generation Component and MapStateToProps
    09:43
  • Generation Component and MapDispatchToProps
    09:54
  • Redux Thunk
    10:15
  • Updated Fetch Generation Action
    07:33
  • Updated Fetch Generation Reducer
    13:41
  • Fetch States
    08:13
  • Optional Challenge: Redux New Dragon
    00:26
  • New Dragon Redux Flow
    12:42
  • Connect the Dragon Componnet
    10:29
  • Preview01:28

  • Preview | Feature 2. Authentication and Accounts
    00:30
  • HTTP vs HTTPS and TLS Overview
    06:23
  • Optional Challenge: Account Table and Store Account
    00:38
  • Account Table
    02:28
  • Account Table Store Account
    04:26
  • Account API and New Account Request
    10:07
  • Note on Limiting the Dragon Per Generation
    00:32
  • Custom System Hash
    02:58
  • SHA256 and App Secret
    07:50
  • Hash Sensitive Information
    09:38
  • Avoid Account Duplication and Get Account
    11:20
  • Account Sessions
    06:24
  • Build the Session Class | Part 1
    08:29
  • Build the Session Class | Part 2
    10:21
  • Set a Session Cookie
    07:55
  • Shared Sessions and Set Session Helper | Part 1
    08:40
  • Update Session ID in the Account Table
    03:33
  • Shared Sessions and Set Session Helper | Part 2
    06:43
  • Log In | Part 1
    08:45
  • Log In | Part 2
    09:25
  • Log Out
    10:35

  • Preview | Feature 2. Authentication in React
    00:19
  • Root Component
    09:00
  • AuthForm Component | Part 1
    06:00
  • AuthForm Component | Part 2
    07:19
  • Account Reducer
    08:05
  • Sign Up Account Action
    08:32
  • Account in the Redux Store
    08:34
  • Display Errors and Render Based on the Account
    07:42
  • Log Out and Account Reducer
    03:36
  • Log Out Action and Fetch From Account
    12:03
  • Log Out Button
    05:45
  • Optional Challenge: Create the Account Log In Fetch Action
    00:24
  • Redux Log In
    06:01
  • Optional Challenge: Get Authenticated Request
    00:28
  • Get Authenticated Request
    06:24
  • Guard Rendering Behind Authenticated Check
    08:52
  • Optional Challenge: Hide the Initial Session Error
    00:28
  • Frontend Button Clicked to Hide Error in AuthForm
    04:36

  • Preview | Feature 2.5: Account Dragons
    00:26
  • Account Dragon Table
    05:12
  • Optional Challenge: Store Account Dragon
    00:24
  • Store Account Dragon
    06:32
  • Associate Account with New Dragons | Part 1
    08:19
  • Associate Account with New Dragons | Part 2
    10:20
  • Get Account Dragons
    05:32
  • Get Account Dragons Request
    06:00
  • Get Account Dragons With Traits
    05:39
  • Fetch Account Dragons
    07:06
  • Account Dragons Reducer
    05:08
  • Display Account Dragons Skeleton
    05:32
  • Account Dragon Rows
    06:08
  • React-Router
    09:05
  • Link Components and When to (Not) Use Anchor Tags
    06:33
  • Auth Routes: Redirects
    03:55
  • Auth Routes: Stateless Functional Components
    05:12
  • Auth Routes: Higher-Order Components
    06:00
  • Update Dragon Nickname
    07:43
  • Edit Dragon
    07:09
  • Fire Update Dragon Nickname
    08:09

  • Preview | Multi-Account Interactions and Beyond
    00:27
  • Multi-Acocunt Features Preview
    03:02
  • Account Balance and Info
    08:33
  • Account Info in React | Redux
    06:20
  • Account Info in React | UI
    04:35
  • Public and Sellable Dragons
    08:04
  • Update Dragon with Dynamic Queries
    12:58
  • Update Dragon in the API and UI
    09:29
  • Get Public Dragons
    08:23
  • Public Dragons Redux
    08:56
  • Public Dragons Page
    06:14
  • Public Dragon Rows
    04:14
  • Update Balance
    04:38
  • Optional Challenge: Get Dragon Account and Update Dragon Account
    00:28
  • Get Dragon Account and Update Dragon Account
    08:26
  • Buy Dragons Backend
    13:40
  • Test Buy Dragons
    03:48
  • React Buy Dragons
    10:58
  • Breeder Class and Making Baby Dragons
    07:04
  • Pick Trait
    15:31
  • Dragon Sire Value
    04:13
  • Update Sire Value in Account Dragon Row
    04:52
  • Mate Dragons Request
    13:24
  • Test Mate Dragons Request
    05:20
  • Sire Button
    04:37
  • Mating Options
    07:26
  • Optional Challenge: Send Mate Request
    00:49
  • Send Mate Request
    07:51

  • Limit Dragons per Generation
    07:57
  • Note on the Dragon Avatar Image
    00:08

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.

Description

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.


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.

Instructor

David Joseph Katz
Software Engineer
David Joseph Katz
  • 4.4 Instructor Rating
  • 25,794 Reviews
  • 242,538 Students
  • 19 Courses

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating the best practices he has learned at work, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.