Motivation

Showdown was born out of a desire for me and my brother to learn new skills and work together to build something tangible that can be used by others in the future.

We decided on building tournament management software for sports. Our goal is to help streamline the planning and management of tournaments for those who are less knowledgeable.

We have experience growing up around sports, casual and competitive, which provides us with an abundance of knowledge of the domain. We also know many friends and family who are teachers and coaches that can benefit from this software.

Screenshot of a design for the Showdown homepage featuring a banner image of a trophy with a browse tournament section below it.

Design Process

Given the size and complexity of the application we wished to create I knew I would need to properly approach designing it.

I invested countless hours in Figma creating a design system and reusable components to streamline the design process. I relied on my knowledge of web development and experience playing sports competively to design the preliminary designs.

Recently I set up prototypes in Figma and tested them with coaches and conveneers that I know. Using these observations I am producing the final version of the designs for our initial release.

Screenshot of prototype screens in Figma connected by interactions represented by blue lines

Development

I chose to develop Showdown in Next JS using Chakra UI to build a modular design system and for its provided accessible components such as modals and inputs.

My favourite part of this development environment is GraphQL Codegen. It reads provided GraphQL queries and generates React hooks for each query along with all the TypeScript types from our GraphQL API.

A collage of logos for GraphQL, Next JS, Chakra UI, TypeScript and Apollo
Ben Lammers
Built With
Gatsby logo
Tailwind logo
Sanity logo
Timeline icons made by Freepik from www.flaticon.com© 2022 Ben Lammers