MandoFlow

I built MandoFlow from scratch by myself because, like many other language learners, I was tired of the other low-quality, gimmicky apps out there. I focused on science-based language learning methods, a user-friendly interface, and analytics to keep track of progress.

Project overview

MandoFlow focuses on two science-backed ways to acquire a new language:

1. Comprehensible input

2. Spaced repetition

These features are implemented in an engaging, effective, and easy-to-use manner.

It was absolutely paramount that the application works seamlessly on both desktop, tablet, and mobile devices to the UI is responsive on all screen sizes.

Comprehensible input

Comprehensible input means listening to or reading content that you understand partly but not fully. This way, you get a sense of what the content is about while still challenging you to learn specific words to fully grasp the content.

We personalize video recommendations based on the user's current skill level.

Spaced repetition

MandoFlow uses simple-ts-fsrs as the spaced repetition algorithm to schedule flashcards for the students to learn individual words. Flashcards are automatically generated from the videos that the user has watched and include pronunciation instructions, definitions, and example sentences.

Analytics

We motivate learners by showing in-depth statistics of all the words they have learned, including their current proficiency level.

We also show a heatmap calendar to show which days they have been the most active and how many days in a row they have studied.

I believe these types of analytics will bring natural motivation instead of relying on gamification gimmicks such as "streaks" or other nonsense.

Technology

The application is built with:

• Next.js

• PostgreSQL

• TailwindCSS

I'm very experienced with this tech stack, hence why it was a natural choice for this type of application. I also use Playwright for end-to-end testing, and it's deployed to DigitalOcean.

Database

Instead of relying on an object-relation-mappers (ORM) such as Prisma, I decided to go with pgtyped and graphile-migrate. This way I can have all the benefits of ORMs, such as typesafe queries and migrations, without any of the downsides.

All of the database queries are written in plain SQL using some special pgtyped syntax.

1/*
2  @name GetLatestAssessmentByTermId
3*/
4SELECT *
5FROM assessment
6WHERE term_id = :termId!
7AND app_user_id = :appUserId!
8ORDER BY assessed_at DESC
9LIMIT 1;

Analytics

I used PostHog for the analytics, as they are a GDPR compliant and developer-friendly analytics solution that integrates super well with Next.js. They are also more "product" oriented, which means you can easily get insights such as "which user actions led to them signing up".

I have used PostHog for multiple projects now and highly recommend it compared to Google Analytics.

If you are looking to hire a software engineer to build something similar for you, please feel free to contact me.

Conclusion

This was a way more difficult project to build than I first expected. Turns out codifying human languages is a really hard (impossible) problem to solve. I'm still actively developing MandoFlow every day as I have a ton of features and quality of life improvements that I want to implement.