AI-Assisted English Learning App Project

Project Concept

An AI-powered English-learning assistant for Arabic-speaking A2 learners — grammar explanations, multiple-choice questions with instant evaluation, two-direction translation exercises, and pronunciation practice with audio recording and evaluation. No accounts or persistent storage — every interaction is session-only, and OpenAI powers every generation or evaluation step.

What the Interface Shows

The welcome/assistant dashboard in both dark and light modes, the complete “Simple Present” lesson in both modes, a real completed assistant response, a multiple-choice quiz with a green correct-answer evaluation, a translation exercise with successful feedback, and a pronunciation-practice screen with a microphone control.

My Role and Decisions

I noticed the build was failing on Heroku with H10/H503 errors, and traced the cause to next.config.ts itself — Next.js was trying to evaluate the TypeScript config at runtime, not just build time, so I replaced it with a plain next.config.js and resolved it. I also found the OpenAI client was being instantiated at module load, meaning any build without an API key would fail even if the app wouldn’t need it immediately — I deferred client construction into the request handler itself, so builds can succeed without a key, and the key is only required at actual usage time. A third real issue: audio recording was failing specifically on iOS, so I changed the logic to negotiate the audio format (WebM/MP4/OGG) based on browser support instead of assuming a single format.

Technical Aspects

Next.js App Router with a fixed Arabic RTL interface (no interface-language switcher, though the lesson content itself is bilingual), MUI with an RTL Emotion cache, and a genuine dark/light mode with persisted preference. Three OpenAI integration points: text generation (gpt-4o-mini) and speech-to-text (whisper-1). A multi-stage, non-root Docker image.

Project Value in the Portfolio

This project demonstrates diagnosing specific real deployment issues (build failures, an external client initialized at the wrong time), and resolving a platform-compatibility problem (iOS) with a general solution (format negotiation) rather than a one-off fix.