Tennis match recording and sharing app. Record your matches, create beautiful story cards, and compete with friends in groups.
- 📊 Record Matches - Track your tennis matches with detailed scores
- 📸 Story Cards - Generate Instagram-ready story cards with custom backgrounds
- 👥 Groups - Create or join groups to compete with friends
- 🏆 Leaderboards - Track rankings within your groups
- 📈 Statistics - View detailed stats about your performance
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Database: Supabase (PostgreSQL)
- Auth: Supabase Auth (Google OAuth)
- Image Generation: html2canvas
- Node.js 18+
- pnpm
- Supabase account
- Clone the repository:
git clone https://github.com/yourusername/matchpost.git
cd matchpost- Install dependencies:
pnpm install- Set up environment variables:
cp .env.example .env.local- Add your Supabase credentials to
.env.local:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Set up Supabase database:
- Create a new Supabase project
- Run the SQL files in
/supabasefolder in order - Enable Google OAuth in Authentication settings
-
Run the development server:
pnpm dev- Open the app and click "Sign in with Google"
- Authorize with your Google account
- From Dashboard, tap "New Match"
- Select match type (Singles/Doubles)
- Enter opponent name
- Input scores for each set (e.g., 6-4, 6-2)
- Add location (optional)
- Select date
- Tap "Save & Create Story Card"
- After saving a match, you'll be taken to Story Card creator
- Choose a template (Sporty, Dark, Neon, Minimal)
- Upload your own background photo (optional)
- Tap "Share to Instagram Story" or "Save to Gallery"
- Go to Profile or Stats page
- See your win rate, streaks, and monthly performance
- Track your progress over time
- Tap "Groups" from Dashboard
- Create a new group or join existing ones
- Compete with friends on leaderboards
Coming soon...
MIT