Learn JavaScript: Full-Stack from Scratch

Start learning JavaScript in the browser console, store values with let, work with numbers and strings, and manipulate the page by updating document properties like title and background color.

learn how to define and call functions in JavaScript, use parameters and arguments to customize output, and create examples like greet and triple me with return values.

Learn how JavaScript arrays function as collections, create arrays of numbers, strings, or objects, and use built-in methods like push and splice, index access, and console logging.

Explore higher-order functions by accepting and returning functions, illustrated with create multiplier for each. Learn how maps and filters rely on the concept and distinguish returning vs mutating values.

Explore mutating versus returning in JavaScript arrays, using push to modify the original array and map or filter to create new values without mutation, with real pet data examples.

Build a to-do app by auto clearing the input, refocusing after submit, and deleting items. Explore data persistence challenges and how server-side storage with Node and MongoDB supports full-stack development.

Understand what a server is and why browsers cannot be trusted for sensitive actions, as servers handle requests, responses, and authentication. Learn how Node.js lets JavaScript run outside the browser.

Explore how Node.js extends JavaScript beyond the browser with file creation and network listening, then install the long term support version and verify with node -v in the interactive environment.

Set up a text editor, create a JavaScript file in a folder, and save your work. Run the file with node in the built-in VS Code terminal.

Build a basic Node server that listens on port 3000 and responds with hello world or welcome messages, routing by request URL to home or about.

Learn how to build a basic express web server with node to receive and validate form data, using npm install express and require to import express, an unopinionated minimalist framework.

Learn to build an express server from scratch, handle get and post requests, and process form data using request.body to validate user input.

Explore the request–response cycle and why MongoDB is the missing ingredient for full-stack JavaScript apps. Preview two projects—a to-do list with permanent storage and a social journal with real-time chat.

Explore how databases store and query data by previewing a sample pet database, then start building your own cloud MongoDB Atlas database to learn CRUD.

Install docker desktop and run docker-compose up to spin up a local MongoDB instance, then connect with MongoDB Compass using the provided connection string and view atlas cloud account screens.

Learn how crud (create, read, update, delete) drives database interactions in MongoDB Atlas, including creating databases and collections, inserting documents, querying, updating, and deleting records.

Learn to read data from a MongoDB collection in a node app using find and toArray, then render results with map and a template literal, for dynamic updates.

Edit a database item through an in-page interface and send the update to a node server with Axios, preparing for the MongoDB update in part two.

Update a database item by sending new text and its id from the client to a node server, then perform find one and update on items collection using MongoDB.

Intercept the create form submission with browser JavaScript, post with axios to create an item, and render it at end of the list using a template, without a page reload.

Master client-side rendering by moving html generation to the browser, sending the raw items array from the server, and rendering the list with the item template.

Add basic password protection with Express middleware so visitors authenticate before accessing the app, and sanitize inputs with sanitize-html to prevent malicious code.

Explore organizing code, unique data per user, and input validation as you upgrade from a simple to-do app to a full stack project with browser, server, database, and Express.

Run the finished product of the complex app with Docker Desktop and Docker Compose, then view it at localhost:8080 and inspect data with MongoDB Compass.

Learn how to organize an express app by creating a dedicated router file, exporting it with module.exports, and mounting it on the app to handle routes like / and /about.

Learn to organize an express app with a controllers folder, exporting functions for users, posts and follows, and route them via a dedicated router, illustrating the mvc pattern.

Explore the mvc pattern by building a user model as a constructor blueprint, validating form data through the model, and wiring express to parse request.body.

Add validation to user model by implementing a validate function, populating an errors array for blank fields, length checks, email validation with validator, alpha-numeric username rules, and controller error handling.

Connect to a MongoDB database once in a reusable db module, save validated user data into the users collection with insert one, and prepare for login.

Discover how promises replace traditional callbacks to manage unknown timing in JavaScript, learning to create and use resolve and reject, and chaining with then and catch.

Coordinate multiple asynchronous events with promises, moving beyond callbacks to then and catch for clearer, flatter code. Explore async/await and arrow functions for cleaner control flow and error handling.

Explore how sessions identify and trust subsequent requests by storing user data in req.session after login, using cookies to persist the session, and personalizing the home page.

Learn to implement a sign-out flow by destroying the user session via a /log out post route, then redirect to the home page for a seamless guest experience.

Learn to implement flash messages in an express app using session-based messages after failed logins. Display a one-time red error box for invalid username and password in the home page.

Learn to add user profile photos via Gravatar by hashing emails with MD5 to generate avatar URLs, display in the top-right menu and posts.

Enable logged in users to create posts by wiring a post model and controller to render create post template, with a reusable must be logged in middleware and header include.

Implement a durable author field for posts by storing the MongoDB object ID from the current session data, updating the post model and controller to use the user ID.

Learn to view a single post by id: async controller with try/catch, validate the id, fetch by id, and render the post template with title, date, and body.

Set up a 404 page for posts, then fetch a post’s author details using MongoDB's aggregate with $lookup to join posts and users and project the author username and gravatar.

Shape post objects by converting the author to a username and gravatar avatar using posts.map, while omitting sensitive fields and rendering dynamic author data in the user interface.

Learn to fetch posts by author id and render them in the author's profile view, wiring the post model, controller, and template to display a dynamic posts list.

Learn how to enable editing posts for their owners by implementing a visitor id, owner check, and conditional display of edit and delete options in templates and routes.

Create a dynamic edit post screen by routing /post/:id/edit, fetch and prefill post data, render an edit form with save updates, and handle errors with a 404 fallback.

Submit the edit form to post /post/{id}/edit, perform permission checks and validation, and use promise-based model update with flash messages on success or error.

Enforce owner-only access to the edit post screen, add back-to-post permalink, and protect routes with must be logged in. Redirect with dynamic post ID and enable markdown rendering for formatting.

Learn to let users delete their own posts by implementing a guarded delete flow with dynamic post ids, login checks, and a complete EJS route, controller, and model delete.

Build a live search interface with browser-side JavaScript, showing real-time results as users type, while organizing code into modules with main.js and search.js, using import/export, bundled by webpack and babel.

Learn to implement a browser-side search overlay with a JavaScript class, handling click events to open and close a full-screen search interface, and injecting HTML into the page.

Implement a live search by focusing the input when the overlay opens, showing a loader on typing, debouncing input, and sending an Axios post to /search with the search term.

Implement a backend post search by adding a /search route, linking controller and model, using MongoDB text index on title and body, sorting by text score, and removing author id.

Learn to power a live search by turning raw JSON post data into dynamic HTML, render results, and manage loader and results area with a 750 ms delay.

Explore front end HTML sanitization to prevent cross site scripting by using DomPurify, an extra defense when rendering user generated content, even if back end sanitization fails.

Enable following users by linking author names and avatars to profiles, adding a dynamic follow button and route, and wiring a follow model and controller with login checks.

Implement a follow feature by building a follow model with create, cleanup, and validate methods, inserting a document with author id and followed id into MongoDB.

Finish the user profile screen by adding a following route, updating the controller, and implementing a profile following view that lists who the user is following with dynamic navigation.

Fetch real post, follower, and following counts in parallel using Promise.all and array destructuring in shared profile data. Pass counts to the profile shared template for rendering.

Build a dynamic home feed that shows posts from followed users via a get feed function, async controller logic, and a MongoDB aggregation, including an empty feed message.

Learn to implement a chat feature's user experience: show a bottom-right chat box on icon click, inject HTML, toggle visibility, and prepare for real-time data with a first-open connection.

Learn to implement real-time chat with socket.io, sending messages from the client via frontend JavaScript and broadcasting them to all connected users.

Finish the chat feature by rendering server messages into a chat log with usernames and avatars, wired via socket.io and session data.

Finish the chat by using socket broadcast to exclude the sender and align messages to the right; include a welcome event with username and avatar and add sanitization.

Add real-time, browser-based validation to the registration form, while preserving server-side checks. Create a registration form module that injects live messages above fields and balances immediate and delayed checks.

Learn to implement client-side live username validation with immediate checks and delayed validation, including alphanumeric constraints, length limits, and dynamic error messages in a registration form.

Implement live form validation for registration by adding an email-existence check in the user model, enforcing email format, username rules, and password length to prevent submission until checks pass.