Gimbo's Universe / AI Builder · Tennis Buddy
Side project · 2026

Tennis
Buddy

A social + match-tracking app for amateur tennis players — find a hit partner, track your matches, play more tennis.

Role
Design + Frontend + Backend + Deploy
Status
Alpha · live in production
Stack
React · Supabase · Vercel
Design
Roland-Garros × Material 3

两个老问题,放进同一个 app

业余网球玩家最常聊到的两件事:"今天没人陪我打""我上次跟谁打的什么比分?"。 Tennis Buddy 把"发现搭子"和"记录比赛"做进同一条产品线 —— 用最少的步骤把球友变成赛季数据。

Discover

同水平的人在哪

按距离 + NTRP 等级筛选,看到附近哪些球场常有人、谁今晚有空。不是社交首页,是"今天要不要去 hit 一场"的导航。

Match

从邀请到比分

Request to play → 接受 → Submit Score → past 历史。一整条比赛生命周期跑在一个 tab 里,记录摩擦最小化。

Profile

赛季可视化

每场比赛沉淀到 Profile:总场次 / 胜率 / 最常打的对手 / 最常去的球场。打了 30 场你能看到自己一年是怎么打过来的。

怎么搭起来的

前端用 React 19 + Vite + MUI v6,设计语言以法网(Roland-Garros)的色调和字体为基础, 用 Material 3 的形状语言落地交互。后端是 Supabase 全家桶,部署在 Vercel 上,push 即上线。

Frontend

UI Layer

  • React 19 SPA
  • Vite 8 build tool
  • MUI v6 components
  • Tailwind v3 layout utils
  • React Router 7 client routing
Backend

Data + Auth

  • Postgres via Supabase
  • Row Level Security 每行权限
  • Triggers 自动同步 profile
  • Magic-link auth 无密码登录
  • Realtime future
Deploy

Infra

  • Vercel edge CDN
  • GitHub source of truth
  • CI/CD git push = deploy
  • Preview URLs per branch
Design

Visual System

  • Francois One display
  • Public Sans body
  • RG green + clay orange brand
  • M3 pill buttons shape
  • Mint / peach bands page rhythm
User
Browser
React app + cached session
Hosting
Vercel CDN
Static assets globally
Source
GitHub
Source of truth · auto-deploy
Backend
Supabase
Postgres · Auth · RLS
↓ Browser ← CDN · CDN built from GitHub · Browser ↔ Supabase ↓

端到端做完了什么

从产品概念到 production live,一个人独立完成的范围 —— 设计、前端、后端、部署、用户测试。

37
Design frames

用 Pencil 完成完整产品 IA + 用户流,5 个 tab 加 1 个 detail page,所有 state(empty / pending / success / past)都画到。

5
Live pages

Home / Explore / Match / Community / Profile + Match detail。React Router 客户端路由,Context 跨页面同步状态。

1:1
Auth ↔ profile

auth.users 与 public.profiles 用 UUID 1:1 绑定,触发器在 signup 时自动建档,RLS 保证只能改自己的行。

git push → live

CI/CD 全自动 —— commit 上 GitHub,Vercel 监听 push,build,deploy 到 production CDN,30 秒内全球可见。

Product Design React TypeScript-ready Postgres RLS / Auth CI/CD Design System UX Writing Frontend Architecture Full-stack

学到的几个想法

过程比结果有意思 —— 这个 side project 给我留下几个之后想继续用的想法。

Security

RLS 比前端校验扎实多了

把权限规则下沉到 Postgres,前端就算被绕过,数据库也不放行。"信不过前端"应该是默认假设。

UX

Magic link > 密码

邮箱链接本身就是凭证,没"忘记密码"流程,没"先注册才能登录"两步,新老用户走同一路径。

Process

先跑通再优化

每一步都先做最丑的能跑版,push 上 production,再回头打磨。前端不接通后端之前,UI 再精致都是 demo。

试试看 →

Alpha 版本已经上线。你可以用任意邮箱登录,5 秒钟收到 magic link, 自己填一份 profile 看看整套流程。

Open Tennis Buddy →

No password is ever stored. Login uses email-only magic links via Supabase Auth. Your email is used solely to send the sign-in link · alpha data may be reset between iterations.