Recently, I built a Typeform-style survey app using Next.js, Tailwind, Framer Motion, and Google Sheets — but I didn’t do it alone. I used ChatGPT as a coding partner. The whole experience felt less like a traditional coding sprint and more like “vibe coding”: creative, conversational, exploratory. It was as if I had a collaborative co-pilot that helped me experiment and iterate freely.
Here’s how the conversation unfolded and how it led to a production-ready, animated survey form that stores responses in Google Sheets.
What is Vibe Coding?
Vibe coding is a style of working where you build with flow and intuition. It’s less about strict planning and more about trying ideas out quickly, adjusting on the fly, and letting a tool like ChatGPT help clear roadblocks as they come.
In this project, I didn’t start with a detailed spec. I had a feeling: “I want a smooth, one-question-at-a-time survey with nice transitions, like Typeform. I want to style it in Tailwind. I want responses to go to Google Sheets.”
That was it. The rest came together through a dynamic back-and-forth with ChatGPT.
The Prompt that Started It
I asked:
“Create a beautiful Typeform-style survey that gathers feedback from users about a real-time heating and cooling system called ‘momentum’. Results should go to Google Sheets.”
ChatGPT delivered a component breakdown, React/Next setup, Tailwind-based styling, Framer Motion animations, and API integration steps.
We kept building step by step: components, question logic, form validation, animation, and API routing.
Debugging in Flow
When I hit a wall (like a setValue is not a function error), I pasted the error and ChatGPT explained exactly what was wrong: I forgot to pass setValue to a child component. Fixed it in seconds.
When I saw ERR_OSSL_UNSUPPORTED, ChatGPT knew it was an OpenSSL issue with Node 18+, and walked me through adding NODE_OPTIONS=--openssl-legacy-provider — and even how to fix it cross-platform with cross-env.
When Google Sheets failed to parse the range, ChatGPT told me to check the sheet tab name. Sure enough, my tab was still called “Sheet1” instead of “Responses”.
Survey Flow Fixes
One tricky UX bug: the form submitted itself when landing on the final (email) question. ChatGPT helped me solve it by:
- Removing the
<form>tag - Triggering
handleSubmit(onSubmit)only when the user clicks Submit - Preventing Enter from acting like a submit inside the email input
These small tweaks made the app feel slick, intentional, and user-friendly.
Adding a Final Touch
To replace the boring alert("Thank you"), I asked:
“Can you add a thank you animation after submission?”
Within seconds, ChatGPT gave me a Framer Motion-powered success screen. Now after users submit, they see a clean, animated confirmation page instead of an interruptive popup.
Eventually i ended up with:
with the answers going to:
Final Thoughts
I started this project without a plan — just a vibe. But thanks to ChatGPT, I built:
- A multi-step animated survey UI
- Accessible, mobile-friendly form flow
- Instant storage to Google Sheets
- Clean error handling and success states
Vibe coding with AI gave me speed, clarity, and momentum. If you’re curious what it’s like to build something with just a prompt and a goal, try it. Ask, adjust, vibe out.
You might be surprised what you create.
See the code here: https://github.com/mikebutts/momentum-survey
running on vercel: https://momentum-survey-ccrk.vercel.app/
Leave a reply