Applied Javascript By Building A Full-Stack Web App

Learn fundamental programming concepts while building a fully-featured multiplayer game with modern JavaScript!

What you'll learn

Learn modern JavaScript to solve real problems

Understand the fundamental concepts of web development

Develop a complete web application including backend and frontend

Build a REST API with NodeJS and Express

Create responsive web pages using React and NextJS

Upload your code to GitHub

Deploy your application to AWS

Requirements

No programming experience needed — I will explain everything you need

A computer where you can install software (Windows, Mac, Linux)

Description

I want to teach you JavaScript in the best way possible — by directly using it! Under my guidance, you will build a modern web application that will be an interactive guessing game. You will build a REST API with Node.js and create responsive web pages powered by React and Next.js. Along this journey, you will learn all the fundamental principles that real programmers use to solve problems.Practice makes perfectThroughout the course, there are numerous exercise points where you are invited to pause the video and tackle a challenge so that you can practise and retrain the things you already learned. The key ingredient in this course is you. But don’t worry, I will always walk you through my solution at the end of each exercise.The right tool for the jobJavaScript is the most popular programming language in the world, and for good reason — it is used in thousands of applications, such as backend servers, web pages and even desktop applications like the Slack messaging app. Knowing this programming language is a fantastic means to boost your career.Learning should be funProgramming fills me with joy. I aim to bring this passion with me when teaching my students. This course is exactly the kind that I would love to take myself — I make things fun and engaging.Have a problem? No problem!Errors are natural in programming. I will be in the Q&A section ready to take on your questions. Every lesson also comes with a transcript of the code changes; that way, you can also confirm your solution independently.Let’s get startedI am thrilled to have you here and I can’t wait to take you with me on this journey. See you in the course!- Rick

Overview

Section 1: Introduction and Set Up

Lecture 1 Course Overview

Lecture 2 Install Visual Studio Code

Lecture 3 Install Git Bash (only necessary on Windows)

Lecture 4 Install Node.js

Section 2: Command Line Application

Lecture 5 Setting up the project and writing our first JavaScript

Lecture 6 Introduction to variables

Lecture 7 Our first function

Lecture 8 Function Exercise

Lecture 9 Objects

Lecture 10 Add players using array .push()

Lecture 11 Array .pop()

Lecture 12 Add questions to our game

Lecture 13 Starting a round in our game

Lecture 14 Template strings

Lecture 15 Append to object properties

Lecture 16 if conditions and errors

Lecture 17 Completing makeGuess function

Lecture 18 JSON.stringify()

Lecture 19 Default imports and default exports

Lecture 20 Named export and named import

Lecture 21 Splitting the project into multiple files

Lecture 22 Import/export exercise

Lecture 23 Calculating round results step 1

Lecture 24 For loops

Lecture 25 Dynamically adding object properties

Lecture 26 Math.abs() to calculate guess differences

Lecture 27 Assign different points depending on exactness

Lecture 28 Dynamic offsets depending on question

Lecture 29 Setup of round 3

Lecture 30 Array .forEach()

Lecture 31 Object.keys() and Object.values()

Lecture 32 Calculating final results step 1

Lecture 33 Calculating final results step 2

Lecture 34 Installing third party libraries

Lecture 35 First use of async/await in a function

Lecture 36 Purpose of async/await

Lecture 37 Making our app interactive

Lecture 38 Allow interactive guesses — Exercise Prompt

Lecture 39 Allow interactive guesses — Exercise Solution

Lecture 40 Cleaning up

Lecture 41 Understand callbacks

Lecture 42 Turn callbacks into promises

Lecture 43 Introduction to JSON

Lecture 44 Reading files

Lecture 45 Reading files with promises

Lecture 46 Parsing JSON

Lecture 47 Section outro for the command line app

Section 3: Backend

Lecture 48 Backend section intro

Lecture 49 What is a network request?

Lecture 50 Installing Postman

Lecture 51 Set up of new backend module

Lecture 52 Create our first server

Lecture 53 Express documentation

Lecture 54 Modern import syntax

Lecture 55 Named exports with modern syntax

Lecture 56 State handler

Lecture 57 Endpoint to get players

Lecture 58 Endpoint to add players step 1

Lecture 59 Modify game state from add player endpoint

Lecture 60 Find specific elements with .find()

Lecture 61 Returning HTTP errors

Lecture 62 Logging network traffic

Lecture 63 Endpoint to start a new round

Lecture 64 Unique IDs via UUID

Lecture 65 New round endpoint to forward a question

Lecture 66 Select random element of an array

Lecture 67 Selecting a random question

Lecture 68 Filtering array elements with .filter()

Lecture 69 Using .filter() in our endpoint

Lecture 70 Send Gone status code when questions run out

Lecture 71 Handling request input

Lecture 72 Exploring falsy values

Lecture 73 Accessing last item in an array

Lecture 74 Get current round endpoint

Lecture 75 Start of endpoint to get current round answers

Lecture 76 Hard-coding game state to simplify testing

Lecture 77 Matching question and round using .find()

Lecture 78 Using the OR operator to set default values

Lecture 79 Calculating guess difference with Math.abs()

Lecture 80 Array .sort()

Lecture 81 Calculating points per guess step 1

Lecture 82 Calculating points per guess step 2

Lecture 83 Update points for each player

Lecture 84 Sorting the final score

Lecture 85 Demo of finished backend

Section 4: Frontend

Lecture 86 Frontend section intro

Lecture 87 What is HTML?

Lecture 88 Setting up our Next.js web app

Lecture 89 Editing our first component

Lecture 90 Using variables in JSX

Lecture 91 Applying a custom CSS style

Lecture 92 Create a new array from another array using .map()

Lecture 93 Generating a list of JSX elements with .map()

Lecture 94 Hard-code game state for testing

Lecture 95 Adding CORS

Lecture 96 Making network requests to our backend with axios

Lecture 97 Reactive variables

Lecture 98 useEffect to only run actions once

Lecture 99 Unique key props on list items

Lecture 100 Setting up a new page and route

Lecture 101 Handling button presses

Lecture 102 Pass a new player from frontend to backend

Lecture 103 Ternary operator

Lecture 104 Success and error messages

Lecture 105 Dynamically hide JSX elements

Lecture 106 Backend polling with setInterval()

Lecture 107 Start game button

Lecture 108 Set up game page and route

Lecture 109 Backend modifications to always start a new round

Lecture 110 Starting a new round on every page render

Lecture 111 Add useEffect() to initiate a call on every render

Lecture 112 Setting up client page and route

Lecture 113 Text input and submit guess button on client page

Lecture 114 Send player guess to backend

Lecture 115 Setting cookies

Lecture 116 Reading cookies

Lecture 117 Polling to check for round start

Lecture 118 Page redirects using Next.js router

Lecture 119 useEffect teardown functions

Lecture 120 Game page countdown

Lecture 121 Dynamically remove text on countdown

Lecture 122 Hard-coding game state to test game page

Lecture 123 Retrieve answers on round finish

Lecture 124 Return JSX from other functions

Lecture 125 Display final results Exercise Prompt

Lecture 126 Display final results Exercise Solution

Lecture 127 Display round answer

Lecture 128 Triggering page refresh

Lecture 129 Create game over page

Lecture 130 Redirect to game over page when game finishes

Lecture 131 Adding images

Lecture 132 Clean up

Lecture 133 Dynamically hide inputs on client page

Lecture 134 Trigger page refresh when game starts

Lecture 135 Demo of our final game — well done!

Section 5: Deployment

Lecture 136 Deployment Section Intro

Lecture 137 Dynamic URLs via environment variables

Lecture 138 Export Next.js app to static HTML

Lecture 139 Statically serve HTML files in backend

Lecture 140 Handler to reset game state

Lecture 141 Install git (only necessary on Mac)

Lecture 142 Create GitHub repository

Lecture 143 Set up SSH key

Lecture 144 Upload code to GitHub

Lecture 145 Generate GitHub token

Lecture 146 Sign up to AWS

Lecture 147 Launch a rented AWS computer via EC2

Lecture 148 Deploying our game to AWS

Lecture 149 AWS clean up

Section 6: Outro/Goodbye

Lecture 150 Goodbye and Thank You!

Beginners who want to start programming with JavaScript