Forem: Suteerth Subramaniam

Mastering the Stack: Engineering a Production-Grade Platform from Scratch

Suteerth Subramaniam — Thu, 05 Jun 2025 16:30:25 +0000

Introduction

Previously, we took a deep dive into what happens when you press a button on your favorite movie booking platforms! In case you haven't read that one, check it out:
My Blog: Engineering The Box Office

Have a look at the website (Valid for 14 days from the day of post) - Skyfox

I've shared my entire journey of coding this project from start to finish! And as I promised, I'm back with innovative solutions and new features that have transformed my project into a near enterprise-scale startup's MVP. Here's a quick overview of the features I've developed:

Admin Dashboard
- Comprehensive revenue analytics with advanced filtering capabilities.
- Downloadable CSV reports for monthly and yearly data analysis.
Customer Wallet
- Seamless wallet top-up functionality for streamlined bookings.
- Hybrid payment system supporting wallet + card combinations.
- Complete wallet transaction history.
Check In
- Staff/Admin enabled customer check-in via search or QR code scanning,

Quick Dive Into new Features!

Admin Dashboard

The sleek UI was designed by me from start to finish and I'm quite proud of the overall design! But beyond aesthetics, this dashboard packs serious analytical power:

Comparative Summary: Real-time revenue, bookings, and seat occupancy metrics with month-over-month percentage changes—giving theater owners instant business health insights.
Download Booking Data: Generate .csv reports for any specified month and year, enabling external analysis and accounting integration.
Visualizations by timeframe: Interactive charts that adapt to different timeframes, built with responsive design principles to work seamlessly across devices.

Visualizations by specific time: Real power lies in specificity. Want data for Interstellar bookings made in the month of May, 2025 at Night - Done.

All the graphs are responsive in nature and will work regardless of your device screen dimensions adapting to the data present in your database!

Customer Wallet

A wallet sounds like a very simple feature but in reality it turned out to be a lot more challenging with a simple consideration, you're dealing with people's money which requires precision, security and proper audit trails in an actual enterprise! So I solved for the same:

Wallet Transaction History: Every transaction gets a unique ID and timestamp, creating an immutable history that meets financial compliance standards.

Add Funds: A wallet is useless if you can't even add funds to it isn't it?

Wallet Movie Bookings: Use your wallet funds to instantly book movie tickets!

Don't Have Enough Funds?: We've got you covered. You may pay for the remaining amount using cash!

Customer Check In

As a Staff/Admin, you can check-in customers in bulk or individually!

Bulk Check-In: Search through the paginated bookings by username/`phone/booking_id and check-in multiple customers at once!

QR Code Check-In: Scan customer tickets with QR codes to check them in!

Don't mind, it works on devices with a camera but my development machine needs an external one :D

Check out the documentation for the backend and frontend codebases!

Backend: GoLang based codebase
Frontend: Next.Js based codebase

DevOps Deep Dive: Let's go prod!

Why AWS?

Lets face it, AWS architecture diagrams look cool. And I wanted to build one of my own, being an AWS Certified Solutions Architect Associate. I've created some AWS solutions in the past but all of them were relatively small so I wanted to try out something big. Something enterprise level.

Architecture: Building for scale

The transition from a hobby project to an enterprise grade production level requires deep understanding of the fundamentals.

Security
Infrastructure
Observability
Scalability
Design and Architecture

Your project shouldn't just work, it should create a pleasant experience for all your customers. Keeping these in mind, I built this architecture from scratch putting my solution architecting and devops skill to the test!

Public Subnets Only: Initially, I planned private subnets with NAT gateways for "enterprise security." Reality check—the complexity wasn't worth the cost considering that this is a passion project. Public subnets with proper security groups provided the same protection at a fraction of the cost and complexity.

Path-Based Routing: The internal ALB routes requests using /payment-service/* and /movie-service/* patterns, creating clean service separation without the overhead of service discovery.

Bridge Networking: ECS tasks using bridge mode allow containers in the same task to communicate via container names. This enabled seamless sidecar monitoring without complex service discovery.

Infrastructure-as-Code with Terraform: Every piece of infrastructure is versioned and reproducible.

Security by Design: Zero secrets in code or containers. Everything sensitive lives in AWS Parameter Store injected at runtime. Even if someone scans the public endpoint, they'll find nothing but 403 errors.

Observability: Seeing What Matters

Monitoring isn't just about knowing if your system is up—it's about understanding how it behaves under real conditions. I ended up learning about an engineering paradigm that solo developers rarely explore.

ADOT sidecars collecting metrics from each service.

Some of the insights:

API Latency Patterns: The /login endpoint was consistently slower due to how the JWT authentication is implemented. This encouraged better authentication flows such as OAuth2 by Ory: Hydra
Malicious Traffic: Automated bots constantly scan for /admin, /.env, and /api/keys endpoints—all properly blocked and logged.

Custom ADOT Health Checker

The standard AWS ADOT container health checks were not working in my ECS setup, so I built a custom Go-based health checker. You can check out the implementation details in the DevOps repository

Operational Excellence: Beyond Just Working

Deployment Strategy: Rolling updates with 50% minimum healthy capacity—prioritizing cost efficiency over zero-downtime in my resource-constrained environment.

Auto-Scaling Intelligence: Services scale based on CPU > 70% OR Memory > 80%, with cluster-level scaling preventing resource exhaustion.

Cost Optimization Wins:

ARM64 Instances: t4g.small instances cut compute costs by 20% compared to x86 alternatives.
No NAT Gateway: Direct internet access eliminated $45/month in unnecessary costs.
ECR Lifecycle Policies: Automatic cleanup of old container images prevents storage bloat.

Container and Service Level Observability: Through CloudWatch, detailed insights about the container performance, service health, logs etc. can be observed providing clear audit trails. Auto clearance of logs after 7 days to stay within budget.

Key Insights & Technical Breakthroughs

What I'd Do Differently: I initially over-engineered the networking layer with private subnets and complex routing. Sometimes the simpler solution is the better solution.

Unexpected Challenge: Getting ADOT sidecars to reliably communicate with application containers. The solution—container links in bridge networking—was elegantly simple once discovered.

Skills Gained: This project transformed my understanding of production systems. "Production-ready" isn't just about code that works—it's about code that works reliably, scales predictably, fails gracefully, and provides visibility into its own behavior.

The Real Victory: Building a system that I can confidently demo to anyone, anywhere, knowing it will perform consistently and provide real insights into its own operation.

Full DevOps Documentation: For the complete infrastructure setup, deployment strategies, check out the SkyFox DevOps Repository

Takeaways

This project started from a simple desire to work on the set of features my teammates had built and ended up becoming a journey of learning where I built an enterprise level product on my own. I encountered countless problems and figured out solutions on my own enhancing my ability to think.

I played the role of a Frontend Engineer, Backend Engineer, DevOps Engineer, SRE and Product Manager all at once allowing me to think from 5 different perspectives! This project proves that there is no limit to learning.

My approach was validated when I heard this quote from my executive director - "When a developer starts thinking like a project manager, magic happens."

Let's connect - My LinkedIn

Engineering the Box Office: My Full Stack Movie Booking Platform Unveiled

Suteerth Subramaniam — Fri, 02 May 2025 12:50:29 +0000

Introduction

Have you ever paused to wonder what really happens when you book a movie ticket online, when you check show details or reserve your favorite seat? I’ve always been fascinated by the complexity beneath that simple click-and building this project gave me the perfect opportunity to explore it firsthand.

SkyFox Cinema is a modern, full stack movie booking platform designed to help regional theaters embrace digital transformation. My goal was to empower local cinema owners with a robust and scalable system that leverages the latest in software engineering practices-while also challenging myself to solve real-world business and technical problems (this was a fictitious scenario I created for myself)

Check it out here signing up as a customer

Tech Stack:

NextJS (Frontend)
Chakra UI and Material UI (UI Libraries)
Go (Backend, Gin Framework)
Supabase (Managed Postgres)
Docker (Containerization)
AWS (Deployment & S3 Integration)

In this blog, I’ll take you behind the curtain of SkyFox Cinema: from designing resilient backend microservices and implementing real-time seat locking, to building a modular, CSS-free frontend and deploying the platform on AWS. You’ll get an insider’s look at the architectural decisions, challenges, and solutions that shaped this project.

This isn’t a step-by-step tutorial, but a candid reflection on the development journey-highlighting the business impact, technical rigor, and personal growth that came with building a production-grade proof of concept. I was determined to tackle the kinds of challenges that established vendors often charge a premium for: concurrency, security, seamless user experience, and more.

Whether you’re a developer, a tech leader, or someone curious about what powers your favorite ticketing app, I hope this post offers valuable insights and maybe even sparks your own curiosity.

TL;DR

Built a full-stack movie booking app solo during/after my IDFC FIRST Bank internship.
Used Go, Next.js, Supabase, AWS, Docker, and more.
Implemented real-time seat locking, secure image uploads, and RBAC.
Hosted on Vercel and AWS with microservices on Render.
Deep dive below on architecture, features, and key lessons.

Motivation

My internship at IDFC FIRST Bank was a turning point in my journey as a developer. Through the Neev Developer Bootcamp, I didn’t just pick up the technical fundamentals but also learned the real value of teamwork and shared goals. Working with my team, “ULTRON,” was a highlight; together, we navigated challenges, celebrated every small win, and discovered how much more is possible when you collaborate. That experience lit a spark in me to push my boundaries even further.

After the bootcamp, my curiosity was insatiable. I wanted to take everything I’d learned and see what I could build on my own. I saw clear opportunities for improvement in our original project: the backend could be more RESTful, the frontend could leverage newer technologies, and there was a whole world of DevOps and cloud deployment waiting to be explored.

My hands-on experience with AWS gave me the confidence to step up-not just as a developer, but as a lead architect and DevOps engineer for a full-stack solution.

I set out to become a Full Stack++ Developer-someone who could not only work across the stack, but also connect business needs with technical solutions. This project became my sandbox: I rebuilt every layer, from backend concurrency and microservices to a modern frontend, cloud deployment, and robust security.

What made this journey truly ambitious was the sheer modularity and scope. Every feature felt like a mini project in itself. In real-world companies, entire teams would tackle these challenges, but I was determined to take on every role, learning through both successes and setbacks (and, of course, plenty of coffee)

Architectural Overview and Key Technical Implementations

The architecture of SkyFox Cinema is designed for modularity, security, and real-world reliability-even as a proof of concept. While this isn’t a full-blown enterprise deployment yet, it’s packed with advanced engineering patterns and cloud-native practices.

System Architecture at a Glance

SkyFox Cinema is composed of three primary layers:

Frontend: Next.js and React, hosted on Vercel.
Backend & API Gateway: Go backend, containerized and deployed on AWS Elastic Beanstalk, protected by an NGINX reverse proxy acting as an API gateway.
Microservices: Dedicated movie and payment services, each containerized and hosted on Render, communicating securely with the core backend.
Database & Storage: Supabase (Postgres) for relational data, AWS S3 for profile image storage.

Frontend: Modern, Modular, and Delightfully Secure

A showcase of modern web engineering. With Chakra UI and Material UI, the interface is fully responsive and styled-without a single line of custom CSS. Vercel handles deployments and SSL automatically, letting me focus on features, not infrastructure.

Highlights:

API Proxy Layer: All API calls go through Next.js API routes, keeping backend endpoints and secrets hidden from the client.
Role-Based UI: The interface dynamically adapts to user roles (customer, staff, admin), ensuring everyone sees only what’s relevant.
Context-Driven State: React Context and custom hooks power real-time data refresh, centralized dialog management, and smooth multi-step flows.
Security on the Client: Sensitive data stays server-side; authentication and authorization use secure cookies and server logic.

Complex UI Components & User Experience

SkyFox Cinema’s UI is built for clarity and engagement. Multi-step signup and booking dialogs, profile update flows, and show cards are all modular and reusable. The booking journey guides users through seat selection, payment, and confirmation-with real-time seat availability and feedback at every step.

Contexts, Reducers, and Custom Hooks

State management is handled with React’s Context API, useReducer, and custom hooks. The centralized dialog context manages all modals, eliminating prop drilling and making it easy to add new dialogs. Complex forms like profile management use useReducer for secure, multi-step updates.

Real-Time Data Refresh & Cache Invalidation

A dedicated Shows Context ensures that after any booking or show scheduling, all relevant seat maps and show lists refresh instantly-no manual reloads needed. This is achieved via cache invalidation and context-driven updates, so users always see the latest data.

Show Scheduling & Management

Admins can schedule new shows with an intuitive dialog-selecting movies, time slots, and pricing. The backend enforces business rules (no past-dated shows or slot conflicts), while the frontend delivers instant feedback and real-time updates.

Theme, Fonts, and UX Details

The theme is fully customized with Chakra UI, featuring brand colors, custom fonts, and responsive breakpoints. Payment forms auto-detect Visa/Mastercard icons via regex and display the right card logo, while skeleton loaders keep the UI polished and user-friendly.

Backend & Microservices: Resilient and Scalable

The Go (Gin) backend follows clean architecture-controllers, services, and repositories are strictly separated for maintainability. It’s containerized and deployed on AWS Elastic Beanstalk, running behind an NGINX reverse proxy that handles API key validation and rate limiting.

Microservices

Movie Service: Handles movie metadata, decoupled for scalability.
Payment Service: Validates payments with strict input checks and is fully covered by TDD, ensuring reliability for critical business logic. It even simulates a payment failure ;) with a small probability

Database & Storage: Integrity and Security

Supabase (Postgres): All transactional data-users, bookings, shows, seats, payments-lives in a normalized schema.
AWS S3 for Profile Images: Images are uploaded through a secure, multi-step process:
- The client computes a SHA-256 hash and sends it with the image.
- The backend verifies, rescales, and uploads to S3 using IAM roles (no access keys needed).
- Only a 24-hour presigned URL is ever given to the client, further abstracted through Next.js proxy routes.

Concurrency, Real-Time Booking, and Data Integrity

Seat Locking with GoRoutines:When a user starts booking, the backend launches a goroutine to lock seats for 5 minutes. If the booking isn’t completed, the goroutine releases the seats-no double bookings, no race conditions, even under heavy load.

Two-Phase Booking: Customers reserve seats (pending booking) and then complete payment. Admins can bypass payment for walk-in bookings.
PDF and QR Generation: On booking confirmation, the backend generates a PDF ticket and QR code on demand. These are streamed to the frontend via secure proxy routes-never exposing raw files or URLs.

Security Features: Defense in Depth

JWT Tokens: Authentication with user roles embedded and validated on every request.
RBAC (Role-Based Access Control): Strict role checks on both backend and frontend.
Input Validation: Every API endpoint validates input at multiple layers.
SQL Injection Prevention: All queries use parameterized statements.
SHA-256 Image Validation: Ensures profile image integrity before upload.
API Proxy and Presigned URLs: Sensitive operations are handled server-side; only temporary, signed URLs are shared.
Separation of Concerns: The frontend talks only to its own API layer, which then communicates with the backend-a clean, auditable boundary.

Migrations, Data Seeding, and Error Handling

Automated Migrations: Versioned migration files keep schema changes consistent.
Data Seeding: The backend seeds initial users, movies, and seat maps for quick onboarding.
Error Handling: All errors are standardized, logged, and tagged with unique request IDs for easy troubleshooting.

APIs & Documentation

RESTful APIs: The backend exposes a comprehensive set of REST endpoints, all documented with clear request/response schemas.
Live Documentation: Explore the full API and data contracts in the SkyFox Backend API Docs.
Source Code:

Challenges and Solutions

Every ambitious project comes with its own set of “plot twists”-and SkyFox Cinema was no exception. What started as a mission to tackle the problems I missed out on during my internship project simulation quickly spiraled into a full-scale re-engineering adventure.

Turns out, when you’re in your element (and fueled by enough coffee), hours can vanish building a single feature! Here are some of the challenges that truly tested me-and the creative (sometimes stubborn) solutions I found:

SHA Validation and Hiding S3 Presigned URL: This one was a “problem I invented for myself,” but it became a masterclass in security and architecture. I wanted to make sure users never saw the S3 presigned URL in their browser’s network tab-because, let’s face it, sharing direct access to your storage bucket isn’t ideal. The solution? I leveraged Next.js proxy routes, so only the frontend server ever talks to the backend for presigned URL generation and file access. This led me to adopt a clean, industry-standard Client → Frontend → Backend interaction pattern, where sensitive operations are always server-side. Bonus: it forced me to build a consistent SSR-driven architecture throughout the app.
Security Question and Password Tokens: Nobody asked for security questions or password reset tokens, but I wanted to push my understanding of secure authentication flows. I ended up implementing a dedicated token system for these interactions-so password resets and security question verification are isolated from regular session tokens. Not only did this make the system more robust, it gave me a taste of how enterprise-grade platforms might handle sensitive user flows.
Concurrency & Simultaneous Bookings: Handling two people trying to book the same seat at the exact same time is the classic “race condition” problem. The solution sounds simple: temporarily block the seat. But the technical reality was a wild ride-think GoRoutines, Worker Pools, Temporary DB bindings, Pending states and a lot of backend/frontend coordination. Making sure the frontend stayed decoupled from business logic (no seat-locking in the browser!) while keeping everything in sync took over 40 hours of deep work and a few existential crises. But now, double-bookings are a thing of the past.
Frontend: Dialogs, Modals & UI Library Wrangling: You’d think building dialogs and modals would be easy, right? Not when you’re integrating two different UI libraries and want everything to look and feel seamless. Making Chakra UI and Material UI play nicely together, ensuring full responsiveness, and keeping the UX smooth took more trial and error than I care to admit. Even the smallest UI component can turn into a mini-project!
DB Architecture: Being the Backend Engineer, Frontend Engineer, and Database Administrator all at once is a workout. Designing a schema with the right constraints, cascades, and future-proofing for new features was a lesson in humility. Every table and relationship had to be thought through, especially with features like seat locking and booking status that touch multiple parts of the system.
Wearing Every Hat (Even Project Manager): With no team to hand things off to, I became my own project manager-planning features, deployments, and roadmaps. Juggling all these roles gave me a new appreciation for how much coordination goes into real-world software projects.

What's Next

SkyFox Cinema is just getting started! Coming up:

A Check-In feature for confirmed bookings, so users can mark their arrival at the theater.
An Admin Dashboard with revenue stats, filters, and insights-because data is power.
A Customer Wallet for card-less and partial payments, making transactions even smoother.

And of course, I’ll be rolling out the full production-grade architecture. Why not now? Well, running that setup in the cloud costs $18 a week (and yes, it could handle thousands of monthly active users with plenty of concurrency!). For now, the POC is more than enough to show what’s possible-and to keep my wallet happy.

Who knows what challenges (and fun) the next version will bring? Stay tuned!

Building a Modern Portfolio with Next.js, MDX, and AWS

Suteerth Subramaniam — Sat, 15 Feb 2025 20:26:34 +0000

👉 Check out my portfolio website here or here and let me know what you think! (yes I have two domains ;D)

A personal portfolio is more than just a website—it's a digital reflection of your journey, achievements, and much more. With that in mind, I set out to create a modern, high-performance portfolio that not only serves as a showcase but also as a platform for blogs, documenting experiences, and sharing insights.

Why Next.js and MDX?

I chose Next.js for its powerful features like server-side rendering (SSR), static site generation (SSG), and dynamic routing—all essential for building a fast and scalable portfolio. Additionally, MDX (Markdown for JSX) allows me to write blog posts in Markdown while seamlessly integrating React components, making content more interactive and engaging.

Project Overview

Tech Stack

📌 Framework: Next.js

📌 Content Management: MDX

📌 Styling: Sass + PostCSS

📌 Syntax Highlighting: Prism.js

📌 Deployment: Vercel

📌 Email & Rate Limits: AWS (SES, Lambda, API Gateway, DynamoDB)

Custom Architecture on AWS

As an AWS Certified Solutions Architect Associate, I designed a self-sufficient architecture to handle:

✅ Rate limiting

✅ Email notifications

✅ Scalability needs

Features

✨ Dynamic Routing: Navigate seamlessly through different sections like About, Academia, Blog, and Beyond Resume.

✨ MDX Integration: Write blog posts in Markdown while embedding React components.

✨ Customizable Themes: Built using Sass and PostCSS.

✨ High-Performance Rendering: Optimized for speed with Static Site Generation (SSG) and Incremental Static Regeneration (ISR).

✨ Syntax Highlighting for Code Snippets: Using Prism.js, my blog supports syntax highlighting for technical posts.

Custom Email Service using AWS

📩 Sending emails from my custom domain using AWS SES.

📝 AWS Lambda (written in Golang) processes the email requests.

🌍 API Gateway handles endpoints with DynamoDB-backed rate limiting.

This ensures a scalable, efficient, and cost-effective email system for my portfolio.

Beyond Tech: Who Am I?

💡 FinTech & Cloud Enthusiast—Passionate about building scalable, efficient, and customer-centric solutions.

🏋️ Advanced Powerlifter & Fitness Enthusiast—Applying resilience, discipline, and continuous growth in all aspects of life.

🔄 Multipotentialite—Constantly exploring and learning across domains.

Let’s Connect!

💬 Drop a comment below—let’s talk tech, cloud, or career growth!

🔗 Connect with me on LinkedIn

🚀 Onwards and upwards!