Skip to content

Repository files navigation

DSA Arena logo

DSA Arena

A dark, gamified workspace for a small crew to track DSA progress together—XP, levels, streaks, and a live squad feed.

Live demo


Our story

We’re a tight-knit group of friends who wanted one honest place to stay accountable on Data Structures & Algorithms—not another anonymous leaderboard, but something that felt like our arena.

So we built DSA Arena: a shared progress hub where we log solves by topic and difficulty, cheer each other on, and watch the squad move together. Five of us use it today, and we’re actively improving it with plans to grow the community and tie it into our Discord server for reminders, challenges, and richer social loops.

Built with

This project was built together by Satyam Singh and Mohd. Taiyab Jazim.

Screenshots

Landing — pick your profile and jump in Dashboard — overview, squad, and stats
Landing Dashboard
Dashboard — weekly progress & squad activity Tracker — log solves per topic (Easy / Medium / Hard)
Dashboard detail Tracker
Leaderboard — XP, problems solved, or streak
Leaderboard

Features

  • Squad-first landing — Choose your member from the group roster (admin accounts use an extra verification step).
  • Dashboard — Streak, XP, level, today’s activity, The Squad strip, weekly chart, and Squad Activity feed.
  • Tracker — Per-topic cards with counters for Easy / Medium / Hard; XP updates as you log progress.
  • Leaderboard — Sort by XP, problems solved, or streak; highlights your row.
  • Themes & layout — Dark/light mode and an app shell with sidebar navigation.
  • Switch user — Admins can impersonate another squad member for support and testing (see API).

Tech stack

Layer Technology
Frontend Next.js (App Router), React, TypeScript
Styling Tailwind CSS, Radix UI primitives, Lucide icons
Backend Next.js Route Handlers (app/api)
Database PostgreSQL with Prisma
Auth JWT in httpOnly cookies

Note: The live deployment URL contains “rust” from an earlier naming choice; this repository is the Next.js + TypeScript app that ships today.

Getting started

Prerequisites

  • Node.js 18+
  • A PostgreSQL database (local or hosted)

1. Clone and install

git clone <your-repo-url>
cd DSA-Arena-main
npm install

2. Environment

Copy the example file and set your database URL and secrets:

cp .env.example .env

See .env.example for required variables. For Prisma, DIRECT_URL is often the same as DATABASE_URL locally; some hosts (e.g. connection pooling) need a separate direct connection string.

3. Database

npm run db:generate
npm run db:push
npm run db:seed

The seed script creates five squad users (matching the roster used on the landing page), starter badges, and join activities.

4. Run locally

npm run dev

Open http://localhost:3000.

Scripts

npm run dev          # Development server
npm run build        # Production build
npm run start        # Production server
npm run db:generate  # Generate Prisma Client
npm run db:push      # Push schema (dev)
npm run db:migrate   # Migrations (when used)
npm run db:seed      # Seed squad data
npm run db:studio    # Prisma Studio

Roadmap

  • Deeper Discord integration (notifications, bot commands, optional role sync).
  • Room for more learners beyond the founding squad while keeping the “small group energy.”
  • Polish and hardening as usage grows.

License

MIT

About

Gamified DSA progress tracker for a small squad—dashboard, topic tracker, leaderboard, XP & streaks. Next.js + PostgreSQL.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages