Joshua Argent
HomeProjectsAboutBlogResumeContact
Joshua Argent

Web developer exploring application security

Navigate

  • Home
  • Projects
  • About
  • Blog
  • Resume
  • Contact

Content

    Connect

    • Email
    • GitHub
    • LinkedIn
    • YouTube
    • Instagram
    • Facebook
    • TikTok
    • RSS Feed

    © 2026 Joshua Argent. All rights reserved.

    Built with using Next.js

    Back to Projects

    PingElo

    PingElo

    TypeScript0 starsUpdated Jun 22, 2026
    Live DemoView Source

    Tech Stack

    TypeScript

    README

    PingElo - Ping Pong ELO Rating Tracker

    Next.js
    React
    TypeScript
    Tailwind_CSS
    License

    A full-stack ping pong ELO rating tracker with OAuth authentication, singles & doubles match logging, tournaments, and seasonal rankings.

    Features

    • Singles & Doubles - Track both 1v1 and 2v2 matches
    • ELO Rating System - Dynamic K-factor based on experience level
    • Score Margin Bonus - Get extra ELO for dominating wins
    • OAuth + Email Auth - Google OAuth and email/password login
    • Paid Tournaments - Enter tournaments with ELO-based entry fees
    • Seasonal Rankings - Monthly seasons with fresh starts
    • Activity Tracking - Earn bonuses for playing regularly
    • Responsive Design - Works on desktop and mobile

    Tech Stack

    Category Technology
    Framework Next.js 16.2 (App Router)
    Language TypeScript 6.0
    UI Library React 19.2
    Styling Tailwind CSS 4.2
    Database PostgreSQL with Prisma ORM
    Auth NextAuth.js

    Quick Start

    Prerequisites

    • Node.js 20.0.0+
    • PostgreSQL 14+
    • npm

    Installation

    # Clone the repository
    git clone https://github.com/joshuaargent/PingElo.git
    cd PingElo
    
    # Install dependencies
    npm install
    
    # Copy environment variables
    cp .env.example .env
    

    Configure Environment

    Edit .env with your settings:

    DATABASE_URL="postgresql://user:password@localhost:5432/pingelo"
    NEXTAUTH_URL="http://localhost:3000"
    NEXTAUTH_SECRET="generate-with-openssl-rand-base64-32"
    

    Database Setup

    # Generate Prisma client
    npm run db:generate
    
    # Create database tables
    npm run db:push
    

    Run Development Server

    npm run dev
    

    Visit http://localhost:3000

    ELO System

    Starting ELO

    Every player starts at 1000 ELO for both singles and doubles.

    Dynamic K-Factor

    Games Played K-Factor Description
    0-10 64 Rapid adjustment for new players
    11-30 48 Still adjusting quickly
    31-100 32 Established, stable players
    100+ 24 Veterans - slow to change

    Score Margin Bonus (Casual Matches)

    Point Difference Multiplier
    1-4 points 1.0x
    5-9 points 1.25x
    10+ points 1.5x

    Doubles ELO

    • Each player has separate singles ELO and doubles ELO
    • Team ELO is calculated as the average of both teammates' doubles ELO
    • Both teammates gain/lose the same amount per match
    • Individual adjustments based on experience level

    Tournament Entry Fees

    Your ELO Entry Fee
    Below 800 Free!
    800-999 10 ELO
    1000-1199 20 ELO
    1200+ 50 ELO

    Pages

    Route Description
    / Homepage with leaderboard preview
    /leaderboard Full singles & doubles leaderboards
    /dashboard Your personal stats and recent matches
    /matches/new Log a new singles or doubles match
    /matches/history View your match history
    /tournaments Browse and join tournaments
    /profile/[id] View player profiles
    /auth/signin Sign in to your account
    /auth/signup Create a new account

    Available Scripts

    Script Description
    npm run dev Start development server
    npm run build Build for production
    npm run start Start production server
    npm run db:push Push schema changes to database
    npm run db:studio Open Prisma Studio
    npm run db:migrate Create migration
    npm run test Run tests

    Deployment

    Vercel (Recommended)

    1. Fork this repository
    2. Create a new project on Vercel
    3. Import your forked repository
    4. Add environment variables in Vercel dashboard:
      • DATABASE_URL - PostgreSQL connection string
      • NEXTAUTH_URL - Your Vercel deployment URL
      • NEXTAUTH_SECRET - Generate with openssl rand -base64 32
      • GOOGLE_CLIENT_ID (optional)
      • GOOGLE_CLIENT_SECRET (optional)
    5. Deploy!

    Database Options

    Provider Free Tier
    Neon 0.5GB storage, 1 project
    Supabase 500MB database
    Railway $5 credit/month

    License

    MIT License