How AI Tools Compressed Weeks of Work Into Just Two Days
During our recent hackathon at work, we built a real-time, multiplayer quiz platform that transforms classroom engagement through live, interactive quizzes. What started as a whiteboard session evolved into a fully functional application with AI-powered question generation, real-time WebSocket communication, and serverless backend infrastructure deployed to AWS.
This is how we went from concept to working product in just 10-12 hours of brainstorming and development.
Phase 1: Initial Brainstorming and Stack Selection
Leveraging Prior Knowledge
Our team began by mapping out our collective expertise against the hackathon's time constraints. We needed a stack that would allow us to move fast while maintaining production-quality code. Our technology decisions were driven by three key factors:
- Team Familiarity: React/TypeScript for type-safe frontend development
- Real-time Requirements: Socket.io for bidirectional, event-based communication
- Scalability: AWS Lambda for serverless, auto-scaling backend services
AI-Assisted Architecture Design
Rather than spending hours in architecture meetings, we leveraged AI tools (Claude, ChatGPT) to rapidly prototype our system design. Through iterative conversations, we:
- Designed a comprehensive data model for quizzes, questions, and game sessions
- Architected a three-tier system: Frontend (React), Backend API (AWS Lambda), and WebSocket Server (Node.js)
- Planned the real-time event flow for multiplayer quiz sessions
- Identified potential bottlenecks and scaling considerations
AI-assisted planning compressed what would typically take 2-3 days of architecture meetings into 1-2 focused hours. We emerged with a clear technical roadmap and confidence in our approach.
Final Stack Decision
Frontend: React + TypeScript + Vite
Backend: Python + AWS Lambda + Bedrock (Claude Sonnet 4)
WebSocket: Node.js + Socket.io + Express
UI: Custom UI Design system (created by our org)
Deploy: AWS SAM + API Gateway
Phase 2: Backend Development - Serverless Quiz Generation
The Lambda Function Architecture
Our backend centerpiece is an AWS Lambda function that generates quiz questions from PDF documents using Claude Sonnet 4 via AWS Bedrock. Here's a glimpse into our implementation:
def generate_quiz_questions(
pdf_data: bytes,
question_count: int = 5,
additional_instructions: str = ""
) -> Dict[str, Any]:
"""Generate quiz questions from PDF using Bedrock."""
# Initialize Bedrock Runtime client
bedrock_client = boto3.client('bedrock-runtime', region_name=NEPTUNE_REGION)
# Encode PDF as base64 for Claude
pdf_base64 = base64.b64encode(pdf_data).decode('utf-8')
# Build the message structure for Claude
messages = [
{
"role": "user",
"content": [
{
"type": "document",
"source": {
"type": "base64",
"media_type": "application/pdf",
"data": pdf_base64
}
},
{
"type": "text",
"text": user_message
}
]
}
]
# Prepare the request body
request_body = {
"anthropic_version": "bedrock-2023-05-31",
"max_tokens": MAX_TOKENS,
"temperature": 0.2,
"system": SYSTEM_PROMPT,
"messages": messages
}
# Generate quiz questions using Bedrock
response = bedrock_client.invoke_model(
modelId=LLM_MODEL_ID,
body=json.dumps(request_body),
contentType='application/json'
)
Some of the key features of the endpoint:
- PDF Processing: Accepts base64-encoded PDFs up to 3.75MB
- AI Generation: Uses Claude Sonnet 4 for intelligent question creation
- Structured Output: Returns JSON with questions, options, and correct answers
- Error Handling: Comprehensive validation and error responses
Deployment Strategy
We used AWS SAM (Serverless Application Model) for infrastructure as code, which provided several key advantages:
Some of the benefits:
- Easy Configuration: Define Lambda functions, API Gateway endpoints, IAM roles, and environment variables in a single YAML template
- Resource Creation: SAM automatically provisions API Gateway, CloudWatch logs, and IAM execution roles
Our initial setup using SAM:
bash
# 1. Package Python dependencies
./package.sh # Bundles boto3, aws-lambda-powertools, and other dependencies
# 2. Build SAM application
sam build --use-container # Uses Docker for consistent, reproducible builds
# 3. Interactive deployment
sam deploy --guided
After initial setup, subsequent deployments become a single command:
sam build && sam deploy
What would require 20-30 minutes of manual AWS Console clicking (creating Lambda, configuring API Gateway, setting up IAM roles) becomes a single command. This was crucial for hackathon velocity since we could deploy updates multiple times per hour.
Once deployed, SAM outputs the API endpoint URL, making testing immediate:
# Test the live endpoint
curl -X POST https://[api-id].execute-api.us-east-1.amazonaws.com/dev/quiz/generate \
-H "Content-Type: application/json" \
-d '{"file": "base64_pdf_data", "questionCount": 5}'
Phase 3: Frontend Development - Rapid UI Generation
Frontend Development Workflow
Rather than building UI components from scratch, we leveraged our in house design system in order to save time. We also used Figma Make in order to create a good starting point for our frontend development.
Our process involved:
- Design Phase: Created high-fidelity mockups in Figma
- Component Generation: Used Figma Make to generate initial React components
- Refinement: Enhanced generated code with business logic and state management
Component Architecture
Our frontend is organized into feature-based components including:
- TeacherDashboard.tsx; // Quiz creation and management
- StudentJoinQuiz.tsx; // Student entry point with room codes
- LiveQuizTeacher.tsx; // Host view with real-time controls
- LiveQuizStudent.tsx; // Student answer interface
- GameLibrary.tsx; // Quiz history and analytics
- QuizCoordinator.tsx; // Orchestrates game flow
- CreateQuizModal.tsx; // PDF upload and quiz generation
Key Features include:
- Real-time player tracking
- Automatic question progression
- Live answer statistics
- Timer management
Phase 4: Socket.io Integration
The Challenge
The core requirement was real-time synchronization across multiple clients:
- Teacher starts question → All students see it instantly
- Students submit answers → Teacher sees live response counts
- Leaderboard updates → Everyone sees rankings in real-time
- Game state changes → All clients stay synchronized
Event-Driven Architecture
Our Socket.io implementation follows a clean event-driven pattern:
Teacher Events:
- create-session → Generates room code, initializes game state
- start-quiz → Broadcasts to all students in room
- next-question → Advances game state, syncs question
- end-session → Finalizes scores, saves leaderboard
Student Events:
- join-room → Validates room code, adds to participant list
- submit-answer → Records response, calculates score
- disconnect → Handles cleanup
Broadcast Events:
- session-state → Syncs complete game state
- quiz-started → Notifies all participants
- question-changed → Syncs new question data
- answer-submitted → Updates live response indicators
And on the client side, we created a custom React hook for Socket.io integration.
Results & Key Takeaways
What We Built
- AI-Powered Question Generation from PDFs using Claude Sonnet 4
- Real-Time Multiplayer quiz sessions with Socket.io
- Teacher Dashboard with quiz management and live controls
- Student Interface with live leaderboards and instant feedback
- Serverless Backend deployed to AWS Lambda
- Responsive Design that works on desktop, tablet, and mobile
Performance Metrics
- Quiz Generation: 15-30 seconds for 10 questions from a 20-page PDF
- Concurrent Users: Successfully tested with 10+ simultaneous participants
- Deployment Time: 3 minutes from code to production
Key Takeaways
- AI as a Force Multiplier: Using AI for architecture planning, code generation, and problem-solving accelerated development by 3-4x.
- Serverless Wins for Hackathons: Lambda's zero-ops model let us focus entirely on features. No time wasted on server provisioning, scaling configuration, or infrastructure management.
Future Enhancements
Persistence Layer:
- DynamoDB for quiz history and analytics
- S3 for PDF storage and caching
- Redis for session state
Authentication & Authorization:
- Teacher accounts with OAuth integration
- Student profiles and progress tracking
Advanced Analytics:
- Question difficulty analysis
- Student performance tracking over time
Collaborative Features:
- Multiple teachers co-hosting sessions
- Peer review of generated questions
And finally...
This hackathon project demonstrated that modern development tools such as AI assistants, serverless platforms, design systems, and real-time frameworks can enable small teams to build sophisticated applications in remarkably short timeframes.
The combination of strategic technology choices and AI-assisted development allowed us to focus on solving real problems rather than wrestling with boilerplate code. The result was a production ready (somewhat 🙂) quiz platform that improves classroom engagement and learning outcomes.
Most importantly, we proved that with the right tools, approach, and team, ambitious ideas can go from whiteboard to working product in just a few days.
Top comments (0)