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! 😊
Top comments (1)
Great thank you very much