Building a Soccer Video Analysis App with SST, Next.js, Lambda, and API Gateway: The Power of Modern Serverless Architecture

Building a Soccer Video Analysis App with SST, Next.js, Lambda, and API Gateway: The Power of Modern Serverless Architecture

Table of Contents

  1. Introduction

  2. When to Choose SST

  3. Getting Started with SST

  4. Building Goal Whisper

  5. Goal Whisper Architecture Overview

  6. Implementation Deep Dive

  7. Development Experience

  8. Challenges

  9. Conclusion

Introduction

You can deploy a Next.js serverless app through the AWS console or use Infrastructure as Code (IAC). What makes IAC stand out from the console is its ability to provide version control, reproducible deployments, automated rollbacks, and team collaboration. With IAC, your entire infrastructure becomes code that can be reviewed, tested, and deployed consistently across different environments. This eliminates configuration drift and manual errors that commonly occur with console-based deployments.

We have different IAC options available, such as CloudFormation, Terraform, CDK, and others. Infrastructure as Code tools allow you to define your cloud resources using declarative configuration files, enabling you to manage infrastructure with the same best practices used for application code. This includes version control, code reviews, automated testing, and continuous deployment pipelines. Terraform might be too much for some use cases, so I'll be talking about SST as a more approachable alternative.

When to Choose SST

SST (Serverless Stack) is an open-source modern framework that helps you build, deploy, and manage serverless applications. You have full access to AWS services, making it ideal when you're implementing Next.js without Vercel. AWS offers a wealth of private options like S3, RDS, and a comprehensive range of backend services (SQS, SNS, ECS, Lambda, etc.) that most startups need.

Vercel is excellent and provides a great developer experience, but the lack of serious backend services would be a major drawback for many applications. Building your Next.js app on AWS gives you access to everything AWS offers—eliminating the need for third-party solutions and providing enterprise-grade services out of the box.

SST is particularly valuable if you have limited AWS expertise and need a more guided approach. It excels at abstracting away complex infrastructure problems like configuring networking, security groups, IAM roles, and deployment pipelines.

Here's what SST handles for you:

  • Infrastructure as Code for AWS (without writing complex CloudFormation or Terraform)

  • Deployment automation — packages, uploads, and configures everything on AWS

  • Local development experience — sst dev runs your app locally as if it were deployed on AWS

  • Resource binding — seamlessly link Lambda, S3, DynamoDB, or external services to your Next.js app with just a few lines of code

  • Type safety — full TypeScript support across your infrastructure and application code

You should use SST for small to medium projects where you want to rapidly develop and deploy serverless applications without getting bogged down in infrastructure complexity.

When to Use CDK, Terraform, or CloudFormation

Consider CDK when you're building much larger applications and have more experience with AWS. CDK provides more granular control and supports multiple programming languages, making it suitable for complex enterprise scenarios.

Terraform is ideal for infrastructure-heavy applications that need to manage existing non-AWS resources, multi-cloud deployments, or when you require advanced state management and planning capabilities. it use a declarative language called HCL.

Getting Started with SST

Prerequisites:

  • AWS account setup - Connect your AWS account with proper IAM permissions

  • Node.js 18+

  • Basic TypeScript knowledge

  • AWS CLI installed and configured

For comprehensive setup instructions, check out the official SST documentation.

# 1. Install SST globally
npm install -g sst

# 2. Create a new Next.js project with SST
npx create-next-app@latest aws-nextjs
cd aws-nextjs

# 3. Init SST, This’ll create a sst.config.ts file in your project root
npx sst@latest init

# 4. Start local development (connects to AWS)
npx sst dev

#5. Deploy to production
npx sst deploy --stage production

The beauty of SST is that sst dev creates a live connection to AWS, so your local development environment uses real AWS services while maintaining fast feedback loops.

Building Goal Whisper

Goal Whisper is a soccer video analysis application built with AWS Rekognition, AWS Lambda, API Gateway, and DynamoDB. SST allowed me to build and deploy this entire application in a very short time, demonstrating the power of modern serverless architecture.

Key Capabilities:

📹 Video Upload Interface - Accepts video uploads through a modern, responsive web interface with drag-and-drop functionality
⚽ AI-Powered Soccer Analysis - Analyzes soccer gameplay using AWS Rekognition for player detection, movement tracking, and key moment identification
📊 Detailed Insights - Provides comprehensive insights about player movements, game statistics, and tactical analysis
🚀 Real-time Results - Delivers analysis results through a responsive Next.js frontend with live status updates
🎬 YouTube Integration - Supports direct YouTube URL processing for analyzing online soccer content (not working at the time of writing this, still in progress)

Goal Whisper Architecture Overview

Here's the complete serverless architecture we built:

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Next.js App   │────│   API Gateway   │────│ Lambda Functions │
│   (Frontend)    │    │   (REST API)    │    │  (Video Analysis)│
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         │                       │                       │
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   CloudFront    │    │    DynamoDB     │    │   S3 Bucket     │
│     (CDN)       │    │   (Database)    │    │ (Video Storage) │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                                             │
         │              ┌─────────────────┐           │
         └──────────────│ AWS Rekognition │───────────┘
                        │   (AI Analysis) │
                        └─────────────────┘

Implementation Deep Dive

Upload Process

  • Frontend UI: https://github.com/pauxiel/goalwhisper/blob/main/src/components/form.tsx (lines 40-120)

  • Backend Pre-signed URL: https://github.com/pauxiel/goalwhisper/blob/main/src/app/page.tsx (lines 8-15)

  • YouTube Download: https://github.com/pauxiel/goalwhisper/blob/main/src/app/api/download-youtube/route.ts

Validation System

  • Frontend Validation: https://github.com/pauxiel/goalwhisper/blob/main/src/components/form.tsx (lines 150-200)

  • YouTube Validation: https://github.com/pauxiel/goalwhisper/blob/main/src/app/api/download-youtube/route.ts (lines 10-25)

Storage Infrastructure

  • S3 Configuration: https://github.com/pauxiel/goalwhisper/blob/main/sst.config.ts (VideoBucket resource)

  • Upload Handler: https://github.com/pauxiel/goalwhisper/blob/main/src/components/form.tsx (handleUpload function)

  • S3 Event Trigger: https://github.com/pauxiel/goalwhisper/blob/main/src/functions/video-processor.ts

Analysis Engine

  • Analysis Trigger: https://github.com/pauxiel/goalwhisper/blob/main/src/functions/video-processor.ts (main handler)

  • Job Management: https://github.com/pauxiel/goalwhisper/blob/main/src/functions/analysis-processor.ts (results fetching)

Results Processing

  • Results Processing: https://github.com/pauxiel/goalwhisper/blob/main/src/functions/analysis-processor.ts (generateSoccerAnalysis function)

  • Data Storage: DynamoDB table (configured in https://github.com/pauxiel/goalwhisper/blob/main/sst.config.ts)

  • Results API: https://github.com/pauxiel/goalwhisper/blob/main/src/functions/get-analysis.ts (retrieves results)

  • Frontend Display: https://github.com/pauxiel/goalwhisper/blob/main/src/components/form.tsx (polling and UI display)

Development Experience

Local Development

SST's sst dev command creates a remarkable development experience:

  • Live AWS Connection - Your local app connects to real AWS resources

  • Hot Reloading - Changes are reflected instantly

  • Environment Parity - Development environment mirrors production

  • Debug Capabilities - Full debugging support with VS Code integration

Deployment Pipeline

# Development deployment
npx sst dev

# Staging deployment
npx sst deploy --stage staging

# Production deployment
npx sst deploy --stage production

Each stage is completely isolated with separate AWS resources, ensuring safe testing and deployment practices.

Challenges

During development, we encountered several interesting challenges that provided valuable learning experiences. One significant difficulty was working with the AWS Rekognition Video API's asynchronous nature, particularly around job tracking and result polling. The API doesn't provide real-time notifications, requiring us to implement a polling mechanism to check analysis completion status.

Another challenge involved S3 event notifications and Lambda triggers. Initially, our file upload process wasn't properly triggering the analysis pipeline due to file extension filtering mismatches. We had to debug the S3 notification configuration to ensure all uploaded files, regardless of extension, would trigger the processing workflow.

The integration between multiple AWS services also presented complexity in terms of IAM permissions and resource binding, but SST's abstraction layer helped significantly in managing these interconnections.

Conclusion

Building Goal Whisper with SST, Next.js, and AWS services demonstrated the incredible power and efficiency of modern serverless architecture. What traditionally would have taken more time for infrastructure setup and configuration was accomplished in just a few hours of focused development.

This is due to the framework's ability to abstract complex AWS configurations while maintaining full access to AWS services, which makes it possible to focus on building features rather than managing infrastructure.

For developers looking to build small to medium modern, scalable applications without the overhead of traditional infrastructure management, the combination of SST, Next.js, and AWS services provides a compelling solution.