Microservices with React, Node.JS/TS, Mongo & NATS Streaming

Create a common package in a new folder, set up the API server to manage endpoints, install TypeScript, and add source and index files with a package script.

This lecture demonstrates cleaning previous builds, installing dependencies locally, building multiple components, and starting the application stack for a microservices setup.

Define event subjects and listener interfaces, install a new code file, import modules, and export an abstract listener to manage event types for a NATS streaming-based microservices setup.

Explore how a base listener handles messages with an abstract subject and an abstract method on message, wiring a client and data through the constructor.

Develop a base publisher by implementing a subject interface and a publish method to emit messages on a given subject using a client.

Explore NATS events by creating a subject for screenshot events, capture and store images, and publish the resulting image event to the cloud coordinator after a successful commit.

Create and export all files, publish the package, and set up the publisher workflow. Update the package name and build scripts as the project evolves.

Learn to publish a node package to npmjs by creating an npm organization, naming your package, linking your account, and deploying publicly.

Install and configure packages for a microservices stack, including TypeScript tooling and puppeteer to capture site screenshots in real time.

Build a Cloudinary service within a microservices setup, posting images and their stories, configuring a coordinator instance and client connection, and validating cloud-based image handling.

Create a NATS service by importing modules, establish a successful connection, and then publish and collect messages within the microservices setup.

Develop a screenshots service in a microservices stack that generates images from URLs using a simple form, aligning with the React, Node.js/TS, Mongo, and NATS streaming workflow.

Explore the events service that coordinates publishers to emit screenshot-related events, and an api endpoint that triggers screenshot creation from a url and publishes the resulting messages.

Learn to create a screenshot, upload images to the cloud, and publish messages via a publisher, while handling responses and incoming messages.

Design the base server structure by creating a service with port and cloud connections, and implement a publisher workflow that handles screenshots and front-end publishing.

Explore image assets and asset workflows in a microservices context, including importing assets and preparing the api for delivery across services.

Install libraries, set up a Node.js app with Express and Mongoose, configure TypeScript and Passport for Google authorization, and create Google credentials for localhost development.

Create a dockerfile to enable local development for a TypeScript Node.js project by copying all files, installing packages, and starting the service.

Define the user model by importing mongoose, creating a user schema with an email field, integrating Google authorization, and checking for existing users to create new ones when needed.

Create a screenshot storage and document model using Mongo, linking each screenshot to a user and its chapter reference, and prepare an export-ready screenshots collection.

Learn how to connect to a NATS service by exporting the client and using a connect method to establish and verify the connection.

Explore the passport service, serialization of passport possession, and user profile checks within a microservices setup using Mongo, NATS streaming, and Google Cloud.

Publish and export NATS events to publishers in a microservices setup, using the publisher import pattern and subjects. Send messages with data payloads and understand how events propagate across services.

Follow the event message flow by updating a route and fields, finishing screenshots, and saving the Documentum in a microservices stack built with React, Node.js/TS, Mongo, and NATS Streaming.

Set up an auth router using Express and Passport, define authentication with scope and email, handle request and response, and redirect on successful authorization to continue the flow.

Explore login middleware concepts, including a method named consed and session handling ideas, to understand request session use and middleware flow in a microservices setup.

Secure the screenshots router with Express middleware to manage screenshot and delete operations in a microservices setup. Trace request flow from import through middleware to a successful response.

Create a base application that handles all front-end requests by wiring up essential dependencies, including passport and session management, and scaffold a clean backend skeleton.

Start by setting up the basic configuration for the server environment, establish connections, and prepare to store cloud information into a collection.

Set up a client-side project named client, clean up the repository, import necessary modules, and create a basic functional component to lay the groundwork for React development.

Build the app's main interface using reusable components. Wire submit actions and endpoints and integrate image handling and screenshots for data capture.

Learn how the app fetches data with use effect, updates screenshots as data changes, and builds a basic application with a searchable images component.

Develop a header component in a react project by using imports, export default, and return with className to render text and structure for a frontend in a microservices setup.

Build a reusable search bar as a React component and wire its input value and placeholder to props. Manage focus to ensure proper input behavior.

Create the image list component as a functional component, and begin building image card components, then connect the watchlist as the next step.

Develop an image card component in a React TypeScript project, handling image presence with a default export, importing assets, styling, and rendering content and extra content.

Establish basic client styles, define layout segments, and plan sizing and success criteria for a public index.

Install Axios to enable client-side requests to endpoints in a React app, update the screenshot state with a new array, and apply filters to reflect created screenshots.

Run the client, start the API server, and connect components by creating a cluster with a coordinator, then restart the app to see the UI at the URL.

Configure the coordinator's server with Skaffold, build the scaffold, and enable automatic redeploys as you set up the API, clients, and project configurations.

Learn how to deploy a client and its related services, define deployments and services, configure ports and metadata, and enable inter-service communication through an API.

Deploy and configure NATS for microservices, covering API messaging, templates and labels, and monitoring with retry control to observe and manage message flows.

Create and configure an api service within a microservices stack using node.js/ts and mongo. The lecture guides connecting the api server to mongo and Google Cloud.

Prepare a server service for a microservices deployment, managing profiles, scenarios, and cloud security, including Hibiki cloud name and account upgrades.

Explore deploying a Mongo service within a microservices stack alongside React, Node.js/TS, and NATS Streaming, focusing on service creation and deployment.

Learn the basics of ingress service configuration, including service names, ports, host routing, and annotations, and how API requests reach client and backend services in a microservice setup.

Apply fixes to align service names with configuration, enable require login, set the cloud name, update the hosts file, and use scaffolding to start the api and connect to Mongar.

Explore how a front-end app uses Google authentication, stores data in Mongo, and coordinates API-driven screenshot generation via NATS streaming, with Puppeteer-powered image rendering and event-driven delivery.