Recently, I announced a project on Twitter designed to support the local business community during the coronavirus outbreak. The problem as I saw it was an information gap. Plenty of businesses were able to operate with adjusted protocols, but trying to figure out every individual circumstance was time-consuming.
Pickup Philly is a directory for where to shop local right now, connecting businesses who want to operate with customers who still need food and supplies but might not know where to get them. Philly may be shut down, but local businesses and their communities can still continue to support each other during this difficult time. Businesses across the city have innovated and adapted almost overnight to be able to offer safe service to communities hard-pressed for access.
In my own neighborhood on a normal day, I can get most of what I need walking two or three blocks in any direction from my front door. Like most of Philly, I live in a thriving local business community and it’s perfect for times like these. While delivery times are getting longer for online shopping and the idea of heading to a crowded store is less than ideal, I’ve found corner stores and local shops to be my best option. The problem was just knowing who was still able to operate and what changes they’ve made to keep everyone safe.
This project focused on highlighting those businesses. Any small business from retail to restaurant is welcome to submit their information for listing, for free. The project was developed and released as open-source and it’s available now on GitHub.
Behind the scenes, it’s a headless-WordPress site running on our recently launched Shifter Headless. The front-end is built using Gatsby and hosted on Netlify. Part of creating Pickup Philly was to better understand our product and how we can improve it by examining a use case like this one first hand. We also want to share what we learned along the way.
Getting Started with Shifter Headless
You can launch a new Headless site straight from the Shifter Dashboard, no special tricks required. If you’re familiar with Shifter already you’ll know us as the static site generator for WordPress. Shifter Headless is a new product running on the same platform with a few key differences.
Shifter Headless was designed for Jamstack sites and sourcing content. If you use WordPress as a content source but not necessarily as a front-end, this is ideal for you. Unlike Shifter Static, our original static site generator, Shifter Headless runs continuously. There’s no powering down after inactivity or having to start up WordPress before getting to work. This service is also a bit more a la carte, we’re not packaging it with a static site generator so you can utilize your data however you need it.
Using the vast capabilities of AWS, we’re able to configure an environment ideal for WordPress. From the container it runs on to the network serving and protecting those sites, it’s proven how important a resilient network and developer experience can be.
Sites created on Shifter Headless come pre-configured with all the plugins you’ll need to create a headless site. There’s nothing to install, not even WordPress. Your site is ready in one-click from the Shifter Dashboard, and like all Shifter sites, we manage plugin versions and offer rolling updates to WordPress core so you can worry less about maintenance.
Building Pickup Philly
This was my first time using the geolocation features offered by Algolia and while that was a steep learning curve for me, I’m glad I did it. Algolia, WordPress, and Gatsby are an amazing combo once you get going. I’m looking forward to experimenting more with the map options such as swapping the default Google Map for Leaflet or Mapbox.
The site is relatively simple on the data front. We have one custom post type for locations which we created using Custom Post Type UI. That plugin comes pre-installed on Shifter Headless. After creating the post type we began to do some data entry.
For each location in the directory we created some custom fields using Advanced Custom Fields. We only needed a few fields so it was no problem using the free version which is also pre-installed on Shifter Headless. We even used the Google Maps field which requires a Google Maps API key, and I was able to use the Code Snippets plugin to add the API key required for the ACF map field.
We use WPGraphQL as our preferred source method when building Gatsby sites using WordPress right now. Don’t forget, there is a new Gatsby source WordPress plugin available too. I haven’t used it yet but I’m planning to give it a try soon. For this project, I’m comfortable with WPGraphQL and I know it works well with ACF so this was the way to go for me.
We’re also using WPGraphiQL, which is pre-installed on Shifter Headless, and was very useful when testing queries. I was able to write and modify queries before writing any code in Gatsby or GraphQL just by activating the plugin.
Contributing to Pickup Philly
The project is open-source and free to use. If you find it helpful for where you live feel free to fork it and deploy it for your community. We would be happy to help you get started and we welcome improvements. If you have a pull request or an idea send it our way.
I also hope this site is a learning tool for some. Getting started with building static sites using Gatsby and WordPress has a bit of a learning curve. I’ll be the first to praise the benefits of the Jamstack but it can be difficult at times especially when you’re learning something new. We set out planning to build this in a day and for the most part we did, though there was a bit of refactoring, testing, learning, and mostly breaking the build after the fact. In the end, I’m happy we were able to launch this for everyone to see and use.
Pickup Philly will be available until it is no longer needed and we’ll keep adding updates and new businesses often. This shutdown won’t last forever, but I have a feeling the site will adapt once we’re able to go out in public again, and turn into a tool that helps us support our local community the best way we know how.