Building with Care (Week 3): Hardware Hiccups, The NGO Directory, and Keeping Code DRY

#codequality #devjournal #showdev #softwaredevelopment

By Grace Olabode | Engineering Lead, Bloom After

It is hard to believe we are already in Week 3 of our sprint with the Tabi Project and TEE Foundation. We are building Bloom After to make sure Nigerian mothers have a safe and supportive app to face postpartum depression.

Last week, I focused heavily on maps, math, and building the foundation of the Resource Hub. This week, the goal was to build the NGO Directory, refactor our code so it is clean and reusable, and handle some content updates. It was also a week of unexpected hardware issues and learning how to navigate team dynamics.

What I Built This Week

I spent most of my time making the layouts actually work with real data and cleaning up the code so it runs smoothly.

1. The NGO Directory: I built the main page where users can scroll through a list of vetted non-profit organizations and support groups.

2. Resource Hub Updates: Since the heavy lifting for the hub was done last week, my task this week was just updating the categories. I replaced the "audio summary" and "podcast" tags with a single, unified "media" tag to make sorting easier for the users.

3. Minor UI Fixes and DRY Code: I spent a lot of time cleaning up the app. I focused heavily on implementing DRY (Don't Repeat Yourself) principles so we are reusing code instead of writing the same things twice. I also fixed small spacing issues, corrected text sizes, and made sure the mobile menus stacked perfectly on smaller screens.

Why I Did What I Did

Splitting Up the JavaScript: Instead of writing one giant wall of code, I broke our JavaScript into smaller and separate files. This makes the code much easier to read and fix.
Faking the Backend: I worked closely with our Backend Lead, Chijioke Uzodinma, to agree on how our data should be structured. Because we were still finalizing things, I built a fake API using JavaScript Promises to keep the frontend moving. Switching to the live backend later will just take changing one line of code.
CSS Grid over Media Queries: To make the NGO cards adjust to any screen size automatically, I used CSS Grid. This saved me from writing dozens of extra lines of code just for mobile screens.

Bugs, Fixes and Fan Failures

The Silent Crash
While splitting up our JavaScript files, I ran into an annoying bug where the Resource Detail page would only show the "Back" button. The rest of the page was completely blank. After opening the console, I saw a null error. The JavaScript was looking for specific HTML tags that did not exist in the new layout. I quickly updated the HTML to match and the content instantly popped back onto the screen.

The Messy Grid
When I first loaded the NGO data into the grid layout, the different text lengths caused the cards to stretch to completely different heights. I fixed this by using Flexbox to force the cards to match heights. I also added a CSS trick called line-clamp to automatically hide extra text and add three dots at the end.

The Hardware Hurdle
My biggest challenge this week was not actually code. My laptop fan completely died. To make things worse, the Eid ul Fitr holiday meant all the repair shops were closed. It took days to get it fixed. Because of this, we are currently way behind our schedule, but we are absolutely determined to make things work and catch up.

Sprint Reflections

Working in a team is incredibly fun but it can also be frustrating when schedules misalign or things break. Communication is everything. Working so closely with the backend lead this week really highlighted how much faster you can solve problems when you share the load.

If I could do this sprint differently, I would try to tackle minor visual fixes as I build the features, rather than saving them all for a clean up phase.

What I Am Most Proud Of

I am super proud of how cohesive the whole app looks right now. Seeing the Resource Hub and the new NGO Directory sitting side by side looking like a real and professional product is an amazing feeling. I am proud that despite laptop failures and being behind schedule, we are still building something that will genuinely help people.