FluentFlow

Telegram Mini App portfolio project for English learning with spaced repetition, interactive drills, progress tracking, and Supabase persistence.

Product-focused Telegram Mini App with a polished UI, responsive browser preview, and frontend-first Supabase persistence.

Demo

Live demo: spiffy-speculoos-507320.netlify.app

Mobile flow

Desktop walkthrough

Watch desktop video

Features

Learning Experience

• First-run placement flow that maps the learner into CEFR levels from A1 to C1
• Multiple training formats: translation choice, sentence building, fill-in-the-gap, and listening input
• Spaced repetition card logic with SM-2-style interval updates
• XP, streak, daily goals, and achievement cards for retention

Telegram and Web UX

• Telegram WebApp initialization for in-app launch behavior
• Separate layout behavior for Telegram mobile and browser desktop preview
• High-polish animated UI built with React and Tailwind CSS
• Mobile-first navigation with a desktop-friendly app frame

Data Layer

• Local-first state for immediate interaction without backend dependency
• Supabase integration through a dedicated repository layer
• Anonymous auth for per-user state persistence
• Row Level Security policies on user_state

What This Project Demonstrates

• Building a polished Telegram Mini App instead of a static showcase page
• Structuring UI state outside raw component code with a dedicated repository layer
• Integrating Supabase persistence in a frontend-only architecture
• Handling responsive UX tradeoffs between Telegram mobile and desktop browser preview
• Designing product flows, learning loops, and retention mechanics end to end

Architecture

FluentFlow uses a frontend-first flow:

1. UI interactions update React state in src/App.jsx
2. The repository layer in src/lib/portfolioRepository.js handles persistence
3. Supabase access is isolated in src/lib/supabase.js
4. The app signs in anonymously and stores each user's state in public.user_state
5. Progress is persisted inside payload jsonb and restored on the next launch

Project Structure

fluentflow-portfolio/
  media/
  public/
  src/
    lib/
      portfolioRepository.js
      supabase.js
    App.jsx
    App.css
  supabase/
    schema.sql

Environment

Create .env from .env.example:

VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=

Run Locally

npm install
npm run dev

Production Build

npm run build

Supabase Setup

1. Create a Supabase project
2. Enable Anonymous sign-ins
3. Run supabase/schema.sql in the SQL Editor
4. Add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to .env

Notes

• .env is ignored and should not be committed
• The project is designed to work as a browser demo and as a Telegram Mini App
• Current media files are referenced from ./media/