Interactive

Learn Words Demo

An end-to-end vocabulary learning product built as a Telegram bot + backend service + web app. This interactive demo runs on mock data, while the production version integrates with a real backend, OpenAI API, and personalized learning logic.

React 19Redux ToolkitTypeScriptTailwind CSSVitei18next

Product features

Spaced repetition learning logic

SM-2 based algorithm

Multiple exercise types

Word puzzles, choice questions

Session-based learning flow

Structured learning sessions

Personalized vocabulary selection

Production version

Progress tracking

Learning history and stats

Telegram Mini App + web version

Multiple platforms

Mobile-first responsive design

Optimized for all devices

System architecture

The product is built as a three-part system designed for real production use:

  • Telegram bot - user interaction, daily learning flows, and notifications
  • Backend service (Node.js) - learning logic, spaced repetition scheduling, user progress, and integrations
  • Web app - interactive learning interface (Telegram Mini App + standalone web version)

All parts communicate via APIs and are designed to be deployed and scaled independently.

Demo vs production

This demo version runs entirely on mock data to showcase the UI and learning flow. In production, the system connects to a real backend, OpenAI API, and a persistent database.

  • Demo: mock vocabulary and session state
  • Production: real user accounts, personalized word selection, learning history
  • Same frontend codebase used for both demo and production

AI & automation

The production version integrates with the OpenAI API to generate and enrich vocabulary content, automate learning flows, and support future AI-driven features.

  • OpenAI API for content generation and enrichment
  • Automation-friendly architecture
  • Extensible for future AI-assisted learning features

DevOps & delivery

The entire system is designed with production readiness in mind - not just as a UI demo.

  • Docker-based deployment for bot, backend, and web app
  • GitHub Actions for CI and automated testing
  • Test coverage tracking across all components
  • One-command production deployment via Docker

Multi-language support

The system is designed to scale to new languages with minimal effort.

  • Adding a new language requires only an environment file
  • No code changes needed for basic language setup
  • Restart Docker containers to activate a new language
  • Same infrastructure reused for all language versions

Project scope & timeline

This project was designed, built, and delivered solo in one month.

  • Product design
  • System architecture
  • Telegram bot
  • Backend service
  • Frontend application
  • CI/CD and Docker-based deployment

It demonstrates the ability to take a product idea from zero to a production-ready system.

Note: This demo runs on mock data. In production, the app integrates with a Telegram bot backend for real vocabulary learning with personalized word selection.

Want to see more projects?

View All Projects