AI-Powered Data Visualization with Angular, React and NodeJS

Explore different managed postgres databases for ai-powered data visualization, including Supabase, Render, Neon, Coep, and Ivy. Set up a simple authentication workflow with Postgres using Supabase.

Learn to set up a Supabase Postgres database: create an organization and project, provision 500MB storage, generate credentials, and plan to connect with type orm to manage tables.

Learn how to obtain and use Supabase Postgres database credentials, including host, port, username, password, and database name, and connect via ORMs for mobile frameworks.

Create your first table in a Postgres database using the Netflix shows SQL file, then set the show_id as primary key and enable row level security for safe data access.

Import sample data into the Netflix_shows table using psql, via local install or docker, by running the provided sql file, noting you might encounter errors if the table already exists.

Build on last video by adding the Titanic data as a second sample table to the Supabase Postgres database, including table creation and primary key.

Create database tables with TypeORM migrations from code, avoiding the Supabase npm package for flexible database options. Set up a TypeScript, Express, GraphQL project with Apollo server and src structure.

Set up an express server in index.ts, add tsconfig, prettier, and editorconfig, bootstrap with a class, configure http server, cookie session, and cors for react 4000 and angular 42000.

Install dotenv and validation tools, create a .env file with node, db, React and Angular URLs, and jwt secrets, then wire variables into a config module.

Set up a postgres database connection with type orm by configuring a data source, creating entities and migrations, and wiring environment variables to initialize the database before starting the server.

Fix database config by using db_port instead of server port, add db_ssl boolean (default false) to env, validate as boolean, and adjust ssl handling so connections aren't rejected in development.

Learn how to configure a database, create and manage migrations with TypeORM, and use npm scripts to generate, apply, and revert migrations, including local development and production considerations.

Create a user entity with a uuid primary key, unique email, and created and updated timestamps, then generate and run a migration to create the user table using TypeORM.

Create and migrate a data source entity with fields for user IDs, project IDs, database credentials, and connection details, enabling external Postgres data source integration.

Create a chat info entity linked to a data source via a many-to-one relation, enabling save and edit, and specify chart type, x axis, y axis, and prompt.

See how to recreate migrations by generating and applying updates, adding a new column place to the user table, and re-running or reverting migrations as needed.

Set up an Apollo server for GraphQL, configure merged schema and resolvers, and implement an Express-based server with make executable schema, introspection for development, and HTTP server drainage plugin.

Define a simple typeDefs and resolvers to fix the apollo server error about a missing query route type; bootstrap the schema and implement a books query returning an array.

Set up a simple authentication validation service using the validator package, with static methods to validate email, check for existing users, and enforce password length and format via GraphQL errors.

Create an auth service with a static register method that validates registration, hashes the password, creates the user via the repository, and stores an access token in the session.

Hash and verify passwords with bcrypt using a 12-round salt, then generate and verify JWT access tokens with a user id, email, and active project.

build the login method for the auth service, mirroring the register flow. validate user input and verify hashed passwords, using placeholders for collections and a logout routine.

Define a GraphQL auth schema with input and output types, plus query and mutation types to support login, register, and logout, returning user data, project IDs, and collections.

Implement an auth resolver in a GraphQL server by creating login, registration, and logout mutations and a check current user query, wiring them to an auth service and context.

Debug the auth schema by removing an await, making the string uppercase, and removing a colon in the user response type. Access the GraphQL UI at /GraphQL with introspection enabled.

Explore a GraphQL sandbox to test login, register, and logout mutations, view the schema and queries, and validate authentication via a live UI backed by supabase.

Decode base64 strings to reveal database credentials saved as base64 in the data source entity, using two methods: buffer.from with toString('utf-8') and the atob function.

Learn to build a data source service with static asynchronous methods to create data sources and retrieve them by project id, id, or user, with GraphQL error handling.

Learn to edit and delete data sources with atomic transactions in TypeORM, using a query runner to commit or rollback changes and ensure related charts are removed.

learn how to implement a pg connection service to test external PostgreSQL connections before saving data sources in Supabase, using a pool, credentials, timeouts, and error handling.

Learn to fetch PostgreSQL table names by querying information_schema.tables for a given schema, decode base64 credentials, and map results to a string array.

Users write only SQL statements in the front end and execute them against a PostgreSQL data source. A TypeScript method returns result rows and handles errors.

Update the login auth method to fetch user data sources, determine the active project from the first item, load PostgreSQL collections when applicable, and sync token validation in resolvers.

Add data source schemas and PostgreSQL collection types, import core data source types, and define queries and mutations to manage data sources and execute PostgreSQL queries.

Implement the datasource resolver with queries for get data sources and by project ID. Add mutations for check Postgres connection, create, edit, and delete data sources, and authenticate requests.

Learn to create and test a postgres data source by configuring a Czech PostgreSQL connection, encoding the database URL, username, password, and database name, and validating via mutations and queries.

Create a PostgreSQL collection resolver for get PostgreSQL collection, get single PostgreSQL collection, and execute PostgreSQL query, authenticating requests and returning stringified documents while querying project ids and data sources.

Obtain a Claude AI API key, add funds, and explore Anthropic cloud AI models such as sonnet, haiku, and opus, with cost per million tokens and usage tracking.

Configure the api key in dot env and env config, install the typescript sdk, and build a tools schema to generate structured json data for bar, line, and pie charts.

Define the tools schema to format AI-generated data for charts, specifying chart type, title, axes, and data, then send to the client to plot.

Update the tools schema by moving title, x axis, and data into the chart's properties object, then ensure the chart type and chart object are required in the input schema.

Explore building a chart type prompt that combines with user prompts and a system prompt to generate number, line, bar, and pie charts with clear titles and structured data.

Master system prompts and role prompting to drive data visualization workflows, define chart types, and structure data with the generate graph data tool for clear, contextual visuals.

Develop two methods to generate sql from a table schema using an ai model and then return chart data for visualization.

Develop an asynchronous method to generate a postgres sql query from a prompt, execute it via a client, and return the data with the sql statement.

Define a GraphQL eye chart schema and resolver, implement input types for eye chart's query and sql query, and stringify results to test sql data flow.

Explore two approaches to chart generation: write sql to fetch data or have the AI generate select statements from prompts, then visualize results by chart type.

Add a generate chart method to the resolver, integrating chart type prompts with user prompts, SQL-based data retrieval, and result handling to produce dynamic visualizations in a full-stack workflow.

Debug and validate the generate chart workflow by wiring chart prompts, user prompts, and chart types, observe SQL generation and data results, and prepare front-end plotting for various chart types.

Refactor the eye chart service by moving prompts into separate files, creating chart prompt and SQL generator prompts, and simplify the codebase for easier maintenance.

Specify chart type in the generate chart prompt and pass data to visualize, ensuring consistent line or bar charts and highlighting prompt quality.

Create a chart info service with static CRUD methods to save, view, edit, and switch chart types, using the chart info entity linked to the data source and user IDs.

Fetch a single chart info by ID and return transformed chart data. Update chart info by ID using lodash omit to remove created at, then delete chart info when needed.

Define a chart info GraphQL schema with input and output types and enable create, update, delete, and get operations for charts and chart info, including created at as a string.

Create a GraphQL chart info resolver to fetch charts, retrieve chart info, and manage chart info via create, update, and delete mutations, including stringifying createdat for client compatibility.

Add a new non-nullable SQL column to the chart info table by updating the schema, generating and running a migration, and verifying the update in Supabase.

Show how to save a chart using a GraphQL mutation that sends info such as data source id, user id, chart name, type, axes, query data, chart data, prompt, SQL.

Learn to fix punycode deprecation in a node project by tracing warnings, using npm build, and applying package.json overrides to resolve continuous integration build failures, before addressing Postgres issues.

Fix the production database connection after build by updating the source/database config to use the relative .. path. Build locally and run npm start to verify Postgres connects.

Create a new PostgreSQL database on Supabase and manage migrations with npm run migration run, configuring credentials and connection details for production deployment.

Explore how to fix duplicate migrations and align entity and migration paths in a Postgres database on Supabase, adjust build scripts, and use schema drop to reset the database.

Learn to deploy a backend server to render, configure environment variables, and run migrations using a NodeJS web service, with build and start commands and free plan considerations.

Set up an angular project with the angular CLI (version 19 or newer), create a workspace with ng new, then run ng serve to view at localhost:4200.

set up tailwind css in an angular app by installing tailwind and postcss, adding a postcss config, and importing tailwind into styles.css, then include a font awesome cdn for icons.

Learn to switch an angular project from sass to css to integrate tailwind css, renaming styles to styles.css and updating angular.json references to avoid runtime errors.

Set up a redux store with angular redux using ng add for automatic setup, create a store with slices and a root reducer, and define dispatch and selector types.

Set up angular environment files by generating environment configs, updating angular.json, and configuring api url (http://localhost:5000/GraphQL), version, and debug mode for dev and prod.

Install and configure Apollo Angular to connect an Angular app to a GraphQL server using http links, environment api url, credentials, and mutation loading, while disabling cache for fresh data.

Create a GitHub repo for the data viz Angular project, initialize privately, commit changes, set the remote, and push with a setup note mentioning GraphQL client, Tailwind CSS, and Redux.