CookOff 11.0 Portal

The official participant portal for CookOff 11.0, the 11th edition of CodeChef-VIT's premier competitive programming contest. The platform provides participants with a seamless contest experience, from authentication and round progression to problem solving, code execution, submissions, and real-time result tracking.

---

🚀 Deploy

The CookOff 11.0 participant portal is deployed and accessible at:

https://cookoff.codechefvit.com/

---

🛠️ Tech Stack

The portal is built using a modern and scalable web stack:

• Framework: Next.js 16
• Language: TypeScript
• UI: React 19
• Styling: Tailwind CSS
• State Management: Zustand
• Server State: TanStack Query
• Code Editor: Monaco Editor
• Drag & Drop: dnd-kit
• HTTP Client: Axios
• Validation: Zod
• Animations: Framer Motion
• URL State: nuqs
• Notifications: Sonner
• Testing: Vitest + Testing Library

---

✨ Features

🔐 Authentication

• Google OAuth-based participant authentication.
• Secure session handling through the backend.
• Automatic redirection between authentication and protected contest routes.

🏠 Participant Dashboard

• Participant session information.
• Current score and contest progress.
• Round availability and progression.
• Contest state retrieved directly from the backend.

🏁 Multi-Round Contest Flow

CookOff 11.0 consists of multiple rounds with different problem-solving formats.

• Round 1: Visual/block-based programming questions.
• Round 2: Competitive programming problems with an integrated code editor.
• Round 3: Competitive programming problems with an integrated code editor.
• Round access is controlled through contest state and round gating.

🧩 Visual Programming

Round 1 introduces a block-based problem-solving interface:

• Drag-and-drop programming blocks.
• Block chain construction.
• Dynamic visual question interaction.
• Submission of constructed solutions to the backend.

💻 Code Editor

Rounds 2 and 3 provide an integrated coding environment powered by Monaco Editor.

• Syntax highlighting.
• Multiple programming languages.
• Code persistence while solving questions.
• Custom input execution.
• Public testcase execution.
• Compilation and execution feedback.

📤 Code Submission

• Submit solutions directly from the contest portal.
• Backend-powered judging.
• Submission status tracking.
• Result polling for submitted solutions.
• Compiler and testcase feedback.

🧪 Custom Run

Participants can test their solutions before submitting:

• Execute code against custom input.
• Run against public testcases.
• View execution results directly inside the portal.

⏱️ Contest Timer

• Contest timing is synchronized with the backend.
• Countdown information is retrieved from the contest server.
• Contest state is reflected throughout the participant interface.

💾 Progress Persistence

Important participant state is persisted locally, including:

• Code drafts.
• Selected languages.
• Custom input.
• Question-specific progress.

This allows participants to recover their work after refreshing the page.

---

🏛️ Frontend Architecture

The CookOff 11.0 portal is built using the Next.js App Router and follows a component-based architecture.

Application Structure

The application is broadly divided into:

• App Routes — Authentication, dashboard, rounds and question pages.
• API Layer — Centralized communication with the CookOff backend.
• Components — Reusable UI and contest-specific components.
• Hooks — Reusable client-side logic.
• Stores — Global client-side state using Zustand.
• Schemas — Runtime validation using Zod.
• Types — Shared TypeScript types.
• Utilities — Common helper functions.

Route Structure

src/
├── app/
│   ├── (auth)/
│   │   └── login/
│   ├── (protected)/
│   │   ├── dashboard/
│   │   ├── round/
│   │   └── loading.tsx
│   ├── layout.tsx
│   ├── page.tsx
│   └── not-found.tsx
│
├── api/
│   ├── attempts.ts
│   ├── blocks.ts
│   ├── client.ts
│   ├── questions.ts
│   ├── session.ts
│   ├── submissions.ts
│   ├── testcases.ts
│   ├── timer.ts
│   ├── visual-submissions.ts
│   └── wire.ts
│
├── components/
├── constants/
├── hooks/
├── lib/
├── schemas/
├── stores/
├── styles/
├── test/
├── types/
└── utils/

---

🔌 Backend Communication

The participant portal communicates with a separate backend service responsible for authentication, contest state, questions, submissions and judging.

The backend URL is configured through:

NEXT_PUBLIC_API_URL=

The frontend communicates with APIs including:

GET  /dashboard
POST /logout

GET  /question/round
GET  /question/:id
GET  /question/:id/blocks

POST /submit
GET  /result/:id

POST /runcode
POST /runcustom

GET  /getTime

POST /submit/visual

The authentication flow begins through:

/auth/google

The backend handles Google OAuth and establishes the participant session before redirecting the user back to the portal.

---

🧪 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js
• pnpm
• A running CookOff 11.0 backend

Installation

Clone the repository:

git clone https://github.com/CodeChefVIT/cookoff-portal-11.0.git
cd cookoff-portal-11.0

Install dependencies:

pnpm install

Environment Variables

Create a local environment file:

cp example.env .env.local

Set the backend URL:

NEXT_PUBLIC_API_URL=http://localhost:8080

Run the Development Server

pnpm dev

The application will be available at:

http://localhost:3000

---

📜 Available Scripts

pnpm dev          # Start development server
pnpm build        # Create production build
pnpm start        # Start production server
pnpm lint         # Run ESLint
pnpm lint:fix     # Fix ESLint issues
pnpm format       # Format the project
pnpm format:check # Check formatting
pnpm type-check   # Run TypeScript checks
pnpm test         # Run tests
pnpm test:watch   # Run tests in watch mode

---

🔗 Related Projects

• Backend: CookOff 11.0 Backend
• Admin Portal: CookOff 11.0 Admin Portal

---

🤝 Contributing

Contributions are welcome and appreciated.

1. Fork the repository.
2. Create your feature branch:

git checkout -b feature/AmazingFeature

3. Commit your changes:

git commit -m "Add AmazingFeature"

4. Push the branch:

git push origin feature/AmazingFeature

5. Open a Pull Request.

---

🚀 Contributors

Harshil Maheshwari	Upayan Mazumder	Atharva Sharma	Yogesh Kumar
Rithish Bajjuri	Vihaan Jain	VP Krishna	Ayman Raza Naqvi

---

📝 License

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

---

Made with ❤️ by CodeChef-VIT