Fluency — Build Real Fluency in Sui & Move

Short, scored code challenges that build real Move smart contract muscle. Zero hype — pure interactive proof of developer competence.

---

🌊 Overview

Fluency is an interactive, gamified learning platform tailored specifically for the Sui blockchain and the Move 2024 Edition smart contract programming language.

Unlike traditional passive documentation or video tutorials, Fluency trains developer muscle memory through fast, focused micro-challenges, real-time code verification, gas rebate calculations, and in-browser Move compilation feedback.

---

✨ Key Features

1. 🎯 Interactive Move Bug Hunt

• Analyze real-world Move code snippets containing subtle logic bugs, capability leaks, and transfer vulnerabilities.
• Click directly on faulty lines or answer structured diagnostic prompts to test debugging precision.

2. ⚡ Move 2024 Edition Curriculum

• Sui Object Model: Master owned objects, shared objects, immutable objects, and dynamic object fields.
• Modern Move Syntax: Learn new positional/named struct declarations, method syntax, and macro functions introduced in Move 2024.
• Programmable Transaction Blocks (PTB): Chain transactions, manage gas budgets, and handle multi-step atomic executions with zero runtime friction.
• Move Security & Auditing: Practice detecting reentrancy-like patterns, missing capabilities (has key, store), and unauthorized mutations.

3. 🛠️ Live Move Compiler IDE

• In-browser code playground with instant syntax highlighting and simulated compiler output.
• Experiment with verifiable credential modules, NFT badge minting, and transfer functions directly.

4. 🏆 Developer Competence Rankings

• Weekly competitive leaderboard with real-time scoring, win streaks, and accuracy metrics.
• Scored micro-sessions designed to take 5 minutes or less, ideal for daily practice.

5. 📜 Verifiable Developer Credentials

• Earn verifiable completion certificates backed by simulated unit test proofs.
• Optional on-chain Sui Object minting directly to developer wallets.

6. 🔊 Retro Web Audio Synthesizer

• Built-in zero-dependency Web Audio API sound effects that provide crisp, tactile auditory feedback on clicks, correct answers, streak milestones, and errors.

---

🎨 Design System & Brand Identity

Fluency is built with a bespoke modern aesthetic strictly adhering to the Sui Brand Kit:

• Typeface: Official Sui font family Inter (weights 300 through 900) paired with JetBrains Mono for code readability.
• Palette: Official Sui Cyan (#4DA2FF), Deep Azure (#0066FF), Sui Sky (#70B6FF), and deep dark surface architecture (#011829, #080F1D).
• Brand Mark: Precision-engineered freestanding geometric monogram featuring dual aerodynamic facets with a uniform negative-space cut.

---

🚀 Tech Stack

• Framework: React 19 + Vite
• Routing: React Router
• Styling: Tailwind CSS + Custom Glassmorphism tokens
• Animations: Motion + Tailwind keyframe micro-interactions
• Icons: Lucide React
• Celebration Effects: Canvas Confetti
• Audio: Custom Native Web Audio API Synthesizer

---

📦 Getting Started

Prerequisites

• Node.js: v18.0.0 or higher
• npm or pnpm

Installation

# Clone the repository
git clone https://github.com/Glorious21/fluency.git

# Navigate into the project folder
cd fluency

# Install project dependencies
npm install

Running Locally

# Start the local Vite development server
npm run dev

The app will be available at http://localhost:5173/.

Production Build

# Generate the production bundle
npm run build

# Preview the production build locally
npm run preview

---

📁 Project Structure

fluency/
├── public/                     # Static brand assets & vector SVGs
│   ├── sui-droplet-blue.svg    # Authentic Sui droplet asset
│   └── certificate_image.png   # Dev credential preview
├── src/
│   ├── components/             # Reusable UI components
│   │   ├── BrandLogo.jsx       # Freestanding geometric brand mark
│   │   ├── Navbar.jsx          # Sticky navigation header
│   │   ├── Hero.jsx            # Hero presentation & CTAs
│   │   ├── HeroShowcase.jsx    # Interactive 3D concept card carousel
│   │   ├── ChallengeTypes.jsx  # Interactive challenge mechanics preview
│   │   ├── LiveSandbox.jsx     # In-browser Move code compiler preview
│   │   ├── Leaderboard.jsx     # Developer leaderboard widget
│   │   ├── CertificateSection.jsx # Verifiable credentials showcase
│   │   ├── PricingFaq.jsx      # Community FAQ section
│   │   ├── QuizModal.jsx       # Interactive challenge gameplay engine
│   │   └── Footer.jsx          # Ecosystem resources & links
│   ├── pages/                  # Top-level view routes
│   │   ├── Home.jsx            # Platform landing experience
│   │   ├── Curriculum.jsx      # Full Move learning tracks
│   │   ├── Mechanics.jsx       # Interactive sandbox mechanics
│   │   ├── Sandbox.jsx         # Full IDE compiler
│   │   ├── LeaderboardPage.jsx # Full ranking leaderboard
│   │   ├── Credentials.jsx     # Developer credential verification
│   │   └── Quest.jsx           # Arcade quiz game mode
│   ├── utils/
│   │   └── audio.js            # Web Audio API sound generator
│   ├── App.jsx                 # Root application routes
│   ├── index.css               # Design tokens & core styles
│   └── main.jsx                # Application bootstrap
├── tailwind.config.js          # Sui brand palette & typography config
├── vite.config.js              # Vite bundler configuration
└── package.json                # Dependencies & scripts

---

🤝 Contributing

Contributions from the Sui & Move developer community are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/new-track)
3. Commit your changes (git commit -m "feat: add PTB advanced challenge track")
4. Push to the branch (git push origin feature/new-track)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License. Built for the Sui and Move developer ecosystem.