Inspiration
Daily English Diary was inspired by a very common problem for Chinese English learners: we often know what we want to say, but the sentence comes out as a mix of Chinese, textbook English, and awkward literal translation. I wanted to build something that feels less like a translator and more like a personal English coach for real daily life.
What it does
Daily English Diary lets users type or speak Chinese, English, or mixed Chinese-English sentences. The app then turns the input into natural English and explains the result with color-coded highlights:
- Blue highlights show words translated from Chinese
- Red highlights show corrected mistakes
- Green highlights show more natural or idiomatic expressions
Users can also listen to words and sentences, save useful vocabulary, review saved words, and practice with quiz questions. Everything in the first version is saved locally in the browser, so users can try it without creating an account.
How we built it
The app was built with Next.js App Router, TypeScript, and Tailwind CSS. The AI generation runs through a server-side API route so the API key is not exposed in the browser. The frontend uses structured JSON from the AI model so the app can render highlighted corrections instead of plain markdown.
For speech, the first version uses the browser Web Speech API for voice input and speech synthesis. Vocabulary, history, and review progress are stored in localStorage.
Challenges we ran into
One challenge was designing the AI response format. I did not want the model to return a normal paragraph or markdown; I needed structured data so the UI could accurately show translated, corrected, and natural phrases in different colors.
Another challenge was voice input. Browser speech recognition is convenient and free, but it is not always accurate for mixed Chinese and English. To improve the experience, I added language switching and candidate results so users can choose the closest recognized sentence before adding it.
I also worked on making the app feel good both as a mobile-first learning app and as a polished web demo for desktop screens.
Accomplishments
I’m proud that the project is not just a simple AI wrapper. It includes a complete learning loop: write or speak a sentence, get natural English, understand the correction, save useful vocabulary, and review it later with quizzes.
What I learned
I learned more about building AI features with structured JSON outputs, designing mobile-first learning interfaces, using browser speech APIs, and deploying a full-stack Next.js app to Vercel.
What's next
Next, I would like to add more accurate speech recognition, better spaced repetition, user accounts, cloud sync, and a more advanced dashboard for tracking learning progress over time.
Log in or sign up for Devpost to join the conversation.