📚 Fluent5

Learn English with the 5x5x5 method: 15 minutes per session, 5 repetitions, 3 times a day, for 5 days.

🚀 The Fluent5 Method

🎓 Massive Repetition (5x5x5)

Fluent5 is not a classic spaced repetition app. It focuses on short, intense immersion.

• ⏱️ 15 minutes: One focused block per period (morning, afternoon, night).
• 🔄 5 repetitions: In each session you repeat the same cycle 5 times in a row:
  • 📖 Read: Read the text and understand the context.
  • 🎧 Listen: Listen closely to the pronunciation.
  • ✍️ Write: Write down what you heard (dictation).
  • 🗣️ Speak: Say it out loud to practice speaking.
  • 🔁 Loop: Final pass to lock the session in.
• 📅 5 day cycle: Repeat the whole process with the same text for 5 days straight.

📖 Storytelling

Short narrative stories, about 2 minutes each, grouped by level:

• 🥇 Basic: Thanksgiving Day, The Perfect Gift, A Morning in the Park
• 🥈 Intermediate: Online Classes, The Job Interview, The Lost Dog
• 🥉 Advanced: The Entrepreneur's Dream, The Climate Crisis, Dale Carnegie style inspiration

🔊 Text to Speech

• Plays the text sentence by sentence.
• Voice picker with a quality ranking (🥇🥈🥉).
• Works with multiple voices (Google, Microsoft, Apple).
• Playback speed tuned for learning.

🔐 Accounts and Progress

• Sign in with Supabase (Google or email).
• A display name is required at sign up.
• Avatar from your Google photo, or a default icon.
• Protected routes for signed in users.

🎨 UI and UX

• Premium dark mode with glassmorphism, plus a light mode.
• Smooth animations and micro interactions with Framer Motion.
• Fully responsive, mobile first.
• Lucide icons for a consistent look.
• Installable as a PWA.

🚀 Getting Started

Prerequisites

• Node.js 18 or newer
• npm

Installation

# Clone the repository
git clone https://github.com/tgmarinho/fluent-five.git
cd fluent-five

# Install dependencies
npm install

# Start the dev server
npm run dev

Open http://localhost:3000 to see the app. 🎉

To enable sign in, set your Supabase keys in a .env.local file.

📱 Pages

Route	Description
/	Landing page with the method, plans, and sign up
/phrases	Main app: phrase practice with the 5x5x5 loop
/stories	Narrative stories with the audio player
/login	Sign in and sign up

🛠️ Tech Stack

Tech	Purpose
Next.js 16	React framework with App Router
React 19	UI library
TypeScript	Type safety
Tailwind CSS 4	Utility first styling
shadcn/ui	Accessible components (Radix UI)
Framer Motion	Animations
Lucide React	SVG icons
Supabase	Auth and sessions
next-themes	Light and dark mode
next-pwa	Progressive Web App support
Web Speech API	Native text to speech
localStorage	Progress persistence

📁 Project Structure

src/
├── app/                       # Next.js App Router
│   ├── page.tsx               # Landing page
│   ├── phrases/               # Main practice app
│   ├── stories/               # Storytelling page
│   ├── login/                 # Sign in and sign up
│   ├── auth/callback/         # Supabase auth callback
│   └── manifest.ts            # PWA manifest
├── components/
│   ├── StoryCard.tsx          # Story preview card
│   ├── StoryPlayer.tsx        # Story player
│   ├── mode-toggle.tsx        # Theme switch
│   └── ui/                    # shadcn components
├── data/
│   ├── stories.ts             # Grammar stories
│   └── narrative-stories.ts   # Narrative stories
└── hooks/
    ├── useSRS.ts              # Repetition logic
    └── useTextToSpeech.ts     # Text to speech hook

🔮 Roadmap

• 💳 Billing and subscriptions (Stripe or Lemon Squeezy)
• 🗄️ Move progress from localStorage to Supabase Postgres
• 🎵 Pre recorded audio for premium stories
• 📊 Learning analytics and streaks
• 🌍 More interface languages
• 🧪 Automated tests (unit and end to end)

🤝 Contributing

Contributions are welcome. Check the issues to get started.

📄 License

MIT © Thiago Marinho

---

Made with 💜 for English learners