DEV Community

loading...
Cover image for Kounter, a simple PWA

Kounter, a simple PWA

drarig29 profile image Corentin Girard ・2 min read

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):

Group name Students
Group A Jalisa Daughtry
  Tisa Metellus
  Elba Kennison
  Johnna Goetzinger
  Monet Caine
Group B Blair Gomes
  Angeles Ratley
  Lamonica Miner
  Elton Standley

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! 😊

Discussion (1)

pic
Editor guide
Collapse
artydev profile image
artydev • Edited

Great thank you very much