Bug Kid: Interactive Children's Book Website

My sister Skyler is a talented aspiring writer and director who has created a variety of films (check out her work at skylersulby.com). Throughout them are themes of childhood, being different, wanting to make friends, and this green bug character. She's slowly been building up this green, plaid dress wearing bug character (with cameos in other of her films) and decided to write a children's book for character "Bug Kid" capturing all of these themes and more. I have always wanted to make something with her together (visions of bickering as siblings growing up comes to mind) and I thought this was a perfect opportunity. I was always going to help her, but offering to write her a website was my way of being a part of her story.

The Vision

Skyler had created this wonderful Bug Kid character, had written her book, and wanted to sell the book online. But she wanted more to bring the character to life and create an engaging experience to live in this character's world, read her blog posts, and discover secrets (and collect bugs!).

The Website

What we ended up making is bugkid.com which features a blog written by Skyler from the perspective of Bug Kid, a store to purchase the Bug Kid book and merch, and bugs that crawl across the screen that you can catch by clicking.

The Short Film

The character Bug Kid and the themes throughout the book were first created as a stop motion short. Watch the original short here (and Skyler's other works on her Vimeo page)

The Design

I had never written a Next.js website before. I had learned many things as I went along, and a lot more after rewriting it a second time. But overall Next was a perfect solution to stand up something fast and fun.

It's extremely easy to deploy with Vercel
It's very convenient to integrate with APIs through API routes
The App router is intuitive and fun to use
And schadcn is tidy, lightweight, and also very pretty.

It wasn't always a breeze. Learning the nuances of Next's server side rendering later into development gave me many inefficiencies in page loads and lots of unnecessary "use client" directives.

Stripe

One of the biggest learning experiences was implementing a complete e-commerce solution using Stripe as a headless storefront. There were many options but Stripe seemed the easiest.

Hosted checkout through Stripe is easy to set up
Using Stripe as a product catalog means no extra infra to maintain

The only issues I experienced were that there isn't a managed way to calculate shipping. This left me to write a crude approximation for shipping, and limit large orders to maximum quantities.

The Blog Component

The site features a blog which I added late into development and isn't as rich of a feature as I wanted to create. It uses static blog post files rendered in MDX deployed alongside the rest of the code. This was not ideal but it still captured the essence of what Skyler was trying to create. As I was building her website, I knew the ideal solution was a CMS like Sanity which is what I later implemented for my own blog and will later add to her website.

Key Takeaways

Next is fun and easy. Stripe is fun and easy. Sanity is fun and not that easy. But if I were going to do it again, I would definitely have learned more about software architecture. Adding features after the first production deployment, months after putting it aside, showed me my code was not as extensible as what I have learned since then. Following something like Clean Architecture, or React design patterns like compound components would have definitely helped future me with writing new features.

Visit Bug Kid

Visit the website here!