Kyle Ledbetter kyleledbetter

Supabase Database Architecture

Security & Compliance Requirements

SOC II Compliance

All sensitive data must be encrypted at rest
Audit logging for all data access and modifications
Role-based access control (RBAC) with principle of least privilege
Data backup and recovery procedures
Regular security assessments and monitoring

Product Requirements Doc

Our application leverages the latest innovations in React 19 and Next.js 15 (App Router) to deliver powerful real-time collaboration features. User authentication and database management are powered by Supabase, with data being transitioned from Neon Postgres to Supabase Postgres and fully integrated through Drizzle ORM. We utilize the Vercel AI SDK (referenced in /documentation/ai-sdk) to orchestrate AI-driven interactions, and NextAuth.js to optionally authenticate users with oauth2 connecting third-party software assets.

Implementation Plan

Use React 19 & Next.js 15
- Ensure the project dependencies match the versions in the package.json snippet provided ("react": "19.0.0-rc-...", "next": "15.0.3-canary.2").
- Check the configuration of Next.js App Router in the /app directory, verifying that routes align with Next.js 15 standards.

Ensure all dependencies are compatible with the versions of React and Next.js specified.

	/**
	* Applies styles for users in high contrast mode. Note that this only applies
	* to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
	* attribute, however Chrome handles high contrast differently.
	*/
	/* Theme for the ripple elements.*/
	/** The mixins below are shared between md-menu and md-select */
	/**
	* This mixin adds the correct panel transform styles based
	* on the direction that the menu panel opens.

	@import "theme";
	// You can add global styles to this file that will cascade like normal CSS

	// Active icon color in list nav
	md-nav-list {
	[md-list-item].active {
	md-icon[md-list-avatar] {
	background-color: mat-color($accent);
	color: mat-color($accent, default-contrast)
	}

	@import '~@angular/material/theming';
	@include mat-core();
	$primary: mat-palette($mat-orange, 800);
	$accent: mat-palette($mat-light-blue, 600, 100, 800);
	$warn: mat-palette($mat-red, 600);
	$theme: mat-light-theme($primary, $accent, $warn);
	@include angular-material-theme($theme);

	// A light blue and orange theme
	.light-blue-orange {
	$primary2: md-palette($md-light-blue);
	$accent2: md-palette($md-orange, 800);
	$warn2: md-palette($md-red, 600);

	$light-blue-orange: md-light-theme($primary2, $accent2, $warn2);

	@include angular-material-theme($light-blue-orange);
	}

	@import '~@angular/material/core/theming/all-theme';
	// Plus imports for other components in your app.
	@include md-core();

	// Define the palettes for your theme using the Material Design palettes available in palette.scss
	$primary: md-palette($md-orange, 800);
	$accent: md-palette($md-light-blue, 600, A100, A400);

	// The warn palette is optional (defaults to red).
	$warn: md-palette($md-red, 600);

	<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
	<link rel="import" href="../core-menu/core-submenu.html">
	<link rel="import" href="../core-item/core-item.html">
	<link rel="import" href="../core-icon-button/core-icon-button.html">
	<link rel="import" href="../core-toolbar/core-toolbar.html">
	<link rel="import" href="../core-scroll-header-panel/core-scroll-header-panel.html">

	<polymer-element name="my-element">

	<template>