Ahoy! My name is Connor and I am a hobby programmer that likes to embark on "code as craft" projects. I do this as a way to gain practical knowledge, and to continuously teach myself new things about programming.
This weekend I started a project in which I tried to make US Congressional Trading Cards - that is, "Yu-Gi-Oh" style cards that contain legislators rather than monsters. And let's be honest - sometimes it's hard to tell the difference.
Finding Congressional data
First step was to find Congressional data. I went to Kaggle and found this spreadsheet, which was a rather small dataset that didn't even include legislator party information. Rather, it was a directory of links to other information sources.
Next, I went to the ProPublica Congress API, which contains up-to-date information on United States legislators. I got an API key and did some test pulls in Retool which proved to be successful and more of what I was looking for.
The ProPublica dataset contained a lot of useful information, like names, party affiliation, birthday and more, but it did not have profile photo URLs. Fortunately, I saw that each senator had a google_entity_id which I quickly learned was for the Google Knowledge Graph API. I enabled this service, and was able to use the entity_id to pull images for each senator from Google Knowledge Graph.
Frontend Design
Now that I had most of the data I needed, it was time to work on the front-end. I used Figma to design Yu-Gi-Oh card templates, and copied the CSS to assemble the cards in Glitch, an online IDE for students.
Current Problems: Bringing It All Together
I initially tried pulling the data from ProPublica by writing my own API GET requests using NodeJS. Four hours later, it was clear that I didn't know what I was doing, and I wasn't able to get usable data to populate the client. There were two main issues:
I have trouble getting data out of nested callback functions. This is something I have always struggled with in my hobby code projects. I know that learning more about Javascript Promises might help, but I felt like there might be easier solutions than working with NodeJS to get the data.
The data was delivered as a Buffer, which I didn't know how to convert properly. I don't really know what a Buffer data type is, and despite a lot of Googling, I was not able to convert the data into usable JSON. I troubleshooted this for the greater part of an afternoon before I decided to cut my losses and try something else.
Ideally, I would love to just make the requests to the API directly from the client using fetch, but to my knowledge this would expose my API Keys, which would be bad.
I took a nap, and when I woke thought this might be a good opportunity to use Google Firebase to solve my back-end woes. I instantiated Firebase in my project, then realized that I would need to get the ProPublica data into Google Firestore in order to use it, or I would need to construct a helper function that allowed me to request data from ProPublica through Firebase. If I remember correctly, Firebase allows me to securely make requests to my databases through the client, but it has been so long since I've used Firebase that I will need to re-educate myself on how it works.
That's where I am at as of today, 6/5/22. I know where to pull my data from, but I'm not sure exactly how to access it within my app. Further, I am going to need to figure out how to dynamically render that data on the front end. Using vanilla JS to do this sounds tedious - in previous projects I've used VueJS for this kind of thing, but again I will need to re-educate myself on how to use that framework.
When I revisit this project, I think the most important thing for me to focus on is how to get a single senator's data onto the trading card template. First, I'll noodle around with Firsebase to see if I can make those API calls with helper functions and send them to my app. Then I'll spend some experimenting with the easiest way to render that data on the card template.
You can check out the app so far here:
Code: https://glitch.com/edit/#!/congressional-trading-cards
Preview: https://congressional-trading-cards.glitch.me/
Top comments (0)