Fullstack GoLang React Insanity Volume 1

Learn to build a React front end that interacts with MongoDB and MySQL using GoLang, pushing data to the UI from remote servers and focusing on interactive components.

Build a full-stack application with a React frontend and Go backend, featuring a dynamic file-system tree component, websockets, and a login system, all documented step by step.

Updating the course from scratch with zoomed-in videos and slower pacing, the instructor focuses on React concepts like hooks and the context system, with frequent new videos.

Pull the docker image and launch it to run a ready-made react app with a go development environment, including an ubuntu image with mysql and mongo.

Acquire a domain and configure dns to point to the server ip, then set up a live ubuntu server and enable local ssh and sftp access, with basic package updates.

Upgrade Ubuntu packages, install nginx, configure a site using sites-available and sites-enabled with a symlink, point to the React distribution folder, and set up Let's Encrypt for http to https.

Finish nginx setup and install Let's Encrypt certificates while preparing node and parcel tooling; this video walks through ubuntu apt-get installs, directory setup in var/www, and quick server testing.

Set up node and npm, install parcel bundler and babel, configure a React app with hot module replacement, fonts, and a source directory to compile and run in the browser.

Start the nav bar in a React app by loading blueprint icons, wiring them into the header, and styling with styled components and SVG masking for a polished UI.

Build a dynamic navigation bar in a React app by creating a reusable button component with props, icon support, and styled components, enabling resource buttons and drop menu logic.

Learn to build a hover-activated drop menu in a navigation bar using hooks and props, and position the menu with event coordinates and style components.

Wire a nav bar to a modal using the use model hook to control login and signup display, including model showing, header text, and submit text.

Install and secure MongoDB on Ubuntu 19, create an admin user, enable authorization, and configure IP binding to prepare for Robo3T testing.

Learn to install Go, fix Mongo authentication by adjusting the connection string, set up Go paths, and write and run a first hello world program to test compilation.

Develop a barebones Go WebSocket server by setting up imports, a router, and an API upgrade handler; connect clients, exchange JSON messages, and test with a basic WebSocket workflow.

Build a useWs websocket hook in React to manage connection states, heartbeat checks, and payload-based messaging, routing data by type and testing with a server at port 1200.

Implement useWs hook to send base64-encoded login data over WebSocket and decode responses on the Go server, integrating props passing and request handling across the UI.

Learn to create a Go API that connects to a MongoDB database. Encrypt and store user passwords and test login authentication by validating hashed passwords.

Go-based pem generation for private keys and test a real websocket JWT login flow by marshalling user data to JSON bytes for sending.

Generate a JWT using RSA private and public keys with a third-party package, then send the token over a websocket for client validation and protected routes.

This lecture demonstrates implementing modal alerts for login validation in a fullstack go-lang React project, using red danger alerts to display invalid credentials and guide user feedback.

This lecture demonstrates using modal alerts in a React app, listening to state changes from a JWT validation, and closing the modal when verification becomes true.

Explore client-server token verification with JWT and message flows. Learn to validate tokens using a public key and manage stored tokens.

Store JWT to local storage and adjust the nav bar to show login or profile based on loading and token validation.

Validate and store tokens in local storage, show the profile icon after login, and style a vertical menu; prepare to pull from Mongo to fill items and define components.

Store components in a Mongo database via an admin panel and fetch them with a REST API to render a dynamic nav drop menu for profiles and resources.

Configure the Go server with state, JWT storage, and Mongo integration; implement dynamic routing for menu items and coordinate concurrent tasks with wait groups.

Set up an asynchronous queue in go to handle multiple tasks concurrently, using channels and a worker pool, processing task objects with a perform function, dispatcher, and dynamic menu icons.

Create dynamic menu items by querying Mongo for profile components through a user interface drop menu, using an asynchronous task worker and a Go function to assemble and JSON-encode results.

Finish dynamic menu items and add logout functionality by wiring the logout action to menu elements, mapping over elements, updating icons, and clearing local storage upon logout.

Develop and test real-time email validation and alerts for the sign-up flow, implement password requirements, and perform rapid server checks for existing accounts during signup.

Implement email validation and user existence checks in the rapid test flow, using a websocket-driven task system to report available, success, or failed results in the ui.

Learn to implement password validation alerts for sign-up, tracking uppercase, lowercase, number, and special characters, length, and real-time feedback with timed rechecks.

Implement create user functionality in the fullstack GoLang React app by adding a server task to marshal user data, encrypt passwords, and save to Mongo, with client-side validation.

Finish user creation by wiring websocket-driven toast messages and modal toggling across the ws hook and main app, triggering modal visibility and toast types to guide the user flow.

Configure the content area to hide the nav drop menu on hover, add a loader, and position below the nav bar at 1200 px width for consistent development.

Learn to implement a two-column grid with template columns 320 px and 860 px and a loader bar that appears while tokens are checked, using styled components and keyframes.

Implement toast messages by reusing the alerts component, showing a five-second toast above content after actions like creating a user, driven by toast type and message.

Set up a pty terminal and pipe it to a web page using xterm, web sockets, and a go-based websocket route, linking server and client components.

Set up the client side for the PTI terminals by creating the front-end file, adapting to recent dependency changes, and loading the component into the main content area to test.

Install pm2 and run npm install to set up the project, link node binaries, compile gws to a full executable, and run the app with pm2 to verify on dashboard.

Explore how a client and server use web sockets to drive a pty (pseudo terminal) interface with xterm, handling base64 data and dynamic resizing.

Enable Prism module integration by creating a Prism component, wiring a React render, and displaying code highlights with a night owl theme, using WebSocket data to populate content.

Explore building a sidebar with a vertical menu and a file system using React components, REST API calls, and WebSocket data, wired through hooks and dynamic icons.

Explore building dynamic vertical menus and a documentation-focused sidebar by wiring a filesystem component to a database, filtering by component type, and rendering admin panel data.

Build a vertical menu that displays a file system with folders and documentation. Connect get file system task with a web socket to fetch path data and render titles.

Explore side bars part iv as you add a file system object, request data via a web socket, and visualize client side and server side communication with asynchronous data flow.

demonstrates building a virtual file system for the sidebars, loading four-level deep fake code by sending path data over a web socket to the server and rendering retrieved file data.

Explore how a vertical menu and file system browser render from server data, using paths, component types, and web sockets to fetch and recursively render nodes and folders.

Implement and test a vertical administration menu with type administration items and actions, and configure the admin top menu alongside a CSX grid interface.

Install Redis, generate a long password, bind to an external ip with require pass, restart the service, and test remote connections via cli and p3x using set and keys commands.

Install mysql and secure the root account, then download the latest phpmyadmin package into the distribution folder, rename it to my admin, and expose via nginx.

Develop go sse and mysql modules to power the backend, add a mysql task to fetch tables, and implement sec service and events for per-client master web sockets.

Advance client side work by reattaching the master web socket header for connections. Reconfigure the server upgrade path and start building the frontend and backend operation files.

Enable the operations panel by wiring in the components, compile, and test that databases load and websocket keys are managed, while the server runs using the master connection.

Learn to monitor a Go server with a command line interface, inspect service-sent events and web sockets, and understand the ops breakdown including the sse server and mysql databases panel.

Set up a brand-new Ubuntu server with a domain, install nginx, and configure sites-available and sites-enabled. Then obtain Let's Encrypt certificates to enable http to https redirection.

Install and configure mongodb and mysql on ubuntu, create an admin user with authentication, and secure the setup with Let's Encrypt and nginx.

Install node and go on a remote server, create symbolic links for node and npm, set path, prepare a go workspace, and verify with a hello world program.

Install and secure a redis server on ubuntu, set up password authentication, adjust binding to allow external connections, reload the service, and verify authentication from the client.

Jumpstart a fullstack Go and React app by configuring a bash profile, installing Node, Parcel, and Babel, and scaffolding a React frontend served by engine X.

Wipes and provisions a server from ground zero to the first react app, with zoomed-in coverage of the html and index files, nginx, let's encrypt, mongo, mysql, and my admin.

Walk through provisioning a server to set up Go and Node, install and configure Node, run first React app, and troubleshoot Parcel bundler issues with Node versions 12 and 13.

Wire up a hook-based context system to manage app state with an app provider, use context, and a dashboard to visualize getters, setters, and data flow.

Create a 65-pixel-high navigation bar as a style component, position it at the top with a box shadow and bold font, and import it into the main app.

Continue with nav bar part i teaches building a styled navigation bar using style components in React with TypeScript, adding icons, and iterating with the context system.

Continue with the nav bar by adjusting layout, moving the input under the button, and applying component styling. Implement hover effects and cursor changes to refine the navigation.

Finalize the navigation bar by adding three button types—gray, white, and red—and a divider to structure the bar. Tune padding and hover effects for consistency.

Apply three quick fixes: adjust button padding, fix the link button, and push down the dashboard with a top margin for floating nav, then start a Go web socket setup.

Learn to build a Go websocket server using gorilla/mux and gorilla/websocket, upgrade HTTP to ws, handle JSON messages, and secure with TLS and Let's Encrypt.

Develop a React context-backed WebSocket client to connect a front end with a Go backend, exposing ready state and socket, plus a request function and heartbeat.

Test and polish the React websocket client and the Go websocket server by validating the ready state and exchanging a hello sir message.

Create a Go package named FSI to implement create, read, write, and delete file operations, including tests with a main and a test pro con.

Learn to generate a private key in Go using RSA, set up config for key paths, and create public and private keys for JWT-based websocket security.

Add a uuid to the gorilla websocket upgrade struct, generate it with a uuid package, and store it in the React app context to identify connections.

Test JWT generation and validation over websocket by generating a JWT with a private key, sending it to the client, and validating it on return.

Organize login form development by modularizing models into a dedicated components folder, wiring them into the main app, and refining the center dialog form with styling tips.

Polish off login form part II shows refining input fields and icons, applying hover effects, consistent colors, and preparing a separate sign-up form with reusable components.

Build a sign-up form by extracting the component from the main app, adding full name, email, and password fields, and implementing basic styling and open/close button behavior.

Implement signup functionality by importing the app context, creating local state for username, email, and password, and wiring a sign-up submit function with a request payload.

Style the sign-up form and implement incremental form validation, enforce required fields and email checks, and provide submit-time error feedback.

Learn client-side sign-up validation in a React context, enforcing required fields, email validity, and password strength through state-driven checks.

Polish off sign up form validation by moving logic to a cleaner place, enforce required fields and email validity, and prepare to send base64-encoded password data to the server.

Explore an interactive challenge with password indicators and a blank sign-up model, devise ideas along the path, and compare solutions after the course.

Build a server-side signup flow in Go by creating a utilities package, base64 encoding and decoding email and password, and marshaling user data for sign up.

Connect and test a Mongo database in a Go project by creating a Mongo package, wiring configuration strings, establishing a client with context, and pinging to verify the connection.

Fix your Mongo connection by ensuring the password is correct and encoding special characters in the connection string, using percent 40 for symbols like @.

Build a Mongo create user function that marshals JSON to a user struct, hashes the password with bcrypt, assigns administrator role, and inserts the user with web socket feedback.

Learn modal close and show functionality in a fullstack GoLang React app using a global app context, modal state, and prop drilling for sign up and log in dialogs.

Implement modal close and show functionality using app context and app consumer, extracting the modal into a separate component and wiring onClick handlers to toggle visibility.

The lecture patches the sign-up flow by refactoring the backend to use email and name, decoding passwords from base64, updating the Mongo create user logic, and testing the process.

Implement login form functionality by wiring email and password fields, adding validation and error handling, and preparing the backend to verify users and plan JWT integration.

Learn to validate credentials in a GoLang and Mongo setup by verifying passwords with bcrypt, checking user existence, and preparing a login payload with JWT.

Refactor the login flow to generate and return a jwt with user email, name, and role after login, then validate it on the server and marshal the user data.

Polish login and signup forms by signaling invalid credentials or missing users through a login error modal, handling server and websocket messages, and managing jwt tokens and user state.

Verify the JWT on the server and store the verified token and user data in the local storage and app context, using useEffect to react to token changes.

Implement a loading widget that uses local storage JWT and token verification to conditionally render a loader during page load, with a styled component and keyframe animation on the dashboard.

Wire startup flow to check for a stored JWT in local stores, validate it with the server, update loading states, and reveal the user profile upon success.

Demonstrates testing and handling corrupted JWT logic by validating stored data, clearing invalid tokens, and reinforcing login, logout, and data verification flows.

Build interactive drop menus with hover logic, split the ui into reusable components, and wire a simple rest call to the database while refining absolute positioning and css pseudo elements.

Set up a two-column 1200px content grid with a left menu and right content, hover-driven drop menus, and centered loader for a React app.

Learn to implement show and hide drop menus on hover by wiring on mouse over events, passing actions as props, and applying hover logic to content and profile areas.

Configure a new UI collection in the database and create a REST API route to add and fetch UI components, then load them into the app context using axios.

Set up a REST API with Mongo-backed data to fetch resources and profile components, using a filter and a response writer to return JSON data.

Load left and right drop menu data into state, map over elements to render text and icons with context, and export the drop menu left and right.

Style the left drop menu with dynamic icons and class-based styling, wire on click actions to use their action and parameter, and hide the menu on selection.

Install pm2 to monitor a Go application and pipe its pty terminal output to a web dashboard, with a React xterm terminal wired via WebSocket connections.

Move the state into the dashboard, adjust padding, and clean up the pty terminal with absolute positioning. Build a binary with go run or go build and start it.

Install and integrate a Prism code display component in a React dashboard, npm install prism-react-render, import Prism React Render, apply the night owl theme, and wire data via app context.

this lecture builds a virtual file system split into front end, back end, and documentation components, using go packages, web sockets, and an async queue to fetch path data.

Split frontend functionality into documentation and file system components, wire them to a Go backend via WebSocket, and implement asynchronous, recursive file handling.

Build and route documentation, frontend, and backend components by wiring data through a path-based switch, and update context with front, back, and documentation state.

Create front end and back end folders with sample files in the virtual file system, then wire the app context and file system components to render front and back paths.

Develop a file-system style documentation viewer that fetches server data, represents a virtual file system, and renders nested folders and files from JSON children using a context system.

Polish off the filesystem component by finishing styling and wiring click interactions to update the display. Clean up redundancy while mapping levels 1-4 with folder or file icons.

Implement a web socket flow to pull filesystem data by reading files from a path, sending the data as a message, and wiring the client side to display updated data.

Connect and wire up the admin sidebar component to a Mongo database, dynamically loading its three menu items from documents and rendering them via state-driven loops, with basic route protection.

Wire the admin sidebar to render dynamic items from the database using a context system with icons, text, types, and actions.

Develop a databases component that displays grid-based database operations using a CSS grid and styled components, wired to context-driven requests and a blue action button.

Learn to implement a show/hide toggle for a database operations grid in React using context state, props, and conditional rendering to control visibility based on user role.

Hook up the websocket to fetch MySQL databases by implementing a go task with the MySQL driver and marshal the results for the client.

Fix duplicate prints and wire a button to fetch the my school MySQL databases via context, then render the resulting array with state management and websockets integration.

Create a websocket client list by defining a struct with a client count and IDs, wiring it through a channel, and updating the table as new connections arrive.

Finish the Go websocket client list feature by streaming the updated client array, marshaling it to JSON, and updating the React frontend state every five seconds.

Learn to build a complete docker image with mysql and all services on ubuntu 19.10, avoiding separate images and following install notes to implement the docker engine.

Polish off all docker tools install by updating package lists, adding the repository, installing and testing docker tools and docker compose, and preparing to move forward to the next video.

Learn to build and tag a Docker image, run containers with Docker container run, and push to hub while configuring Mongo and OpenSSL considerations for a React-based full-stack app.

Update the image, install and verify OpenSSL, then configure nginx and prepare to move services to the image for the server environment.

Configure nginx by editing sites-available and sites-enabled, replace the default, run the image, start nginx, and verify a test page is served.

Commit changes to the working image after exiting, clean up unchanged images, then start engine X, expose ports 80 and 443, and verify with a self-signed certificate.

Install and run MySQL with PhpMyAdmin inside a Docker image, configure secure installation, start services, and access the web interface to manage databases.

Start and restart a service to troubleshoot rare issues, verify its running status, and access phpmyadmin and mysql inside a container without affecting the host operating system.

Configure test sftp and ssh access to a container by port forwarding, setting a root password, and validating ssh connections while managing docker containers.

Download and install the latest Linux binaries for Mongo in a container, create data and log directories, and prepare a config file.

Finish Mongo install, secure it with authorization, and test the connection to the Docker image by creating a user, launching secured, and validating port access.

Configure a redis server in a docker container, bind to 0.0.0.0, set a password, and test connectivity. Prepare the react and go development environment.

Set up the final build environment for go and node, install dependencies with npm and parcel, run a dockerized react app, and push images to docker hub.