SaaSer Prototype

Have you ever worked with a product engineering team for a SaaS product? Do multitenant setups keep you up at night?

The SaaSer Prototype (or SaaS App Control Plane) was built with the goal of allowing developers and system stakeholders to easily manage administrative tasks via an internal only web portal. It allows for visibility into how the system is running, and acts as a centralized point for SaaS configuration. Integrated with the AWS SDK, the portal allows for management of the entire stack of the SaaS product. Future enhancements included more robust configuration promotions, application backups and restores, user and role migrations, as well as tenant operations such as moving databases and/or workloads to different clusters.

Frontend

  • React 18 - UI library with functional components and hooks

  • TypeScript - Type safety and enhanced development experience

  • Vite - Fast build tool and development server

  • Wouter - Lightweight client-side routing

  • TanStack Query (React Query) - Server state management and caching

  • Tailwind CSS - Utility-first CSS framework

  • shadcn/ui - Pre-built UI component library

  • Radix UI - Accessible headless UI primitives

  • Lucide React - Icon library

  • React Hook Form - Form handling with validation

  • Zod - Schema validation

  • Framer Motion - Animation library

Backend

  • Node.js 20 - JavaScript runtime

  • Express.js - Web application framework

  • TypeScript with tsx - Type-safe server-side development

  • AWS SDK v3 - Complete AWS service integration

    • Batch, ECS, ECR, RDS, CloudWatch, CloudWatch Logs

  • Drizzle ORM - Type-safe database operations

  • PostgreSQL - Production database

  • In-memory storage - Development data layer

  • Express Session - Session management

  • Passport.js - Authentication middleware

AWS Services Integration

  • AWS Batch - Job queue and execution management

  • Amazon ECS - Container orchestration

  • Amazon ECR - Container registry

  • Amazon RDS - Managed database services

  • CloudWatch - Monitoring and metrics

  • CloudWatch Logs - Centralized logging

Development Tools

  • Hot Module Replacement (HMR) - Live reloading during development

  • ESBuild - Fast bundling and transpilation

  • PostCSS - CSS processing

  • Autoprefixer - CSS vendor prefixing

Key Features

  • Real-time monitoring of AWS resources

  • Batch job management with status tracking

  • Multi-environment support (dev, staging, production)

  • Configuration promotion between environments

  • Application management with user roles

  • Comprehensive logging and activity tracking

  • Dark/light theme support

  • Responsive design for all screen sizes

The application follows modern full-stack patterns with a focus on AWS cloud infrastructure management, providing a unified interface for development teams to manage their cloud resources efficiently.

Previous
Previous

Customer Data Import Gateway