DEV Community

Cover image for Kounter, a simple PWA
Corentin Girard
Corentin Girard

Posted on

3 2

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

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (1)

Collapse
 
artydev profile image
artydev • Edited

Great thank you very much