My Vibe Coding Journey - Developing an AI-Powered English Learning Application
I want to share my story about vibe coding, I started this idea to assist my son's english learning, I also wanted to test to see if I can rely on generative ai to complete a full project including client and server. My goal was twofold: to support his learning and challenge myself to build a robust, interactive webapp.
Project Objectives
The application focuses on:
- Mastering English grammar and language forms
- Developing reading comprehension skills
- Improving listening comprehension abilities
Despite limited web programming experience, I successfully created a comprehensive learning tool. Leveraging a next.js project from a GitHub repository as a foundation, I expanded its functionality using GitHub Copilot and cutting-edge AI technologies.
Key Features
The application includes:
- Integration with Azure OpenAI for content generation
- Multi-provider OAuth authentication
- Azure Text-to-Speech (TTS) for listening comprehension audio generation
- Interactive dictionary hints
- English language tips
- PDF exam generation capability
Lessons Learned
Prompt Optimization
Crafting effective prompts is crucial. I spent considerable time refining them to ensure they generate accurate content at the appropriate levels (beginner, intermediate, and advanced exam tests). For listening comprehension, I relied on prompts to produce correct SSML (Speech Synthesis Markup Language) text. This was necessary to mimic different roles with distinct voices. To achieve this, it’s essential to define clear rules for SSML syntax in the prompt; otherwise, the generated SSML may be incorrect.
GitHub Copilot as a Development Partner
GitHub Copilot is incredibly powerful—it often understands my intentions and provides accurate suggestions. However, as the developer, you must review and validate its suggestions. Additionally, it's important to use the right AI models for specific tasks. For instance, the GPT-4o model (GPT-4O) can interpret images, allowing you to capture a screenshot and request code to replicate a particular UI style.
Leveraging Generative AI for Content Creation
Generative AI is invaluable for creating content. I used GitHub Copilot to generate all my English language tips and I used Azure TTS to generate audio feedback (e.g., playing encouraging phrases like "Good work!" upon selecting the correct answer). I also utilized consumer Copilot services to create images, which I incorporated into my web application.
Outcome
The application is now live at https://toefl.aiazure.net/, here are some screen captures
