Applied Javascript By Building A Full-Stack Web App
Published 4/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 25.36 GB | Duration: 20h 15m
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
Homepage
Thank you Kane! -Cindy Lorena Sanchez Sua
