The Complete Full-Stack JavaScript Course

Create a React component by exporting a default class that extends Component and renders JSX. Mount it in index.js, use a render method, and manage elements with a wrapping div.

Learn the React component life-cycle, from constructor and mounting to updating, explaining how props and state trigger renders, with examples of componentWillMount, componentDidMount, componentWillReceiveProps, componentWillUpdate, and componentDidUpdate.

Learn to manage React component state with this.state and setState, handle clicks with onClick, render count, and use componentDidUpdate for safe, efficient updates.

Embed and manage React component props and re-rendering by building a high score component, passing props, handling onClick events, and conditionally rendering content.

Learn how to use CSS in React by creating a CSS folder with style.css, importing it into the app, and styling a button before building a calculator.

Build a calculator in React from setup to a four-by-five grid of buttons and an input showing the current equation, using a buttons array and state for current and previous.

Finish a React calculator by wiring button symbols to actions with state and props, style with CSS, handle input, and perform calculation.

Learn to build a five-page React site with home, about us, services, contact, and a fifth page using React Router, components, forms, and Bootstrap, starting from Create React App.

Learn to structure a React app by building a page wrapper that renders children, convert class to className, and assemble nav and home components with assets.

Learn to set up React Router with BrowserRouter, Route, and Link from react-router-dom to build navigable pages like home and about, replacing anchor tags.

Explore route parameters and rendering strategies in routes, using render props, path matching with exact routing, and building a shared header component across pages.

Learn to attach a header background image in a React app by passing image props, using inline styles and conditional rendering, and correctly importing assets.

Build reusable React components for services and portfolio pages, including a single service item, data-driven rendering with map, and props for title, description, and icon.

Set up imports and components, build a portfolio array with title, subtitle, and image, and render portfolio items by mapping the array into portfolio item components with props under the services section.

Build a contact form in a React class component, wiring inputs to state with onChange handlers and using setState to store name, email, phone, and message for live updates.

Learn to build reusable form fields in React by creating a common field component, mapping inputs, managing state with onChange, and handling form submission.

Learn to implement form handling in React with Formik, including setting default values, validation, and submit handling with a withFormik wrapper that tracks values, touched, and errors.

Learn to build Yup validation schemas for a Formik form, defining name, email, phone, and message constraints with required, min, max, and custom error messages.

Set up a LoopBackJS REST API with MongoDB, test with the explorer, and explore models, data sources, and ACL concepts.

Define a profile model for a social network using loop back, including fields like first name, last name, birth date, age, and history, and expose rest endpoints.

Learn to implement object observers in loopback js by hooking into model events such as after save, and automatically create related profiles when a user is created.

Relate a custom user model to profiles by subclassing the user, defining has many and belongs to relations, and test via the api, including related profiles.

Explore loopback data handling by using persisted models to create, find, and auto-create a user on startup, hashing passwords and generating access tokens for login.

Subclass the access token model and inherit all parent attributes. Define a has-many relation from user to custom access tokens and a belongs-to relation from the token to the user.

connect your api to a mongodb instance using the loopback mongodb connector, configure the data source with host localhost, port 27017, and database my web site.

Explore how to create data in a Node.js environment by manipulating a profile model using create, upsert, and find-or-create methods, with live examples in a server test script.

Update data in the complete full-stack JavaScript course by using profile.updateAttributes to modify specific attributes like email with a callback, then save with profile.save to persist them.

Learn to create sample user data, save it, and use find and find one with a where filter, order, limit, and include to fetch related profiles, posts, and images.

Learn to filter data using skip, limit, and fields options, returning only emails or specific fields, and find records by id to retrieve precise results.

Learn three ways to delete data: destroy a specific object, destroy all matching a filter, and destroy by ID. Explore destroying related data by including posts and filtering by date.

Create a post collection with title, slug, content via a wysiwyg editor, and created in MongoDB; connect posts to users and profiles through belongs-to relations and prepare for role-based permissions next.

Create an admin role and map it to the first user during server startup using role mapping on the backend.

Lock down the post routes with lb acl, deny write access to all users, then grant admins and editors the ability to create, edit, and manage posts.

Create an editor role on the server if missing, apply ACL to the post model, and grant editors the right to create and write posts alongside admins.

Create a category model with title, slug, and created_at, implement has many posts and a post belongs to a category, configure acls, and build a slug-based category page including posts.

Learn how to implement file upload support by configuring a file system storage data source, creating a post image collection, and linking it to posts and users with ACLs.

Learn how to model post images as a separate image file collection, link them to posts and users, and expose a post images upload endpoint with ACLs and remote methods.

Create a custom endpoint to upload post image, save it to an image file collection on the file system, and generate a full-size banner plus a 100x100 thumbnail with sharp.

Implement a custom upload method, resize images with sharp, and store uploads via an API route. Create file info, generate a thumbnail, and link images to posts and users.

Create login and signup routes in a React app and connect them to the API with redux; build an admin wrapper and a formik login with email and password.

Build a Bootstrap-based login form by mapping fields, handling change and blur with validation, wiring submit, and style it with custom csx for a polished admin page.

Introduce Redux and React-Redux to connect React apps to an API, wrapping components, mapping state to props and dispatch to props, and setting up a store with a provider.

Create actions and wire them to components: define a log in function returning a type and payload, and dispatch it via mapDispatchToProps using email and password.

Create an off reducer with a default state and login action, then combine reducers and wire the store to the app with provider to manage user token.

Set up a backend folder, run MongoDB, start the API and app, and implement a Redux-connected login flow with an Axios-based API wrapper for the admin dashboard.

Learn to integrate redux thunk by installing redux thunk and applying middleware to the store, and implement login actions to store the token and user id for subsequent API calls.

Build a React dashboard with Material UI, including an app bar, toolbar, a collapsible sidebar drawer, and table views for posts and users, with login and admin wrapper workflows.

Install material-ui icons and import drawer components, then configure a drawer with an app bar and icon button to open it, and style with withStyles for a 240px width.

Learn to implement a collapsible drawer with animated open and close, using a chevron left icon, divider, and theme transitions for app bar width and margin.

Build a reusable sidebar in React using Material-UI components, icons, and routed links to admin, posts, and users, with hover and ripple effects.

Set up main content area in a React admin interface, wrap routes in a styled main container, configure dashboard, users, and posts, and prepare a Material UI table for data.

Learn to persist a redux store using redux-persist and localStorage, so tokens survive page refreshes by wrapping the app with PersistGate and configuring a persisted reducer.

Create a reusable Material UI table view for users and posts, with paper wrappers and dynamic columns and rows mapped from props.

Create an admin Redux flow by building admin reducer and actions, fetch users and posts with a token via API, and connect components to render admin data in a table.

learn to add a bottom-right Material UI fab on the posts page, link it to an admin add route, and set up the ad post page and basic form groundwork.

Learn to build an add post page using redux, material-ui and formik, wiring form controls, paper layout, yup validations, and submit handling with mapStateToProps and mapDispatchToProps for server interactions.

Build a post creation form with Formik and Material UI, using the formic material fields library for automatic field handling, apply Yup validation, and generate a slug from the title.

Create a two-column flex post form (left and right) wrapped in paper and connect the fields to redux, implementing a post add action that calls an API and updates posts.

Connect the post form to the database using Redux and React Router, implement redirects to admin/posts/edit, and handle adding posts via the API.

Learn how to edit existing posts by retrieving a single post via ID, updating it through redux actions and a patch API call, and reflecting changes in the admin interface.

Integrate a rich text editor (Quill) and image uploads into the post editor, connecting a Redux-based upload button to the post images API using token, post id, and user id.

Learn to upload post images in a full-stack JavaScript app by wiring the admin reducer, API endpoints, and front-end to handle post image arrays.

Integrate the quill rich text editor into a react app, configure the toolbar and formats, enable image uploads, and adjust backend limits to embed content in posts.

Load posts on the frontend by wiring redux actions to fetch posts in batches using a skip parameter. Render a blog page with routes and manage post data.

Learn to load and display blog posts on the front end by mapping site posts to blog items, handling post images, and wiring routes to single post pages.

implement load more on demand by retrieving the post count, loading five posts per request, and appending new posts based on the current skip value and loaded length.

Load a single post page by extracting the slug from the URL, fetch the post via the API with redux, and render its title, image, and content.

Learn to implement a sign up flow by adding a sign up route and form with name, email, and password confirmation, validate with yup, and register via API then auto-login.

create a comment form and a redux-connected comment builder to post comments via the api. define model relations and acl s for posts and comments to enable authenticated interactions.

Implement posting comments and relate them to posts using ACLs and owner-based permissions. Include comment profiles in API responses and update the frontend state after authentication with tokens.

Learn how to deploy a full-stack react app with nginx, configure development and production environments, build the app, and serve the build via nginx while connecting to a hosted API.

Deploy a demo api with pm2 and nginx, configure mongodb auth, and implement an nginx upstream to load balance between two local hosts.

Deploy your API with PM2 and NGINX by configuring an apps.json for clustered instances behind a NGINX upstream, setting environment ports, and tuning max_old_space_size for node RAM.

Balance traffic with Nginx and PM2 by running multiple API instances across ports 880 and 881, then deploy the React app and API via Git and PM2.

Build a modern chat app using web sockets and React, with loop back as an api to scaffold the database and set up routes, redux, and chat components.

Create a redux based store with actions and reducers using combineReducers, configure thunk and redux-persist for persistence, and connect components via mapStateToProps and mapDispatchToProps.

Configure a chat WebSocket by wiring a chat reducer with default state, creating chat actions to set up a socket, and connecting the app to a local host server.

Build a chat server using WebSocket to send socket messages, define thread and message models with a persisted data source, and enable real-time bi-directional communication across multiple clients.

Build a user authentication flow with sign up and login forms linked by routes, using redux and react-router, and submit credentials via socket to create and authenticate users.

Build a registration flow with name, username, email, and password fields, validate inputs on submit, apply thoughtful styling, and handle server-side user and profile creation along with login tokens.

Fix login flow by updating the user model to accept email and password, obtaining a session token and profile, and storing it via the author reducer for socket-based chat messaging.

Import auth actions and handle socket messages to set the token on login. Dispatch login and logout actions and redirect routes when a token exists.

Master building a two-column messenger interface with a left sidebar and chat area, styling a basic messenger layout using React, Redux, and React Router.

Track connected users with a chat server clients array, storing each user’s id, email, and websocket instance; push on login to enable messages across all devices sharing the same id.

Create a search form in the chat app and wire an input to state. Emit a search event via the socket and render got users results from the server.

Create and manage chat threads between two users in a full-stack JavaScript app. Find or create threads on the server, and push updates to relevant clients via WebSocket.

Enable automatic socket connection on page load, load the selected thread by ID, and fetch the last messages to render in the thread view.

This lecture explains how the chat server initializes and sends initial threads to a user on login or websocket connection, handling multiple threads and ensuring correct thread lists.

Assign a unique id to each web socket connection using user id and timestamp, and manage closed connections to broadcast messages to all devices on the same account.

Adding and sending messages in a thread-based chat app is demonstrated by linking messages to threads and users, loading recent messages, and broadcasting to relevant clients via the chat server.

Create a new message component and render thread messages client-side by mapping each message. Differentiate sent and received messages with left-right chat bubbles and avatars.

Render messages with user profiles by auto-scrolling the chat view to the bottom on new messages, and fetch thread profiles on the server for names and avatars via Bootstrap tooltips.

Ejecting a React application enables you to modify the webpack configuration when needed. Learn when to eject, understand the permanence, and manage loaders and environment variables for full-stack JavaScript projects.