NodeJs React Rest Summer Special 2020

Set up a fresh Ubuntu system, update packages, and install node and npm. Create /var/www, move node into a folder, link binaries to the system, and verify versions.

Create a new Nginx site configuration in sites-available, then enable it by symlinking into sites-enabled. Remove the default config and prepare to start Nginx.

Set up a barebones server configuration with server blocks, redirects to https, and certificate handling using Let's Encrypt, preparing directories and testing with engine X.

Learn how to set up a Let's Encrypt certificate on Ubuntu, including stopping port 80, running a standalone server, and managing certificates in live and archive folders.

Set up the development environment by creating a project directory, initializing npm, and installing parcel, babel, and react to compile front-end code for serving from a dist directory.

Set up a React project structure by creating directories for components and fonts, add an index and master files, configure Babel, and scaffold app.js to start building with styled components.

Set up a Node.js and React project by organizing files, configuring parcel and babel, wiring fonts (including Google fonts), and routing unknown paths to React with hot module reload.

Debug React one-to-one by ensuring a return in components. Launch the first React app with hot module reload, watch parcel rebuilds, and start developing the frontend for project number one.

Create the frontend app skeleton by building nav and sidebar components, styling with styled components, and wiring an app provider (the brain) using React context and hooks.

Wire the brain into the app by wrapping the main application with the app provider and app context, enabling child components to access context values and prep for react router.

Build a styled state component to visualize the app context, import it into the app provider, and render the state to display the whole app context.

Learn to visualize the app state with the react json view component, access it via the context hook, and wire a global key listener to open a collapsible display.

Hook up a key listener with useEffect to listen for key up and escape keys on the window, log events, and toggle a fly state with a cleanup function.

learn to implement a toggle state utility in a react frontend app by copying a state object, toggling a specific key, and applying dynamic class names to reflect display state.

Set up a grid-based frontend layout with left and right sections, a 320-pixel column, and the remaining space; import a navigation bar, and style the main area purple.

Master a frontend header layout with flex to align a left logo and nav text, load the logo from an images folder served by Nginx, and adjust padding and margins.

Set up a left sidebar and content area with a grid, create an initial feed component, and wire routing to toggle home and login views in React.

Install dependencies, start the app, and wire react router dom to route between feed and authentication, with a routes file mapping the home path to feed.

Demonstrates wiring a React frontend with login and register routes to a shared authentication display, introduces hooks and app context, and applies global styling.

Build a navigational header with home, log in, and register links using react-router-dom Link and NavLink, style anchors, and apply a flex row filler for layout.

Demonstrates creating a reusable master content page pattern with a speckled data-image background, applied via class names and trickle-down props to feed and auth components.

Use a single authentication component to render login or registration forms based on the route path, with the location prop guiding the form and routing logic.

Build two reusable components (button and text field) with styled components, integrate them into the authentication flow, and implement open id login with Facebook and Twitter icons.

Create a padded login form section with a reusable text field component and a login button wired to the handle log function, then test the on-click alert.

Build and style a reusable text field component for a login form by wiring props, label, role, and on change, then render and style the input for accessibility and layout.

Create and implement a custom React hook for form inputs that tracks user and password state using an input change handler, enabling live data capture for login and registration forms.

Split the page into a left image panel and a right author registration form using a two-column grid (320px each) and styled components to create the header and form skeleton.

Learn to style and structure a frontend authentication interface with a two-panel login and registration form, using flex layouts, spans, and shared components, including data handling and client-side validation.

Create a custom hook useFetch to connect the front end to the back end with axios, integrating into the authentication form and handling loading, response, and error.

Learn to install and configure MongoDB on Ubuntu, create an admin user with roles, enable authorization, set the bind address for remote access, and verify connectivity with Robo 3T.

Separate the front end from the back end, set up a node-based back-end structure with utilities, Mongo integration, and rest endpoints to support a mongo-backed api.

Generate public and private keys for token authentication, set up a config object for Let's Encrypt and paths, and export modules to support a Node.js Express REST API.

Set up json web tokens for secure routes by generating public and private keys with openssl. Outline jwt payloads and scaffold a backend with mongo connection details and expiry settings.

Explore the security design for a Node.js backend by creating and validating jwt claims, handling tokens with expiration and verification options, and building supporting utility functions.

Create a node rest server, install and import express and body parser, and set up a mongo file to test a database connection while running the server with node rest.

set up a node.js backend by wiring mongodb through mongoClient and installing packages. configure the api with a new database and logging to verify the mongo connection.

Set up a Node.js rest server with express, connect to mongo, use tls with a key and certificate, implement cors headers and body-parser, and test on port 1300.

Build a front-end login flow and connect to a back-end post route, using base64 payloads, fetch or axios, and useEffect to handle responses and tokens.

Fix empty payloads by wiring json body parsing in an express route, then seed a user in the users collection and enable authentication with base64 password decoding and token creation.

Create an asynchronous authenticate user function in Mongo module to process rest api login payloads, decode base64 credentials, and find a user with findOne, exporting and handling errors with try-catch.

Explain how to verify a user's password with bcrypt, compare it to a stored hash, and generate a JWT with user claims and scopes.

Track a login flow by generating an access token and user profile through a REST API, returning them in a 200 response, and preparing client-side handling of the data.

Create a user provider with context, useState, and useReducer to manage user data and loading state, wrap the app, and enable authorized actions with dispatch.

Build a custom provider with a dispatch function to set authorized state and manage JWT tokens using a local storage hook.

Export user and set jwt function, dispatch auth, then update the local store and app context to mark is logged in with an authorized user and access token.

Verify jwt tokens stored in local storage with a verify route and useEffect to auto sign in on changes, then fetch with a bearer header to validate the user.

Implement JWT verification in a full stack flow by extracting the token from the authorization header, verifying it with a public key, and handling tampering before data fetch.

Authenticate users by decoding a base64 encoded jwt payload after a custom 702 verification code, extract the user object, and push to the profile route using history.

Learn to handle invalid tokens and server errors in a fetch flow by inspecting the error response and data code, and update the local store and JWT state accordingly.

Implement login and logout using user and app contexts to manage JWTs and authorized state, dispatch reducers, update stores, route to the profile page, and handle loading and error states.

Investigate handling login errors with a custom error array, render messages in React, and build a complete authentication flow from login to MongoDB insertOne for registration.

Seed a database by adding three users and generating fake articles with mockery, using object IDs and the mongo import command to populate the database.

Set up profiles and images, create a profiles folder, and test logging in as multiple users via a sidebar profile user interface to verify correct user data.

Build a dynamic sidebar profile component in a react app using usecontext to access the user object, conditionally render when logged in, and enable routing to the profile page.

Create a user profile sidebar by linking to the profile, rendering a profile image, and showing city and state with a location icon; apply flexbox styles for alignment.

Set up a sidebar profile layout, tune colors and padding to blend backgrounds, configure fonts and icons, and prototype a profile page with log out and the next video.

Test logins for three user profiles, then build a React profile component and set up routing to render a dynamic profile page based on the user alias.

Style the profile page with a three-column grid (left, center, right), set margins, apply a master content class, and prepare for posts and the feed once logged in.

Explore building a React feed UI by wiring useState, useEffect, and useContext, styling with styled components, and fetching articles from the backend to populate a feed.

Set up a backend call to fetch the latest articles using useEffect and a custom fetch hook, with options for 10 articles, skip 0, sorted by created date descending.

Set up a front-end to post to the back end and fetch articles from Mongo, using a rest route with limit, skip, and sort to retrieve and count articles.

Build a MongoDB aggregation pipeline with stages like match and project, use skip and limit for paging, and return both the document list and total count for a REST API.

Refactor the REST API to return a formatted object with a count and docs under a dynamic articles key, then send the object to the client and verify the response.

Learn how to process backend responses in a feed by fetching articles, extracting authors and tags, and updating local state with counts and authors lists using app context.

Set up and visualize authors and tags in the UI by implementing a tag box, counts, and navigation arrows, then refine spacing, borders, and icons for the next steps.

Loop through each article's tags, deduplicate to a tag list, render tag links to tag pages via slug paths, and layout a two-column grid with left tags and right articles.

Loop through articles to collect new author profiles, update tags, and post a payload of new authors to the server once all articles have been processed.

Learn to fetch and sanitize author data from Mongo using a REST API, map arrays to object IDs, remove sensitive fields, and return projected author documents to the client.

Learn to debug api responses, manage authors as a keyed object in app context, and merge new data into state for efficient rendering.

Build and render a feed of articles with author relationships in a React client, iterating over articles and authors, using unique IDs for keys, and slug-based routes for article details.

Style a right-side feed of article titles with a 1-pixel solid border and overflow scrolling, using padding, height, and flexbox to align and size titles and keep anchors clickable.

Build an author info bar by loading author profiles into a global state and linking article cards to each author's name, avatar, and profile.

Style a feed article info bar with padding and color, and add heart SVG icons. Implement reactive, conditional logic to show elements based on user interaction.

Learn to implement login flows, render article icons on the home feed, and add interactive like and unlike actions with hover cues, routing, and basic backend calls.

Show an edit link in the feed only when the current user id matches the article author id, using rest api get routes.

Build and test rest routes in a node js app using mongo, handling get and post for article and user IDs, while logging route parameters to verify behavior.

Implement a Mongo update document function for articles to add likes with addToSet, including user id and timestamp, and verify updates via the modified count.

Implement a post creation flow by adding a form text area and a create post component, wire routes for create post and article, and manage user input with hooks.

learn to build a create post form with title, description and tags, including a textarea, on-change handling, and POST data integration, plus styling in a profile page layout.

Create a post form and submit handler that uses the profile context to build a post payload with title, body, tags, and description for server submission.

Align the create post button to the right with flex, add icons for actions (microphone, camera, image, attachment), and apply padding to prepare posts for server submission and article retrieval.

Collect form data and build a payload with title, body, slug, tags, and author id, then post to the server via the articles post new route.

Explore building a server-side posting workflow: send article payloads to a rest api, insert documents into Mongo, handle tokens, and prepare for route protection and editing.

Implement article routing in a react app using useEffect and slug parameters, connecting article, edit article, and tag components to fetch data, and cover login and registration workflows.

Set up a fresh Ubuntu server, install nginx, and configure /var/www with sites-available and sites-enabled. Generate a Let's Encrypt SSL, enable the site, and test the server.

Set up the node and react development environment for a nodejs react rest project by creating frontend and backend directories, linking npm commands, and initializing package files.

Set up a React project with parcel and babel, install plugins, configure babel, and create a starter folder structure (src, components, csx, fonts, index.html) for a React app.

Install MongoDB on Ubuntu, create an admin user, enable authorization, configure remote access by binding to an external IP, restart the service, and test a connection.

Set up the full stack by separating front end from back end, create initial files, configure parcel and npm, and render a hello world with styled components and google fonts.

Learn to set up a blog framework with React routing using hook Crowder, install via npm, route the dashboard to a create blog page, and wire the app.

Build a full screen app layout with a nav and a sidebar, style for responsiveness, and wire up a hook-based router with dashboard and blog routes and rest api groundwork.

Configure the roots router in the main app to route between the dashboard and blogs, by creating dashboard and blogs components and wiring routes with navigate and route result.

Create the blog component and establish routing for the create blog page with three routes, test navigation via the sidebar, and validate programmatic routing.

Set up a reusable board view for the blogs REST API by applying universal and master styling, with a board split view, debugger, and actions for API-based forms.

Explore managing local state in a React app with a custom useInputChange hook, install required dependencies, and implement login, register, and update user forms with clearable inputs.

build and switch between two debugger panels in a react-based app by wiring state objects to show users, roles, messages, and blog-related forms within a reactive view.

Design and test a REST API driven login and registration UI with two components—the blog login form and the blog registration form—using axles directly and props for form data.

Implement a logout flow in a React app, clear JWT from local stores, and render a dynamic messages board by mapping code groups and their messages using flex layouts.

Build and refine a blog login form using a form title, email and password inputs, refs, and a submit handler with prevent default, loading state, and localStorage JWT checks.

Learn to collect form data in a React app, post it with axios, handle JWT-based responses, store tokens locally, and manage errors while clearing forms.

Finish a blog registration form by wiring inputs for name, email, password, and password confirmation, handling submit with prevent default, and toggling disable state during loading.

Validate passwords match, manage form data, and post to api auth register with axios, using interface messages and jwt storage to handle backend errors.

Move from front end to back end by setting up an express server with Morgan, body-parser, cookie-parser, and cors, and define routes for blogs, auth, and profiles.

Create a notes file for public private keys, set up a key certs directory, and generate a 2048-bit RSA key pair with OpenSSL, then derive the public key.

Learn to configure a node.js backend with jwt and public-private keys, set up tls with Let's Encrypt, export keys and system config, install dependencies, and start the server.

Create and organize the backend by adding middleware and a validator for login and registration, set up express and routes, install required packages, and implement global error handling.

Apply express validator to build server-side validation middleware for registration and login. Validate username, alias, email, and password, return errors as an array with custom codes.

Set up a Mongo module, install the official Mongo npm package, and connect the Mongo client to the database to verify the connection and prepare a user for login.

Create a MongoDB database and a users collection, insert a test user with an encrypted password, and prepare authentication logic with validation.

Demonstrates testing data flow to the server, decoding base64 payloads, validating users with mongo, and generating a jwt with user and scopes for secure access.

Implement a node js rest auth flow validating a user object and jwt, returning 200 with user data on success and 401 on failed authentication, with route testing.

Explore building a robust registration workflow in a Node.js and MongoDB app: implement server-side and client-side validation, register user logic, bcrypt password hashing, and JWT token issuance for new users.

Restore the triple equals, continue building the blogs and provider flow in a Node.js React REST project, and tackle JWT handling for upcoming videos.

Use two useEffect hooks to check local storage for a JWT, verify new tokens, and manage a loading state during login or registration.

Validate a local storage token by sending it in an authorization bearer header to a route, using axios and express middleware for JWT validation; handle offline servers and prevent crashes.

Learn how to extract and verify a bearer token from request headers, decode a JWT, and fetch a fresh user from Mongo to secure a REST API.

Build a reusable function to find a user document by object id in the users collection, using the decoded token, and query MongoDB. Verify tokens and return fresh user data.

Learn root-level handling of invalid and expired JWT tokens with switch logic, logging, and a kill signal to protect routes; validate and refresh tokens on login when the database changes.

Validate fresh JWT tokens on login, manage loading and local storage, and purge invalid tokens while verifying access via server routes.

Register a Snoopy user with admin rules, log in to verify access tokens and validity, refresh tokens, and prepare to build profile forms and further features.

Build the profile form and user admin form, set up a protected route for the admin area, and prepare blog-related components within the prebuilt system.

Build and integrate a blog profile component with React hooks and styled components; manage props and JWT-based user data, and plan migration to a global app provider context.

Build a React profile section for a blog with conditional rendering of a profile image and a placeholder, wrapped in a fragment and styled with padding and border.

Build a React profile form that initializes from a fake profile, uses controlled inputs for name, alias, and email, and updates the profile container on login.

Set up a file pond wrapper for form uploads, install and register filepond plugins with react, and configure labels, JWT headers, and upload flow controls.

Set up user profile image handling with JWT authentication, route wiring, and a changing image path parameter to force re-render after uploads.

Build a dynamic file upload component with props, configure custom headers (including jwt), and handle server responses and errors for a profile image upload in a nodejs react rest workflow.

Build a server-side profile image upload workflow with express and jwt validation; validate headers, configure image storage, and update the user document in Mongo with the image path.

Switch the extension function to get extension and validate image uploads across servers, then style and render the profile image by updating Mongo with the image path.

Create a FilePond-based image upload component supporting single and multiple uploads, with server routes and Mongo-backed profile updates secured by JWT validation.

Master updating profile form data with controlled components and a fake input object; learn to validate and submit updates to the server using axios and custom headers.

Update user data in a Node.js React REST app by extracting a user id from a custom header, updating name, alias, and email in Mongo, with admin‑controlled user lists.

Builds a user admin form inside a blog admin interface using React components, props, and logout logic. Enforces admin-only access with token signal and prepares categories and tags forms.

Implement security checks, automatically log out on error codes six or one, manage JWT tokens, fetch users via API, and update the user list as roles change.

Create a route for protected endpoints on the backend, add a validator middleware and a grant system access middleware using two files, coordinating with the front end.

Implement token-based middleware to grant system access for admins, fetch system users from Mongo with a get collection utility, and debug the authorized routes to ensure proper responses.

Debug a node app by handling 4xx responses, using system roots, logging errors, refreshing expired tokens, and ensuring user data and success messages load correctly.

Debug and refine a Node.js React app by instrumenting console logs, inspecting network responses and data objects, validating error handling, and fine-tuning server routes to prevent ugly ui errors.

Build a dynamic form in a NodeJs React Rest project by looping over users to populate a select and handle selected user and handle submit.

Explore how to manage admin user updates in a React and Node.js app: populate user data with useEffect, handle form submissions, enforce JWT-based access, and synchronize updated user lists.

Set up a client side categories form and a server side categories route, enforce admin access, install utilities, and prepare categories and tags handling for a blog system.

Create and update a categories collection in a node js react app by building a client form that submits a comma separated list via a get request with jwt headers.

Convert the category object into slugged category objects with lower-case slugs and empty tags, then update the site categories in MongoDB using addToSet and return the updated list.

Use useEffect to fetch categories with getCategories via the API route, populate the master categories list on startup, and render selectable category buttons.

Build a React category tag interface that lists categories as selectable chips, with a kill-switch X to remove selections and stop propagation to avoid unwanted clicks.

Learn to implement delete category flow with selection reset, refreshing the categories via a protected rest api using jwt and axios.

Set up two new routes to manage category tags, implement a client tags form, and enable admin workflows to update categories when tags change, with JWT-based tests.

Explore building a form to add and update nested category tags in a MongoDB database using node and axios, including comma separated tag parsing and element matching for targeted updates.

Learn to implement a client-side tag system that derives tags from selected categories, updates dynamically with use effect, and resets tags when categories change or are removed.

Select and manage category tags, add or remove them from a selected tags list, and prepare a blog creation flow using these tags.

Implement removing a tag from a category in a Node.js React REST app; wire the frontend delete with JWT and update the Mongo backend using element match to reflect changes.

Implement a blog creation flow by wiring a create blog page to backend routes, manage tags and categories, and set up express router with file system and JWT considerations.

Learn to validate selected tags and categories, join tag arrays, and navigate to a create blog route with query parameters including category, tags, and JWT to enable seamless blogging workflows.

Set up and enhance the create blog page by wiring React hooks for data access and navigation, and integrate the react-draft-wysiwyg editor with draft-js, and install required dependencies with npm.

Build a blog management interface in React by defining state for user, blog id, category, tags, title, and description, then assemble a skeleton with board grid and a single form.

Learn to extract URL parameters from window.location.search, convert them into a key-value object, and populate state (category, tags, jwt) with a use effect on blog creation.

Use useEffect to monitor a JWT, send the token in headers for server verification, decode the token to extract the user, and populate the user data for blog creation.

Iterate over messages to render a messages section with a message row for each item. Color code indicators set red when code is less than 700 and green otherwise.

Style and build a blog creation form in a nodejs react app, including full-width inputs, a text area, header image upload, and conditional save logic before server-side blog creation.

Create a blog editor with react draft, manage the editor state, and enable header and multi-image uploads, while styling an image grid and outlining server routes.

Develop and post new blog entries by creating a blogs collection, validating title, description, and categories, sending authenticated requests with JWT, and inserting documents into Mongo with slugged titles.

Create a blog header image upload route secured with JWT, handling single and multiple uploads, and update the blog to store the header image path in Mongo.

Enable multi-image uploads for blogs, adjust editor styling, and store available images in Mongo with a dedicated route to fetch and display thumbnails.

Add Google login to the project by building a generic login page with a Google sign-in button, implementing the OAuth flow on a simple server and a React app.

Set up a React app on a server with nginx, configure and link the site in sites-enabled, and prepare for Let's Encrypt certificates while planning Google OAuth login integration.

Learn to set up nginx on Ubuntu, run Let's Encrypt to obtain certificates, manage ports and symbolic links, verify live certificates, and prepare a React environment for secure deployment.

Turn a text file into a React app by installing and linking Node and npm, then set up a WebSocket server, create notes, and render them on a web page.

Boot up a React project from scratch by initializing npm and creating a package.json, then install dependencies and organize a clean structure with source, components, and fonts to run React.

Configure and run a React project by editing package scripts, creating a master styled app, and wiring index.js to render into the dom; start with npm run start.

Learn to style a React app by installing Google fonts, configuring fonts and rem-based typography, and building a full-width layout with a social blogging box.

Create a centered login panel with Google, Twitter, and Facebook buttons, styled with borders and padding, arranged in a row using flexbox, with hover effects.

Set up a web app to authenticate with Google by configuring OAuth credentials, domain verification, and consent screens, then enable the People API for testing and deployment.

Configure google oauth login by building a node-based backend with websockets, initialize npm, and create server.js and utils.js to connect front end with google authentication.

Set up a secure websocket backend in node.js using the latest WebSocket and SSL certificates, including lets encrypt, on port 1300. Export a system configuration and logging utility.

Create a central app context to serve as the brain between the front end and back end, wrapping the app with a provider to share data via useContext and WebSocket.

Learn to initialize WebSocket connections and manage front-end state with React hooks, exposing the ready state and WebSocket ID to the UI.

Explore integrating a WebSocket connection in a React app, managing ready state, opening and upgrading connections, and implementing origin checks and heartbeat updates for real-time data.

Learn to attach a unique WebSocket id on the server, upgrade the connection, and exchange typed payloads with the client to enable two-way communication.

Set up google oauth login by installing the google npm package, configuring the app id and secret, and defining the redirect URL and environment variables, then restart the server.

Integrate google oauth login in a node react rest app by configuring a google object, specifying scopes and url, and triggering login from the front end to communicate with server.

Demonstrates a Google OAuth login flow by sending client messages to a server, using a type-based switch to handle Google requests, and returning results to trigger client redirection.

Learn to implement Google OAuth login using WebSockets, sending a typed payload from server to client and redirecting with window.location based on the data field.

Diagnose and fix google oauth login flow in a node.js and react app by correcting authorized redirect uris, handling redirect behavior, and automating user redirects to complete authentication.

Implement Google OAuth login in a React app by handling the redirect, extracting the authorization code from the URL, and sending it to the server for token validation.

Implement Google OAuth login by sending the Google code to the server, handle websocket reconnection after redirect, and verify the login flow with console logs.

Route the Google login code from the client to the server and log its handling. Implement a server-side login function using async/await and test by restarting the server.

Debug and validate Google OAuth login flow for a Node.js React REST app by clearing previous code, establishing a fresh token exchange via WebSocket, and confirming valid access tokens.

implement google oauth login by enabling the google people api and obtaining credentials and access tokens to fetch user name, email, and photos.