AI Powered English Learning App using React

LinguaAI — AI Powered English Learning App using React Vite OpenAI Razorpay 2026

Imagine submitting a final year project that uses real AI, handles live payment integration, and includes a voice coaching system — all in one app. LinguaAI is an AI-powered English learning web application built with React 19 and Vite that combines GPT-4o-mini lessons, interactive practice tests, browser-based voice coaching, progress analytics, and a Razorpay subscription system into a single polished SPA. This project will make your viva examiner stop and take notice, your resume stand out from every other candidate, and give you real hands-on experience with tools that top companies actually use in production.

Project Overview

Key Features

• AI-Powered Lessons — Generate dynamic English lessons on any topic at Beginner, Intermediate, or Advanced level using GPT-4o-mini, with in-lesson Q&A chat for follow-up questions
• Practice Tests — Randomised 8-question MCQ tests covering grammar, tenses, vocabulary, phrases, and communication with instant scoring and AI-generated explanations for every answer
• Voice Coach — Browser-based speech recognition captures your spoken English in real time, sends it to the AI for correction feedback, and reads the response aloud via text-to-speech
• Progress Dashboard — Weekly activity area chart, per-skill radar chart, 14-day bar chart, test score line chart, XP system, streak tracker, and daily task checklist all in one place
• Credit and Subscription System — Three Razorpay-powered subscription plans (Basic ₹749 / Medium ₹1,599 / Expert ₹3,299) with monthly and annual billing and a 20% annual discount
• n8n Automation — Fires structured webhook events for test completions, lesson completions, voice sessions, plan purchases, milestones, and daily summaries to automate notifications and CRM updates

Technologies Used

Screenshot

Get This Project

This is a complete, ready-to-run paid project. It includes the full React source code, all services and hooks, environment variable setup guide, Razorpay and OpenAI integration, and full setup support from our team.

Project Folder Structure

lingua-ai/
├── index.html               # App shell — loads Inter font + Razorpay SDK
├── vite.config.js           # Vite config with React plugin
├── eslint.config.js         # ESLint flat config
├── package.json
├── .env                     # Local secrets — never commit
├── public/                  # Static assets
└── src/
    ├── main.jsx             # React entry point
    ├── App.jsx              # Root component + all page components
    ├── config.js            # Centralised env-var config + theme colours
    ├── index.css            # Global reset, typography, scrollbar, animations
    ├── assets/
    ├── hooks/
    │   └── useVoice.js      # Web Speech API hook (listen, transcribe, speak)
    └── services/
        ├── auth.js          # localStorage register / login / session
        ├── db.js            # localStorage user profile and activity store
        ├── openai.js        # OpenAI chat completions wrapper
        ├── n8n.js           # n8n webhook event helpers
        └── razorpay.js      # Razorpay payment modal helper

How to Run This Project

Step 1 — Install dependencies

cd lingua-ai
npm install

Step 2 — Create your .env file

Create a .env file in the lingua-ai/ root folder and add your keys:

VITE_OPENAI_API_KEY=sk-proj-your-key-here
VITE_OPENAI_MODEL=gpt-4o-mini
VITE_N8N_WEBHOOK_URL=https://your-n8n-instance.example.com/webhook/lingua-ai
VITE_RAZORPAY_KEY=rzp_test_XXXXXXXXXXXXXXXX

Step 3 — Start the development server

npm run dev

Open http://localhost:5173 in your browser. Register an account and start exploring all modules.

Step 4 — Build for production

npm run build
npm run preview

How It Works

AI Lesson Generation

1. User selects one of the 8 topic cards (Grammar, Tenses, Vocabulary, Phrases, Idioms, Pronunciation, Writing, Reading)
2. Chooses a difficulty level — Beginner, Intermediate, or Advanced
3. The app deducts credits based on level and calls the OpenAI GPT-4o-mini API with an expert English teacher system prompt
4. A dynamic lesson is generated and displayed — the user can then ask follow-up questions in the in-lesson chat
5. Lesson completion is saved to the user profile and an n8n lesson_completed webhook is fired

Practice Test Flow

1. User picks a topic filter or leaves it on All Topics
2. 8 questions are drawn randomly from a 22-question MCQ bank covering grammar, tenses, vocabulary, phrases, and communication
3. Answers are submitted and scored immediately on screen
4. A detailed review shows each question with the correct answer and an AI-generated explanation
5. Results are saved to the user’s skill scores, test history, and daily progress — and an n8n test_completed event fires

Voice Coach Session

1. A random speaking prompt is displayed from 10 real-world topics (introductions, opinions, storytelling, etc.)
2. User presses Start Session — the browser microphone activates via the useVoice hook using the Web Speech API
3. Speech is transcribed live on screen as the user speaks
4. When the user stops, the transcript is sent to GPT-4o-mini for pronunciation and grammar correction feedback
5. The AI response is read aloud via SpeechSynthesis at a natural rate — session duration is saved to daily stats

Subscription and Payment Flow

1. User visits the Pricing page and selects a plan — Basic (₹749), Medium (₹1,599), or Expert (₹3,299)
2. Toggle between monthly and annual billing — annual billing gives a 20% discount
3. Clicking Get Started opens the Razorpay Checkout modal
4. On successful payment, credits are added to the user profile and an n8n plan_purchased webhook fires

Subscription Plans

Why This is a Great Final Year Project

• Real OpenAI GPT-4o-mini integration — not a fake demo, actual AI-generated content for every lesson and test explanation
• Live payment gateway with Razorpay — very few student projects include a working payment system, and this one impresses every examiner
• Voice recognition and text-to-speech using the Web Speech API — a feature most students have never built before
• Four real-time charts using Recharts — radar, bar, area, and line charts showing genuine user data
• n8n webhook automation — an enterprise-level feature that shows you understand modern software workflows beyond just building UIs
• Credit and subscription system — demonstrates understanding of business logic, monetisation, and user access control
• Zero backend required — runs entirely in the browser, making it easy to demo from any laptop during viva

• Ai Powered english learning app free
• english learning app free download
• english learning app speaking
• english learning app for adults
• english learning app for beginners
• english learning app in india
• best english learning app
• english learning app for android
• english learning app for college students
• best english learning app for competitive exams
• best english learning app for conversation
• best english learning app for communication
• best english learning app for college students
• english learning app codecanyon
• english learning app with conversation
• english learning app source code
• english learning app free of cost