Inspiration: Baltimore Furniture Bank's Mission and Background
The Baltimore Furniture Bank (BFB) collects gently used furniture from universities, businesses, and members of the public to distribute to people in poverty who would otherwise not be able to furnish their home. The Bank serves individuals and families who have recently had a major life changing experience that caused the loss or damage of their furniture. Recipients will be coming from the experience of homelessness, victims of fire or similar catastrophe.
WLOY Loyola Radio incubated the BFB until it received 501c3 status through Fusion Partnerships and won some grants. The team has secured warehouse space in Park Heights to store donations.
During incubation, the BFB helped over a dozen families, mostly single mothers coming out of shelters. Now that there is space, there is the opportunity to scale the impact. This also means that the team needs an app to help with inventory management.
In June 2018, I built BFB a basic WordPress page to help create a web presence as they secured funding and space. However, their needs have evolved and I sought to build a separate web app that pulls data from their existing WordPress site.
The web app needs to function as a database/inventory management system for collected furniture and provide a means for the team to showcase available furniture and update it as it's delivered to clients. The team requested that the backend is built in WordPress since they're familiar with the ecosystem.
I determined that a headless WordPress app with a React frontend is the best way to accomplish this.
Project Specs: Backend
Outlining the needs of the organization's WordPress backend:
- WordPress backend for data
- Furniture postings created through WordPress due to familiarity with the ecosystem among the BFB team
- WordPress media gallery essentially acting as an inventory with WordPress acting as the data source
- Organization user/permission management
- Being able to set the permissions of individual users in the organization through familiar WP backend
- User types on the WP backend:
- Furniture Donation Manager
- Able to create Furniture Posts when incoming furniture donations are processed and after they're inspected
- Able to unpublish Furniture Posts once delivery to client is confirmed (this would be the form of inventory management)
- Responsible for taking photos of the furniture and adding the posting
Project Specs: Frontend
- React frontend for client browsing
- Pulls data from furniture listings that the team adds to the WordPress backend
- Ability to filter furniture listings based on categories such as Living Room, Dining Room, Lighting, etc.
- Upon filtering, the frontend updates the listings that are displayed
- Frontend updates to be continously accurate (this ruled out Gatsby as my choice since it would require a rebuild on changes)
- Caseworkers will be able to log in and browse the listings
What It Does
The furniture listings are created through the WordPress backend via a Custom Post Type and Advanced Custom Fields. The React frontend then fetches the furniture listings via the WordPress REST API. The frontend remains up to date with published furniture.
There are buttons on the frontend that allow for filtering based on furniture category.
Caseworkers can click on a furniture card to reveal a modal with more information and a Claim this item button that will unpublish the listing.
Note: The claim process isn't implemented as it requires auth, and I made a choice not to focus on the auth since it could impact the live site. Additional information in the 'Challenges I Faced' section below.
- React, styled components, axios
- WordPress hosted on Digital Ocean with Custom Post Types and Advanced Custom Fields
How I Built It
On Friday, I first mapped out what I thought the app should look like and how it should function. On Saturday afternoon, I met with one of the project founders to make sure that I understood the needs and the specs correctly.
I knew that shaping the data while working within the WordPress constraint would be challenging, so I first built out the WordPress backend. I decided to create a Pieces post type (Furniture was strange since the singular and plural are both Furniture). I removed several fields and then created several custom fields with Advanced Custom Fields.
I modeled the fields based on the project needs which were informed by my meeting with a BFB co-founder. My goal was to only provide the necessary fields to limit the visual noise on the backend. The user is able to upload a photo and enter all information through this interface.
Next, I worked on the frontend. I've made similar frontends before, so I was able to leverage some of my existing ideas and styles. The BFB representative liked the UI of a project I showed him as a potential inspiration, so I was able to limit the amount of interface design that I needed to do from scratch.
When the frontend loads, the data is fetched from the WordPress backend and rendered as a grid of entries with data pulled from the custom fields. The frontend remains up to date with published furniture posts.
Challenges I Faced
I ran into some issues with determining how to handle furniture categories. I found a solution by creating a custom field for 'Category' and restricting it to the main category for the piece. This is what's being used for sorting on the frontend.
Using the WordPress backend as the sole datastore was a challenging, but fun, constraint. I had to think about how to model the data and to create fields that ensured the entries would be as streamlined as possible.
My goal was to get the core functionality working this weekend, which is the UX of the backend uploading process and then pulling that data on the frontend.
I had issues provisioning a local Docker container for the site, and so I implemented the furniture listing functionality directly onto the live site. I wouldn't typically do this, but I made a choice to get a working prototype of that core feature.
I put the auth process on hold because it required edits to the live server's .htaccess, and I wasn't comfortable doing that for this first prototype.
- I need to work out the authentication. I know what I want the auth to look like, but I wanted to focus on the core functionality first this weekend.
The roadmap for the auth process is the following:
- Trusted BFB team members create 'Case Worker' users on the BFB WordPress backend
- The frontend will have a login process that checks for their existing WP credentials
- They won't ever need to log in to the backend of the site, which allows for more flexibility and security
- This would then allow them full access to the frontend of the site, where they'd be able to browse and claim furniture
- They login, and then interact with the app, which would be similar to the live prototype created this weekend.
I need to work on the 'claiming' system. I have some ideas but need to test further. One quick solution is to have an authenticated user send a PUT request to the WP backend that unpublishes the listing. This would solve the issue, but I'd like there to be more states than 'published' and 'unpublished.'
I'm planning to refactor to NextJS so that I can leverage the SSR (server side rendering) provided. This would allow an Express/Node server on the frontend, which can be used to create dynamic routes for the furniture listings on the frontend.
I set a goal to have a live prototype by the submission deadline. Thanks to the amazing Netlify, I was able to do this and set up CD from my GitHub repo.
I wanted to do this for a few reasons:
- My goal was to create a working, testable, live prototype of as many core features as I could safely implement during the hackathon.
- Get a baseline Lighthouse score (which is included as a photo)
- The goal for this is to keep as close to green as possible as I build out features, and I always like to set a baseline with a prototype.
Here's the live prototype link: Live prototype on Netlify
Here's the prototype repo link: GitHub repo for prototype
The photos used in the frontend for examples are pulled from unsplash.com.
Here are specific credits:
- Ceiling light fixture: Garrett Anderson
- Table: Harry Tang
- Bed: NeONBRAND
- Chair: Andres Jasso
- Wooden Lamp: Joel Henry
- Stovetop Kettle: Milada Vigerova
- Couch (to be uploaded as an example): Nathan Fertig