Purpose After Sports

About the project

Purpose After Sports is a community for former atheletes to connect and keep a healthy structured lifestyle after their sports career. They provide workout and nutrition plans, merchandise, and a platform for athletes to share their experiences.

We designed the site to be a clean and professional looking space that fit the brand the client had already created. Using the bold colors with a clean layout, we created a site that is easy to navigate and use. The site is built with Next.js and uses Stripe for payment processing, allowing them to manage products and orders efficiently.

Objective

They were using Wix which works fine for websites but limits their ability to customize and scale. They wanted a custom site that could handle their specific needs. and wanted something that looked good without them having to learn more about how to make wix templates look like clean professional websites. Which is where we come in.

Challenges

They needed a site that could handle multiple product types, including workout plans, nutrition plans, and merchandise. They also wanted to automate the payment process and product delivery, ensuring customers received the right emails and forms after checkout.

The Solution

We built a custom site that automates payments and product delivery. Stripe handles transactions, and customers automatically receive the right emails and forms after checkout.

We set them up with a system that handles three main product types:
Workout Plans: A PDF that the client created to be sent to the customer as a PDF upon purchase.
Nutrition Plans PDFs that would be sent to the customer after they completed a questionaire that is emailed to the customer after they purchase.
Merch Physical items with flat shipping and size options. They also wanted a free shipping code for the athletes that worked out at their gym. We used a PostgreSQL database to manage product data. Stripe was already familiar to them, so we stuck with it and built a custom checkout using Stripe’s API. We set up a webhook in our Next.js app to listen for Stripe events and trigger emails when payments succeed.

A custom cart was built using Zustand for state management. This let us manage product selection and checkout flow without external dependencies and made the shopping experience smooth and responsive.

They also had a collection of unlisted YouTube videos they wanted to share. We built a page to display those embeds and added a search bar that filters the playlist.

Lastly, we gave them a Canva template with exact dimensions for product images so they could create visuals that fit perfectly in the layout to make sure they were in sync with the size images needed for the site.