John Zhou

Featured Case Study

Harlé logo

Harlé Members Platform

A custom membership platform built with Next.js, Supabase, and Stripe. The application brings together exclusive wellness content, subscription management, and a custom admin panel, giving members and the Harlé team everything they need in one place.

Special thanks to the amazing creative, Gabbi Graham, who designed the UX/UI of the web app while I worked on its full-stack development.

React

Next.js

Tailwind CSS

TypeScript

Supabase

Custom CMS

Membership System

Admin Panel

Stripe

API Integration

Responsive Design

Vimeo

Harlé member home, with workouts, recipes, and events

Details

Project Overview

Harlé workouts page, with filters for type, duration, and difficulty
Workout icon

Member Experience

A personalized member portal where users can browse workouts, recipes, expert interviews, events, and educational resources. Built-in filters make it easy to find content, all within a clean, branded interface.

Member Portal

Content Filtering

Video Streaming

Dynamic Content

Intuitive UI

Let's Talk ➜]
Harlé membership page, with monthly and annual billing
Billing icon

Subscriptions & Billing

A Stripe-powered membership system where members can choose monthly or annual plans, switch between billing options, and manage their subscriptions. Payments, invoices, and billing details are handled securely through Stripe.

Stripe Integration

Subscription Management

Plan Switching

Secure Payments

Self-Service Billing

Let's Talk ➜]
Harlé admin analytics, with workout views and unique viewers
Admin icon

Admin Dashboard & Analytics

A custom admin panel where the Harlé team can manage workouts, recipes, events, and educational content. Built-in analytics track workout views and member engagement, making it easy to manage and grow the platform.

Custom CMS

Content Management

Analytics Dashboard

Engagement Tracking

Role-Based Access

Let's Talk ➜]