yNotes: unofficial ENT client

"Access your notes, assignments, schedules and more in one elegant interface."

Introduction

yNotes (bad pun “Why not?” that almost no French student understood, credits to Josselin Robert) is an unofficial client for French ENTs (translated as digital workspace).

It allows students to use the “basic” features provided by any ENT (grades, homework, calendar…) and adds useful features on top without storing anything on a third-party server. Data stays on the device.

My role in this open-source project has evolved quite a bit:

• Back in October 2020, I reworked the website and helped designing the interfaces for the mobile app
• In January 2021, I reworked the website once again
• I started contributing to the development in itself around June 2021, implementing a real design system to enforce coherence
• I then became maintainer from September 2021 to February 2022

We used interesting technologies to develop the app:

• For the app itself: Flutter and Dart
• For deployments: GitHub Actions and Fastlane
• For the website: Nuxt, Vue and Tailwind CSS

You can find the source code on GitHub and have a look at the project on the website (in French).

Check out this awesome trailer made by Josselin!

Purpose and Goal

On January 21th 2020, Josselin Robert commits the first piece of code to the GitHub repository. It was supposed to be a dark mode for EcoleDirecte, the most used ENT in private schools in France.

Little by little, it turned into a fully featured (and better) alternative to the 2 most used ENTs: EcoleDirecte and Pronote.

Here are some designs from our Figma files:

Spotlight: internal API

I think the most impressive thing we achieved with yNotes is setting a great internal API. Or almost!

Most of the issues we currently have are about to be fixed by the v0.15 release. Well, when it will be out… (but I’ll talk more about this a bit later)

Here are several topics linked to this particular issue:

Working with unknown APIs

Since yNotes is an unofficial ENT app, it relies on APIs that are not documented. The only way to know how to interact with them is by looking at the requests made in the Network tab of the browser. Definitely not the easiest way to build an app that is already complex in itself.

Managing different data structures

This is a common issue for apps/services that act as an interface with different providers. In such situation, you have to create a suitable interface for all the providers.

In our case, the same data is stored by the ENTs (grade, homework, subject…) but structured differently, and also without exactly the same information.

Creating an interface that scales is hard and we struggled for a long time with this. But v0.15 aims to fix this by providing a united interface to services and models. More on that in the next part!

Making it scale

Josselin did a lot of work and it’s really great ! But when the code base gets bigger, it seems that there are pieces of code stuck together… and it becomes difficult to maintain.

Once again, I feel like it’s normal when I look back at the app story. He had to learn how to use Flutter, do things on its own trying to reach feature-parity, not an easy task!

But let’s take 2 examples of why it needed a huge rework:

Coherent design

At some point, we decided to update the app identity by changing it’s primary color. So far so good. But hard coded colors were everywhere making really hard a simple branding upgrade.

Also, many buttons were almost the same… Because there were many duplicate widgets here and there.

That’s why, as my first task, I decided to work on a design system. I did not write everything by hand (using Dart paint) but created coherent and centralized widgets based on Material UI.

Here is the repository.

And one more provider…

On November 11th 2021, Nathan Codes submitted a PR adding a new provider (new ENT supported). And we quickly realized we were going to face huge integration problems to the codebase.

The reason is pretty simple, look at this (not original example):

final List<Homework> homework = api.type == "pronote" ? api.homework : []

This is a bit caricatural but that is the idea: way too hardcoded.

Storing data

Because of its unofficial nature, data had to be stored locally. For configuration and authentication data, we used flutter_secure_storage. For the rest of the data, we used Hive (NoSQL database) since we didn’t really needed relationships. Unfortunately, Hive doesn’t support multi isolates access (multi threading in dart) for foreground and background concurrent access which was leading to database corruptions. We made some dirty fixes like reset the database, but ultimately we wish we could use Isar but we had to many issues with it (for instance it doesn’t support 32bit devices).

Current status

It’s complicated…

yNotes is currently in a weird stage. A few dates to understand why:

• September 2021: Josselin stops working on the app to focus on its studies and I become maintainer (and only active contributor)
• November 2021: I start working on v0.15, supposed to fix all the above problems and more
• February 2022: I stop working on yNotes because of its growing complexity, legal risks and the time it takes

In April 2022, we decided to put yNotes in its unmaintained phase, without publishing the v0.15 because it was far from being ready (lack of 32bit support by Isar, only EcoleDirecte implemented, only grades implemented…)

Since then, many people wish we could still maintain yNotes and we wish too. The app is solving real problems, as we can see with its growing set of users but for now, it’s paused.

However, I encourage you to check out the v0.15 codebase for a really simple reason: it’s awesome. I mean, reading through my code, the documentation I made, I felt impressed by my work 1 year later. Feels weird…

Lessons Learned

This project taught me many things considering the amount of things I worked on:

• Improve my skills with Nuxt and Tailwind CSS
• Improve my UI/UX skills working on Figma and having real feedback
• Learn Dart and Flutter
• Improve at analyzing browser requests
• Build robust and scalable code
• Improve my project management skills
• Collaborate with other devs and non-devs

I think Josselin did a great job at choosing the tool to build yNotes. Flutter is awesome to build cross-platform apps (we even started working on releasing on Windows, Linux and MacOS!) and has a really great DX. I just regret not being able to use Tailwind CSS, this framework really changed the way I code UI.

This project encouraged me to work on my own ENT, see op-ent.