Building the Search: My Week 2 Progress on Bloom After

#webdev #frontend #devjournal #javascript

By Grace Olabode | Engineering Lead, Bloom After

In my first article, I talked about setting the foundation for our project. This week, we actually started building the tools for mothers to find support. It was a busy week of maps and filters and making the Resource Hub look exactly like the safe space the designers planned.

What I Built This Week

1. The Clinic & Hospital Finder
This was the most technical part of my week. I built the search directory so mothers can find a clinic easily without scrolling forever while strictly following our MVP requirements.

The Interactive Map & Directions I used Leaflet.js to make a map with clinic pins. I also added a "Use My Location" button that uses browser geolocation and the Haversine formula to calculate exactly how many kilometers away each clinic is, automatically sorting the closest ones to the top. I also wired up a "Directions" button that routes users directly via Google Maps.
Advanced Filters: I made a filtering system so users can sort by cost like Free/Subsidised vs Private. They can also filter by the type of provider (clinic, therapist, psychiatrist) or if they want to see someone online or in person.
Dynamic Slide-out Details: When you click a provider, a panel slides out. I programmed the logic to dynamically render different information depending on the provider type which includes displaying specialist credentials, languages spoken, areas of expertise, opening hours, fee ranges, and an "Accepting New Patients" status pill.
Private Feedback System: To keep the directory a safe space, our MVP doesn't include public reviews. Instead, I built a secure "Private Feedback" form inside the details panel so mothers can confidentially share their experiences directly with our team for quality control.

2. Building the Resource Hub
A huge part of my week was spent getting the content library ready. I didn't just style things but I actually built the main pages from scratch.

The Main Library: I built the Articles and Resources pages from the ground up. I had to make sure the logic was set up so that we can easily add more content later without the code breaking.
Technical Layouts: I updated the code in renderers.js to handle the specific data structures for our resources. This included building the logic to display infographics properly and setting up the side-by-side comparison view for the "Myth vs. Fact" section.

Technical Tools & Setup

We needed a way to host images and keep the site live without managing our own servers.

Cloudinary, MongoDB, and Render:
I worked with our Backend Lead, Chijioke Uzodinma, to set up Cloudinary for our images. This keeps the site fast because heavy images won't slow us down. We also integrated MongoDB to store the clinic and resources data and moved everything over to Render so our backend logic stays stable.

Challenges I Faced

The biggest headache was a map bug where it would just show a blank grey box. I figured out it was trying to load before the page was fully ready so I added a fix in the JS to force the map to check its size again right after the page loads.

Another hurdle was getting the "Directions" button to actually route users properly. I initially thought I could just pass the raw latitude and longitude into a basic link, but it wasn't working. I had to dig in and figure out the exact URL format Google Maps requires so that when a mother clicks the button, it seamlessly opens up accurate driving or walking directions on her device.

I also had a problem with the "Load More" button not hiding when the list was finished. I fixed this by adding a global rule in our CSS to make sure the "hidden" command always wins over other styles.

Finally, we had a weird issue with Render. For some reason I don't really understand yet, it isn't deploying automatically when we push our code. Because of this, we have to go in and manually trigger the deployments every single time we make a change. It's a bit annoying, but we are working around it for now!

What I Learned

Maps and Math: I learned how to use the Haversine formula to calculate the distance between two points on a map.
Cleaner Code: I reminded myself to keep styling out of the JavaScript. Moving those styles into a CSS file made everything way easier to read and fix.
Working Together: Setting up the cloud tools and MongoDB with the backend lead showed me how much faster we move when the frontend and backend are in sync.