Building an AI Survey with SST v3, Next.js, and Claude

SST
AWS
DynamoDB
Next.js
AI
Claude

12/4/2024


Share this post:


Export:

Building an AI Survey with SST v3 and Next.js

Survey

37 Minutes to Production: From initial concept to deployed application, including a DynamoDB backend, React frontend with Joy UI, and full error handling - all pair programmed with Claude. This is the power of modern AI-assisted development!

Today marks a special milestone in my development journey - my first DynamoDB implementation! What makes this even more interesting is how it came together through a unique collaboration with AI. Let me walk you through this experience.

The Journey Began with Ideation

The initial concept started in a conversation with Claude in my Bike4Mind app, where we brainstormed questions for a survey about AI usage in the workplace. The goal wasn't to gather CTO or CEO perspectives, but rather to understand how frontline workers are actually using AI in their daily work.

Some key questions we wanted to explore:

  • Are workers currently using AI to do any part of their job?
  • Have they told their bosses or peers?
  • Are they encouraged to use AI and share best practices?
  • Are they keeping their AI usage secret for competitive advantage?

Moving from Concept to Code

After the ideation phase, we moved the conversation to Cursor.ai, where Claude helped implement the technical solution. Here's what we built:

  1. Infrastructure with SST v3
const surveyTable = new sst.aws.Dynamo("SurveyResponses", {
  fields: {
    id: "string",
    createdAt: "number",
  },
  primaryIndex: { hashKey: "id" },
  globalIndexes: {
    createdAtIndex: { hashKey: "createdAt" }
  },
});
  1. React Components with Joy UI
  • A clean, user-friendly survey interface
  • Real-time response handling
  • Results display with proper loading states
  • Confirmation modals for destructive actions
  1. DynamoDB Integration
  • POST endpoint for survey submissions
  • GET endpoint for retrieving responses
  • Clear functionality with proper error handling

Technical Highlights

Some interesting technical aspects we tackled:

  • Properly handling controlled vs uncontrolled components in Joy UI
  • Setting up DynamoDB with SST v3's new syntax
  • Managing state between form submission and results display
  • Implementing proper error handling and loading states

Lessons Learned

  1. SST v3 Simplifications

    • The new sst.aws.Dynamo construct makes database setup much cleaner
    • Only defining indexed fields in the schema keeps things simple
  2. DynamoDB Best Practices

    • Understanding partition keys and global indexes
    • Handling JSON stringification for complex objects
  3. Modern React Patterns

    • Using controlled components with proper initialization
    • Managing modal state and confirmations
    • Handling async operations with proper loading states

The AI Pair Programming Experience

What made this project unique was the collaborative nature of working with Claude. The AI helped with:

  • Initial survey question ideation
  • Technical architecture decisions
  • Code implementation and debugging
  • Best practices and error handling

The ability to move from conceptual discussions in one environment (Bike4Mind) to technical implementation in another (Cursor.ai) showcases the flexibility and power of modern AI assistants in the development process.

Looking Forward

This project serves as a foundation for gathering valuable insights about AI usage in the workplace. The next steps include:

  • Adding more sophisticated questions
  • Implementing analytics for response data
  • Adding authentication for admin access
  • Creating visualization components for survey results

Conclusion

Building this survey system was not just about creating a technical solution - it was about experiencing firsthand how AI can be a valuable partner in the development process, from ideation to implementation. The fact that we're using AI to build a survey about AI usage adds a delightful meta-layer to the whole experience!

The code is open source and available on my GitHub, serving as a real-world example of SST v3, Next.js, and DynamoDB working together in a modern web application.


Special thanks to Claude for being an exceptional pair programming partner in this journey!



Subscribe to the Newsletter

Get notified when I publish new blog posts about game development, AI, entrepreneurship, and technology. No spam, unsubscribe anytime.

By subscribing, you agree to receive emails from Erik Bethke. You can unsubscribe at any time.

Comments

Loading comments...

Comments are powered by Giscus. You'll need a GitHub account to comment.