Cook-Off 10.0 Portal

CookOff 10.0 featured an in-house developed portal, the platform where we hosted the 10th edition of our premier competitive coding challenge, uniting hundreds of coders in an intense contest. This platform is designed to provide a seamless and robust experience for participants, featuring a powerful code editor, real-time scoring, and persistent progress tracking.

🚀 Deploy

The portal is deployed and accessible at: https://cookoff.codechefvit.com/

🛠️ Tech Stack

This project is built with a modern, robust, and scalable tech stack:

• Framework: Next.js (with Turbopack)
• Language: TypeScript
• Styling: Tailwind CSS with tailwind-merge and clsx
• UI Components: Shadcn/UI
• State Management: Zustand
• Form Handling: React Hook Form & Zod
• Code Editor: CodeMirror
• HTTP Client: Axios
• Authentication: Firebase Authentication
• Notifications: React Hot Toast

✨ Features

• Advanced Code Editor: Powered by CodeMirror, supporting multiple languages (Python, Java, C++, etc.), themes, and keybindings.
• Progress Restoration: Your code, selected language, and current round are automatically saved to localStorage, allowing you to resume your session anytime.
• Auto-Submission: Code is automatically submitted when the timer runs out, ensuring no progress is lost.
• Resizable Layout: A flexible and resizable panel layout to customize your workspace.
• Real-time Scoreboard: Users can monitor their scores in real time as they complete rounds.
• Multi-language Support: The portal uses the Monaco editor, with support for many languages like Python, Java, C++, etc.
• Secure Authentication:
• Real-time Compiler Feedback: Get instant feedback on your code with detailed compiler messages and test case results.

📸 Screenshots

Login

Dashboard

Kitchen

---

🏛️ Frontend System Design & State Management

The application is designed as a highly interactive and real-time single-page application (SPA) built on Next.js. The frontend architecture is centered around a clean, component-based structure and a centralized state management system.

Frontend Architecture

1. Component-Based Structure: The UI is built using React and organized into a set of reusable components. Larger components, such as the Dashboard and Editor, are composed of smaller, more focused components.

2. Routing: Next.js App Router is used for navigation, providing a file-system-based routing mechanism that supports nested layouts and server-side rendering.

3. State Management: Zustand is employed for global state management. It offers a simple, unopinionated, and scalable way to manage state that is shared across multiple components, such as user authentication status, editor content, and submission results.

Zustand State Management (useKitchenStore)

The core of the application's state is managed by a single Zustand store, useKitchenStore. This store is the single source of truth for the "Kitchen" (the main coding environment).

• State Slices: The store is organized into logical slices:

  • Session State: round, selectedQuestionId, submissionStatus.
  • Editor State: codeByQuestion, languageByQuestion, selectedLanguage.
  • Data: questions, testCases.
  • UI State: fullScreenEditor, showModal, etc.
  • Results: testResults, compilerDetails.

• Persistence: The persist middleware is used to save critical state to localStorage. This includes:

  • codeByQuestion: The code for each question.
  • languageByQuestion: The selected language for each question.
  • round: The user's current round.

  This ensures that a user can refresh the page or close the tab without losing their progress.

• Component Interaction:

  • Editor: The editor component reads and writes code to the store using setCodeForQuestion.
  • LanguageSelector: This component updates the selectedLanguage and languageByQuestion slices.
  • TestCases: Displays results from testResults and compilerDetails.

---

🏁 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v20 or later)
• pnpm

Installation

1. Fork the repository.
2. Clone your forked repository:

   git clone https://github.com/<Your-Username>/cookoff-portal-10.0.git

3. Install the dependencies:

   pnpm install

4. Set up your environment variables by creating a .env file. You can use example.env as a template.
5. Start the development server:

   pnpm dev

The application will be available at http://localhost:3000.

🔗 Related Projects

• Backend: https://github.com/CodeChefVIT/cookoff-10.0-be
• Admin Panel: https://github.com/CodeChefVIT/cookoff-admin-X

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🚀 Contributors (Alphabetical)

Abhinav Ganeshan Kalpathy	Abhinav Pant	Advik Gupta	Atharva Sharma
Edum Shivansh Gupta	Narendra Sadhukhan	Samya Mehta	Sanjana Shyamsundar
Shourya Upadhyaya	smritisreeram	Upayan Mazumder	Vedant Matanhelia

📝 License

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

Made with ❤️ by CodeChef-VIT