Flashee - The free and simple flash card app
I built a basic version of Flashee in the Christmas holidays of 2018. The idea was to help me remember physics facts. Since then, I've enjoyed using it every day as part of my casual physics morning routine 🤓 . I thought other people might also find it useful so I decided to clean it up and make it available to everyone for free.
I originally built Flashee using Vue.js version 2 and you can check out how I did that by going to the vue2 branch of this repository.
In early 2023, I decided to rebuild the app using React. I'd recently finished teaching at a coding bootcamp and wanted to consolidate my React knowledge into a real project.
The refactoring was very start stop (mostly stop, e.g. I took a 15 month "break"), so it took me almost 2 years to finish the job 😅! Although it took a long time, I averaged an hour a day on the 80 days I worked on it; I think that's pretty respectable for a side project. And in terms of benefits, updates are going to be MUCH easier than the Vue version that had everything in one file 😱.
The Flashee front end is built with React 18. For global state management, I used Recoil. I used Vite 4 as the build tool.
The most notable change to the app functionality from the Vue days is the addition of the MathLive keyboard to make it MUCH easier to create equations (previously you had to manaully type the LaTeX 😫).
To make the app into a Progressive Web App (PWA) I used the PWA Vite Plugin. I used the default options for this plugin meant:
- I didn't have to write any service worker code myself
- When I make updates to the app, the user will be prompted to reload the app
The prompting is handled via a ReloadPrompt component that I created mostly by copying the example from the Prompt for update section of the plugin website.
Because I'd generated the PWA icons when making the Vue version of the app, I didn't need to use an asset generator. However, if I was starting from scratch, I would have have used the assets generator from the PWA Vite Plugin.
By default, only the icons specified in the manifest option in vite.config.js are included in the PWA precache. I needed to add includeAssets:['assets/**/*'] to include all files within the /pulic/assets directory.
The app doesn't require a backend to function - the flash card data is stored on the devices localStorage. I did, however, create an online storage option in case the localStorage gets wiped (this can sometimes happen on mobile devices). I am using an an open-source json storage system (jsonbox) for the online storage. I adapted it and deployed it on my server using the instructions that jsonbox provides.
I use Formspree to process the feedback form and route responses to my personal email address.
I'd love it if we could make Flashee better together. Please feel free to create an issue to make suggestions. If you enjoy playing with code then you can also go ahead and create a local version on your computer. Here is how to do this:
I code for fun in my spare time so this is not a professional app/service. Please don't use this app to store sensitive information - it's not been stress tested for data security bugs. Data lives on your device and you can export it to a text file at any time. There is also an online storage option. There is no backup of the online storage - so if your data is lost due to some technical issues then it is lost forever. I'll do my best to keep the app/service running indefinitely, but if it starts getting abused then I might have to shut it down.