Platform Architecture

Technical overview of our hybrid cloud architecture powering scalable robotics education

System Architecture

Frontend Application

Nuxt.js SSR/SSG
Vue.js Components
TailwindCSS Styling
D3.js Simulations
Direct Database Clients

Static hosting on Vercel via GitLab

Database Layer

Supabase PostgreSQL
MongoDB Atlas
Built-in REST APIs
Row Level Security
Real-time Subscriptions

Direct client connections

Simplified Data Flow

Nuxt Frontend⟷Supabase API+MongoDB Client→Rendered Page

No custom API layer - direct database connections

Hybrid Database Strategy

Supabase PostgreSQL

Primary Use Cases

  • • User authentication & authorization
  • • Structured metadata & relationships
  • • Learning progress tracking
  • • User preferences & settings

Key Features

  • • Row Level Security (RLS)
  • • Real-time subscriptions
  • • Built-in authentication
  • • ACID transactions

Free Tier: 500MB database, 2GB bandwidth, 50,000 monthly active users

MongoDB Atlas

Primary Use Cases

  • • Rich content storage (articles, tutorials)
  • • Large text documents & media metadata
  • • Complex nested data structures
  • • Full-text search capabilities

Key Features

  • • Flexible document schema
  • • Powerful aggregation framework
  • • Horizontal scaling capabilities
  • • Rich indexing options

Free Tier: 512MB storage, shared cluster, no time limit

Data Synchronization & Performance

Reference Strategy

Supabase tables store MongoDB content IDs, creating a lightweight reference system.

classroom_topics:
- id: uuid
- name: string
- mongo_content_id: string

Progressive Loading

Page structure loads instantly from Supabase, rich content enhances progressively.

1. Metadata: ~30-50ms
2. Content: ~80-200ms
3. Enhanced: ~110-250ms

Fallback System

Graceful degradation ensures content is always available, even if MongoDB is unavailable.

Primary: MongoDB Rich Content
Fallback: Supabase Basic Content
Cached: CDN Edge Locations

Security & Authentication

Authentication Flow

1

User Login via Supabase

Secure authentication with JWT tokens

2

Token Validation Middleware

Vercel functions validate Supabase JWT

3

MongoDB Access Control

Application-level filtering by user ownership

Security Features

Supabase Security

  • • Row Level Security (RLS) policies
  • • OAuth integration (Google, GitHub)
  • • Email/password authentication
  • • Automatic CSRF protection

API Security

  • • JWT token validation
  • • Rate limiting & DDoS protection
  • • HTTPS enforcement
  • • Input validation & sanitization

Performance & Scaling Strategy

CDN & Caching

  • Vercel Edge Network
  • Static asset optimization
  • API response caching
  • Browser caching strategies

Database Optimization

  • Strategic indexing
  • Query optimization
  • Connection pooling
  • Read replicas (future)

Monitoring

  • Vercel Analytics
  • Supabase Dashboard
  • MongoDB Compass
  • Error tracking & alerts

Scaling Path

  • Horizontal API scaling
  • Database sharding
  • Microservice migration
  • Multi-region deployment

Technology Stack

Frontend

Nuxt.js 3 - Vue.js framework
TailwindCSS - Utility-first styling
D3.js - Interactive visualizations
TypeScript - Type safety

Backend

Vercel - Serverless deployment
Supabase - PostgreSQL & Auth
MongoDB Atlas - Document storage
Node.js - Runtime environment

Development

GitLab - Version control
ESLint - Code quality
Prettier - Code formatting
Vitest - Testing framework

Architecture Evolution

Our architecture is designed to evolve with growth, maintaining performance while scaling from MVP to enterprise-grade platform.

Phase 1: MVP

Hybrid database strategy with free tier optimization

Phase 2: Growth

Microservices migration and advanced caching

Phase 3: Scale

Multi-region deployment and real-time features

View Migration Plan