Some time ago I built a flashcard app for learning the top 200 drugs which you need to know to become a pharmacy tech. I decided I wanted to upgrade this app so that it could be useful to not only pharmacy techs but also to pharmacy students or anyone that has to study pharmacology such as nursing and medical students.
To start I found a pharmacist on fiverr to create drug charts for the top 10 drugs, and that she include everything that a pharmacy student would study, because being a pharmacy tech I’m only aware of what we study which is the brand, generic, and use of a medication. She charged me $50. So If I had asked her to do 200 I took that file and asked chatGPT could it turn this into a json file. It did so. If I asked her to do that rest it would have costed me $1000.
For the next step I asked chatGPT if it could give me information about various drugs using the format of the json files. It tried to do it but it never gave it to me using exactly the same format. I searched google about this problem which led me to learning about structured responses, but to use structured responses I would have to learn about the Openai api.
So next I made an account and put in $5. To use structured response you actually have to use the zod format which looks kind of like json but with typescript types. I actually used chatgpt to turn the json file into zod format. I made a few edits and it was ready to go.
I tried to use chatgpt to write the code needed to query the openai api but turned out the code was outdated. I ended up looking in the docs and searching through the forums to figure it out. I wrote it in nodejs. After that was solved I learned about nodejs fs.writeFile to make a file of the responses, but that wasn’t the end of it. Something I had forgotten was to put a comma in between each response, but that was easily solved with vs code’s find and replace functionality. I just wish it hadn’t taken me a day and $1.50 in tokens. The way to have done it right from the beginning would have been <response + “,”> in writeFile.
So in total it cost me about 3 bucks to get the data I needed.
After that I decided to make the rest of the app in React with Typescript. Typescript was harder than I expected. I went in thinking that I just have to say whats an array, what’s a string, whats a number, but it’s more complex than that. For instance to get my dropdown component to work I actually had to import ChangeEventHandler for the correct type, and I had to use “keyof” to be able to dynamically render the property of the drug selected.
The rest of the app which are the increment buttons and the hide show buttons are done pretty much the same as I did in my previous app, which is just incrementing the position variable of the array of objects and toggling the visibility of the css setting on the div that display the “back” of the card.
The original app I deployed on heroku with a nodejs backend and mongodb database. For this version I decided to use github pages. It ended up being more complicated than expected because it uses React with Vite. I ended up learning a little about github actions and yml. To be honest I don’t fully understand it because I just copied the yml file from the Vite documentation and it worked.
If you have any questions/comments/suggestions about this app or if you want help with a project you are working on don’t hesitate to reach out.
You can see these apps at the following links.
Flashcard app version 1: https://codepen.io/king-jones-frazier/pen/yLmGRjV
Flashcard app version 2: https://kingjofr.github.io/RxCardGenClient/
Code in the rough 