🏆 ByteBashBlitz Terminal - Community Leaderboard Platform

A gamified community platform for coders to track progress, participate in events, form clans, and showcase projects.

🚀 Live Platform

Visit: terminal.bytebashblitz.org

✨ Features

For Community Members

• 👥 GitHub OAuth Login - Seamless authentication
• 🏆 Leaderboard System - Points-based ranking with tiers
• 📅 Event Management - Join WeeklyBash and community events
• 🏰 Clan System - Form teams and compete together
• 🎯 Project Showcase - Present your projects with slot allocation
• 📱 PWA Support - Install as mobile app
• 🔔 Push Notifications - Real-time updates

For Organizers

• 📊 Member Management - Add/edit profiles and points
• 📅 Event Creation - Schedule and manage community events
• 🏰 Clan Administration - Manage clan scores and activities
• 🎤 Showcase Management - Allocate presentation slots
• 📢 Announcements - Send community notifications

🛠️ Tech Stack

• Framework: Remix v2 with TypeScript
• Database: Supabase (PostgreSQL)
• Authentication: GitHub OAuth via Remix Auth
• Styling: Tailwind CSS + Radix UI
• Animations: Framer Motion
• Deployment: Render
• PWA: Vite PWA Plugin

🚀 Quick Start

Prerequisites

• Node.js 20+
• GitHub account
• Supabase account

Development Setup

1. Clone the repository

git clone https://github.com/bennyhinn18/remix-leaderboard.git
cd remix-leaderboard

2. Install dependencies

npm install

3. Set up environment variables

cp .env.example .env
# Fill in your Supabase and GitHub OAuth credentials

4. Set up database

# Run all SQL migrations in supabase/migrations/ in your Supabase dashboard

5. Start development server

npm run dev

The app will be available at http://localhost:5173

📁 Project Structure

app/
├── components/          # Reusable UI components
│   ├── ui/             # Base UI components (Radix)
│   ├── events/         # Event-related components
│   ├── leaderboard/    # Leaderboard components
│   └── project-showcase/ # Project showcase components
├── routes/             # Remix routes (pages + API)
├── services/           # External API integrations
├── utils/              # Utility functions
├── types/              # TypeScript type definitions
├── hooks/              # Custom React hooks
└── contexts/           # React contexts

supabase/
└── migrations/         # Database schema migrations

public/                 # Static assets
scripts/               # Utility scripts
docs/                  # Documentation

Database Management

This project uses Supabase for the database. We have comprehensive tools for managing schema changes, including remote database sync.

# Check for schema differences
npm run db:check

# Create migration for changes made in Supabase Dashboard
npm run db:create-migration "describe_your_changes"

# Check Supabase CLI setup for remote sync
npm run db:remote

# Generate TypeScript types from database
npm run types:generate

# Full sync workflow help
npm run db:sync

🌐 Remote Database Sync: If you make changes directly in Supabase's SQL editor, follow our Supabase Remote Sync Guide to sync them with the codebase.

📋 Database Workflow: For complete database change management, see our Database Workflow Guide.

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run typecheck    # Run TypeScript type checking
npm run lint         # Run ESLint

🗄️ Database Schema

Key tables:

• members - User profiles and stats
• events - Community events
• clans - Team organization
• points - Points history tracking
• project_showcase_slots - Project presentation slots
• notifications - Real-time notifications

See supabase/migrations/ for complete schema.

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Development Workflow

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and type checking
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🎯 Roadmap

• Fix TypeScript compilation errors
• Add comprehensive testing suite
• Implement email notifications
• Add calendar integration
• Create mobile app with React Native
• Add more gamification features

📞 Support

• Issues: GitHub Issues
• Documentation: Check /docs folder
• Community: Join our Discord server

---

Built with ❤️ for the ByteBashBlitz community

If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of npm run build

• build/server
• build/client

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever css framework you prefer. See the Vite docs on css for more information.