Code Rush

Code. Create. Conquer. The ultimate campus CSS showdown by GDG On Campus PUP.

Code Rush is an interactive, competitive coding platform designed to test and sharpen CSS skills. Participants race against the clock to arrange code blocks, match designs, and build layouts using modern CSS techniques. It combines the thrill of a speed run with the intricacies of web design.

Table of Contents

• About
• Start here
• Features
• Tech Stack
• Quick start
• Usage
• Documentation
• Contributors
• Support
• License

About

Code Rush is GDG On Campus PUP's competitive CSS arena. Participants race against the clock to arrange code blocks, match designs, and build layouts. Built for campus showdowns where speed and visual accuracy both score.

Start here

• Humans: this README, then docs/state.md
• Agents: AGENTS.md (state → index → FLAGS)
• Contributors: table below

Features

• Interactive Challenges: Drag, drop, and configure CSS properties to solve layout puzzles.
• Real-time Preview: Visualize your code's output instantly as you build.
• Speed Runs: Compete for the fastest completion times and climb the leaderboards.
• Dynamic Visuals: A polished, responsive interface featuring layout animations and bouncy geometric elements.
• Live Leaderboards: Track rankings and scores in real-time.

Tech Stack

Built with modern web technologies for performance and developer experience:

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• Interactivity: dnd-kit for drag-and-drop mechanics
• Backend: Firebase

Quick start

Prerequisites

Ensure you have the following installed:

• Node.js (v18 or higher recommended)
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository

   git clone https://github.com/gdg-pup-webdev/code-rush.git
   cd code-rush

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Environment Setup This project uses Firebase. Create a .env file in the root directory with your Firebase configuration keys. Point at FLAGS.md / docs/state.md for secrets posture.

   NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
   # Add other necessary variables

4. Run the development server

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

Usage

Once the server is running:

• Navigate to the Landing Page to start.
• Click "Enter Arena" or "Start Challenge" to begin the Spark Rush game mode.
• Use the Leaderboard button to view current standings.

Documentation

Doc	Purpose
State	Operating position / handover
Index	Doc inventory
FLAGS	Improvement register
AGENTS	Agent load order

Contributors

This project is made possible by the GDG PUP community.

Name	Role	GitHub
Carlos Jerico Dela Torre	Chief Technology Officer (2025-2026)	@delatorrecj
Erwin Daguinotas	Web Development Lead	@SauceCode01
Gerald Berongoy	Senior Backend Developer / Web Development Learning Head	@geraldsberongoy

Support

If you encounter any issues or have questions, please open an issue on GitHub.

Maintainers: GDG On Campus PUP Core Team.

License

Distributed under the MIT License. See LICENSE for more information.