Bayan Flow 0.2.0: finishing the foundations (i18n, RTL, tests, and small UX wins)

Source: Dev.to

Quick recap

Bayan Flow is an interactive algorithm visualizer built with React 19, Vite, Tailwind, and Framer Motion. The goal is to make algorithms feel intuitive, not just correct.

Drivers for version 0.2.0

1. Accessibility / i18n – English‑only felt wrong for an educational tool; added French and Arabic.
2. Polish / UX – Landing page, onboarding, sound, fullscreen mode, and finer UI behavior.
3. Maintainability / infrastructure – Tests, CI/CD, and dependency automation to keep future features stable.

Internationalization and RTL

• Used i18next for English, French, and Arabic. Extracting strings into JSON was straightforward.
• Arabic introduced the real challenge: layout direction.
• Tailwind 4 supports RTL, but the work required intentional changes:
  • Replaced directional classes (ml-4, pl-2) with logical ones (ms-4, ps-2).
  • Audited components for animation direction (e.g., slide‑in) and inverted them when the text direction flips.
  • Implemented automatic language detection from the browser locale with a manual override option.

Result: The app flips cleanly between LTR and RTL. It’s subtle when correct but painfully obvious when wrong, so handling it now saves future pain.

Audio feedback (optional)

Added opt‑in audio cues with Tone.js:

• Beeps on comparisons during sorts.
• Grid‑based tones for pathfinding exploration.
• A small chord when a path completes.

All sounds are labeled “experimental” and can be disabled. Feedback is welcome.

UI polish and UX improvements

• Landing page with hero and features section.
• Roadmap preview and basic onboarding copy.
• React Router for landing, visualizer, and roadmap pages, making the project approachable for first‑time visitors and teachers.
• Fullscreen mode to hide other components and focus on the visualization.
• Auto‑hiding legend panel that appears when needed and fades when idle.
• Fixed control‑panel layout for various screen ratios (Windows and non‑Linux).
• Minor accessibility tweaks to improve discoverability and clarity.

Infrastructure and tests

• Vitest: 31 test files covering 666 tests (components, hooks, utilities).
• CI/CD overhaul: Netlify branch deployments, PR protections, and Codecov for coverage.
• Renovate set up to automate dependency updates.

Coverage isn’t 100 % yet, but it’s sufficient to refactor confidently without breaking core flows.

Future work

Now that the foundation is solid, the next steps include:

• Adding more sorting and pathfinding algorithms.
• Improving complexity analytics.
• Integrating side‑by‑side Python code so users can see the visualization and implementation together.

Links

• App:
• GitHub repo:
• Product Hunt: