Backyard Events is a next generation event ticketing platform that uses social-media-like interactions to help users find events they're interested in. It was founded by Ben Swerdlow back in 2019. Ben continued to casually work on the project alone until early 2021 when he first asked for my help designing a logo, then for design consulting, then finally asking me to help with programming. I have since helped Ben design and build the Backyard Events web app, API, and branding.

The Backyard logo was a multi-month-long project. After dozens of concepts, the final design we landed on is this abstract representation of a QR code, one of the major components of our ticketing system. The logo and every letter of the wordmark use superellipse curves to create a soft and inviting appearance while still looking modern and abstract. I've continued to tweak the lines, spacing, and scale of each letter all throughout the development of the app. Details like that the shapes after the b are ever so slightly thinner than the ones in and before the B help make the typography most pleasing to the eye while still appearing consistent with the icon.

The UI and API for Backyard is built in SvelteKit, a bleeding-edge server-side rendering framework. Ben and I chose SvelteKit because it allowed us to seamlessly integrate our frontend and backend code along with the performance and ease of development advantages Svelte has over traditional virtual dom frameworks like React and Vue.

The hardest part of the development was the stack UI. I created a custom Svelte store which we call methods on to control the segments on the stack. This task is harder than it may seem because the focus (horizontal scroll) may need to reflect this change. There are many situations where we are adding a new segment and want to direct the user's focus to that segment. It is also common that we are adding many segments where we do not want the user's focus to change. This requires fine control over how, when, and where segments are added to the stack. Then to make it one step harder, if a segment is already on the stack and we attempt to add it again, we instead move that segment from its last location in the stack to its new location in the stack. As icing on the cake at any point in time, a user can either click on desktop or swipe on mobile to shift focus to another segment. All of these things can happen at the same time.

Our backend is built with a more standard tech stack. We use PostgreSQL for our data storage and Redis for sessions storage. We do not offer standard password authentication, instead only allowing OAuth providers like Sign in With Google. At the time of writing, we also have anonymous users with plans to implement anonymous user upgrade soon. Our API is mostly RESTfull and fairly straightforward to use. We plan to make our API publically available once it stabilizes.

I created a unique UI system for Backyard which uses a horizontal stack allowing users to swipe between events, profiles, checkout screens, and any other components needed. When hyperlinks are clicked, it inserts a new segment adjacent to the user's current focus. This system allows for a seamless experience where at any time a user can view any information from any segment without canceling, closing, or diverting their attention.