Kounter, a simple PWA

Request

My mom is a teacher and wanted to have something easy where she can count up the participations of her students.

She asked for a straightforward solution, preferably a mobile app.

Choice

I already have a Play Store account so I said to myself: "What a good opportunity to learn React Native!"

Before I got started, I verified if the whole process was fast enough... but I saw I had to re-install Android Studio and all the build tools needed for Android (see here) and everything about Gradle and APK signing (see here) brought me back bad memories...

So instead I chose to make a progressive web app with Preact (basically a lightweight React! 🚀).

I do not consider myself as a beginner in React but it was definitely the first time I was going to use functional components. I wanted to try those hooks! 😁

My other choices:

• I always use pnpm currently, this is a faster npm
• I generated the PWA with Preact CLI
• I wanted to try PrimeReact components with Preact
• I wanted to automatically build and publish my PWA on GitHub Pages with a CI pipeline

Thinking

My mom can easily export each of her student groups to separate CSV files.

But because she wants to import data once, I figured out that having a single file with all the groups would be a good thing.

So this will be the only annoying she has to do: export all the groups and combine them into a single CSV file with a simple format.

She'll have to do this only once.

Example of CSV file (names generated here):

All the data is persisted in localStorage so nothing is on a server, and there is no problem with GPDR and students.

Resolution

You can see the code here: https://github.com/Drarig29/kounter
And a live demo here: https://drarig29.github.io/kounter

For beginners, I think this can be a good example for many things.

However, I didn't split anything, this is a quickly-made solution. So most of the logic is in this file.

I'm open to comments too! 😊