IELTS Chatbot
Full Stack Development — Individual Project
Overview
This project is a full-stack IELTS Writing Task 2 assistant designed to guide practice rather than generate full essays. It combines a React frontend with an Express backend, supports themed UI, timed writing, staged progress to unlock grading, and AI-assisted feedback modes (outline, transitions, synonyms, grammar, natural phrasing).
At a high level, the app flow is: pick a prompt → write in timed conditions → trigger targeted feedback → review and revise. The main UI orchestration lives in Main.js, with writing input in LeftColumn.js, chatbot/feedback interactions in RightColumn.js, and server-side prompt handling in server.js.
Tech Stack
- React
- Node.js
- Express
- MongoDB
- JavaScript
- HTML
- CSS
- OpenAI API
Project Details
Product Goal
I built this as a writing coach for IELTS Task 2 practice: focus on guided improvement (structure, coherence, vocabulary, grammar) instead of one-click essay generation. The constraint and coaching behavior are reinforced in backend prompt routes in server.js.
Frontend Experience
The UI is split into two functional columns.
Left column: writing prompt, timer, textarea, and grading gate logic in LeftColumn.js and Timer.js.
Right column:: chatbot panel, feedback buttons, streaming assistant responses, and message rendering in RightColumn.js and ChatMessage.js.
Theme switching and app shell are handled in App.js, with styling across App.css and index.css.
AI Feedback Architecture
The backend exposes focused endpoints (completions, outline builder, transition suggestions, synonym help, grammar fixing, natural rewriting) in server.js. A key implementation detail is streaming responses for some routes, so users see the assistant answer progressively rather than waiting for full completion.
Learning-Centered UX Decisions
Notable decisions that support learning outcomes:
Timed writing simulation (40-minute timer) in Timer.js.
Stage/goal-based progression before grading in LeftColumn.js.
Diff-style revision highlighting in RightColumn.js.
Structured feedback controls (outline/transition/synonym/grammar/natural) in RightColumn.js.