capsmd.org

Role: Web developer

Type: Code

Built a full-stack site with custom CMS for a political publication non-profit organization in Montgomery, Maryland.

May. 2019 - Mar. 2021

This job is finished and work is rarely done on it anymore.

Completed

CAPS (Council for Advocacy and Policy Solutions) was a non-profit political publication group to educate constituents in Montgomery County, Maryland about legislation that affects them. The group came to me in May 2019 during my finals week for college because their previous web developer had dropped the ball in building a site with Webflow.com. (See Webflow site as screenshots below.) They were launching their CAPS program in a few weeks and were in a mad rush to get the site up and operational. I agreed, excited to use my new React and Firebase skills, and was able to crank out a website for them in a week. (and still pass 4 of my engineering classes!) There was one hiccup the night before they were launching, I was making a few final (vital) touches to the site, and suddenly my computer crashed. I spent hours troubleshooting to get back hours of un-pushed changes, but unfortunately, my hard drive was busted. The next day I learned some valuable lessons:

Recovering data on hard drives is tough. There are no local hard drive repair companies in Silicon Valley. How is that possible!? Notes were taken for my Minute.tech project.
I had fortunately deployed to Firebase before my computer crashed and thought there might be a way to reverse deploy or access that deployed version. A few hours later, and asking a few techie friends I found out that you can access and download the build files via your web browser! I previously thought the build process jumbled things up so the client side couldn't see the build files, but I was wrong! This is a valuable lesson when deploying sensitive software to the web and for my particular situation to recover data.

The final front-end experience was built with HTML/CSS/React.js and back-end services like hosting with SSL, server-side functions, file storage, authentication, and NoSQL databases were built with Firebase. The initial build required me to go into the back-end to create a React.js component file for every article they wanted to post to the system, which quickly showed that it was not going to work efficiently for their use case with short deadlines, differing time zones, etc. So I built them out a custom Content Management System (CMS) so they could log in as an admin, and post custom articles at their leisure. Building the system raised a few challenges such as:

How could I dynamically post articles?
How to allow CAPS employees to publish formatted articles with images, graphs, etc?

I tackled these challenges as follows:

Previously to solving this, I didn't know how I would render a web page route with React Router without creating a React component file for that web page. After a bit of messing around in a test project, I figured out that I could render routes by pulling data from the database and then passing that data to an "Article" component which would then render that data accordingly. Here was the most important section of code that made that dynamic render possible:
Previously to creating the CMS, articles would take longer to make, but each page would be quality assured to be beautiful, for example, for these custom graphs I used the  recharts library for some articles below. I, unfortunately, had to sacrifice these beautiful graphs to trade off for a viable solution that would be simple for the client in this use case. That solution was to use the  react-quill library to allow the user to create "Rich Text" articles that have formatted text for the article with image inserts and links. I also created an option for the user to upload a PDF that would be viewable in a clean interface with the react-pdf library.

At the end of 2022 CAPS closed down and the main URL "capsmd.org" was taken offline, however, the site I built remains at: https://capsmd-site.web.app/

Some articles have CORS issues because the URL is different (I will fix this, but it is not a priority since it is archived!), a few good articles that work are here: