What do you do when your wife comes up with a brilliant set of activities to keep families at your church engaged for Black History Month during a pandemic?
Offer to build her a website for it of course!
I thought I was getting into a small one-pager, flyer website until I looked at the content she had. I quickly realized that there was too much information to create manually in HTML or using WordPress (overkill) - so I decided to see if Sanity combined with Next JS might work.
The first thing I did was ask her for all the flyers, communication items, and images she was planning to use.
Then I looked for patterns where information was repeating - or that might need to change on the fly and was, therefore, better managed in a CMS.
I identified three key items that would work well with a combination of data from Sanity and CSS Grid:
- Contests - this had two groups (kids up to 9 years old, and kids 10 plus); each section had information on who could participate, the deadline, and prizes
- Family activities - she had these listed on a flyer and I could see that each activity had a materials and description section (later on I was able to easily add an image to each)
- Recommended reading - this included an image of the book, the author, and an optional section to capture any information about a related activity
These items were super simple to set up in Sanity. Since I hadn't yet mastered how to use rich content, I cloned the Sanity/NextJS sample and followed the accompanying blog post. Everything was explained really well and I was able to get all the data to come through by inspecting in the dev tools console.log.
From there it was a process of fine-tuning GROQ queries with the 'Vision' plugin for Sanity Studio, checking what data was coming through and then playing with how to represent it.
Overall, because I was able to so easily add and remove data in the CMS, I was able to focus on the user experience, flow, and representation of the site, rather than coding repeating content when my wife inevitably had changes she wanted.
One of those changes was she had a document that she wanted families to download from the site. I was able to use Sanity's 'file' type in an Asset category to accomplish this.
Once everything was done, I used Next JS's 'deploy from GitHub' process to easily make the site live and give her the URL to distribute.
Overall, the project took me less than 8 hours to put together! (it was an 'all-nighter' because she needed it the next day!).
