About The Project
snoomleng.com is a self-hosted, full-stack personal developer portfolio and content management platform engineered for performance, type safety, and deployment automation. The platform features dynamic blog discovery, a showcase of production projects, career history tracking, and a secure administrative portal.
By combining headless content delivery with a containerized deployment pipeline on AWS, the architecture balances edge-like rendering speed with low-cost, predictable infrastructure management.
System Architecture
Tech Stack
Frontend & Interactive UI
- Framework: Next.js (App Router, React Server Components)
- Language: TypeScript
- Styling & Motion: Tailwind CSS, shadcn/ui, GSAP (Scroll animations & UI transitions)
- Design System & Isolation: Storybook (Component isolation and testing workbench)
- Rich Text Parsing: @portabletext/react
Client State & Dynamic Forms
- Data Fetching: TanStack Query (React Query)
- Form Engine: React Hook Form
- Runtime Validation: Zod
Backend Persistence & Services
- Headless CMS: Sanity Content Lake (Queried via GROQ)
- Database & ORM: Serverless PostgreSQL hosted on Neon, managed with Drizzle ORM
- Authentication Engine: Better Auth (Configured strictly for pre-authorized admin access; public registration disabled)
- Email System: AWS Simple Email Service (SES) compiled via React Email
DevOps, Testing & Infrastructure
- Cloud Infrastructure: AWS EC2, AWS ECR, AWS Secrets Manager, Namecheap DNS
- Server Stack: Nginx (Reverse Proxy), Certbot (Automated SSL/TLS renewal), Bash, Linux
- Containerization: Multi-stage Docker builds
- CI/CD Automation: GitHub Actions
- Quality Assurance: Vitest (Unit/Integration testing), Playwright (End-to-End browser testing)
Functional Capabilities
Public Platform (snoomleng.com)
- Developer Identity Showcase: Dynamic rendering of bio/about details, interactive tech stack inventories, and structured employment history timelines.
- Project Case Studies: Gallery displaying project details, production deployment status indicators, live URL redirects, and category filters.
- Multi-Parametric Blog Discovery: Real-time client search and filtering by article title, topic category, and target programming language/framework tags.
- Interactive Communication Gateway: Validated contact form triggering background server workflows to send formatted transactional emails via AWS SES to the administrator inbox.
Administrative Portal (snoomleng.com/admin)
- Restricted Authentication Guard: Explicit authentication pipeline via Better Auth with no self-service sign-up routes to protect administrative endpoints.
- Headless Content Orchestration: Full CRUD capabilities for site copy, hero banners, header/footer navigation items, projects, tech stacks, career records, and blog posts.
- Inbound Message Hub: Interface to view contact form submissions, manage status markers (New, In Progress, Replied, Spam, Resolved), and send direct email replies.
Engineering Deep Dive & Key Architectural Trade-offs
- Dedicated EC2 + Nginx Containerization vs. Managed Serverless (Vercel)
- Trade-off: Increases operational responsibility, requiring manual host OS maintenance, Docker image lifecycle management, and Nginx reverse-proxy configuration.
- Justification: Eliminates vendor lock-in, ensures predictable fixed infrastructure costs regardless of bandwidth or traffic spikes, and provides complete runtime control over server process execution and environment configuration.
- Hybrid Data Architecture (Sanity CMS + Neon PostgreSQL)
- Trade-off: Requires maintaining two distinct data access patterns (GROQ queries for Sanity, type-safe SQL queries via Drizzle for Neon).
- Justification: Optimizes data boundaries by assigning concerns to specialized engines:
- Sanity Content Lake: Used for non-relational, rich-text heavy marketing and editorial content (blogs, project case studies, bio updates).
- Neon PostgreSQL: Handles structured transactional data requiring rigid schema enforcement and relational integrity (admin user sessions, message status tracking, audit logging).
- In-House CI/CD Pipeline via GitHub Actions & AWS ECR
- Trade-off: Build steps require maintenance of continuous deployment YAML manifests, Docker build-cache mounts, and IAM authorization tokens.
- Justification: Enforces a rigid deployment gate where code must pass automated linting, static type analysis, Vitest unit suites, and Playwright E2E browser tests before producing a tagged Docker container image in ECR for host pulling.
- Security Isolation with AWS Secrets Manager & Better Auth
- Trade-off: Requires initialization scripts on the EC2 host to fetch runtime keys securely during runtime container startup.
- Justification: Prevents committing sensitive credentials (database URIs, API tokens, SES credentials) to git repositories, ensuring complete environment isolation between build-time compilation and runtime execution.
Data Flow
Contact Form Inbound/Outbound
Admin Sanity CRUD Operations
Admin Contact Review and Reply
