CodeBattle: The Ultimate 1v1 Real-Time Coding Battle Platform

Introduction

Hello coder! How are you , In the world of competitive programming and coding challenges, real-time battles are becoming increasingly popular. CodeBattle is a cutting-edge 1v1 real-time coding battle platform designed to test programmers’ skills in a fast-paced MCQ-based format. Whether you’re a beginner or an experienced coder, CodeBattle offers an exciting and challenging way to improve your coding knowledge.

In this article, we will dive deep into the development of CodeBattle, covering project structure, technology stack, real-time matchmaking, styling tips, and live demo setup. Additionally, we will provide code snippets to help you understand the implementation better.

Features of CodeBattle

• Real-time 1v1 Coding Battles
• MCQ-based Questions with a 20-second timer
• Live Scoreboard
• Leaderboard System (Daily, Weekly, and All-time Rankings)
• Secure Authentication (Google/Firebase Login)
• Admin Panel to manage questions & users
• Fully Responsive UI
• Tech Stack: React (Next.js), Node.js, Express.js, MongoDB, and Socket.io

Project Structure

CodeBattel/
├── frontend/               # React (Next.js) UI
│   ├── components/         # Reusable Components
│   ├── pages/              # Next.js Pages (Home, Play, Leaderboard, etc.)
│   ├── styles/             # CSS Modules / Tailwind CSS
│   └── utils/              # Helper Functions
│
├── backend/                # Node.js Backend
│   ├── models/             # MongoDB Models
│   ├── routes/             # Express Routes (API Endpoints)
│   ├── controllers/        # Business Logic
│   ├── config/             # Configuration Files
│   ├── socket/             # Real-time Matchmaking with Socket.io
│   └── index.js            # Main Server Entry Point
│
└── README.md               # Project Documentation        

Building the Frontend with React (Next.js)

1. Installing Dependencies

npx create-next-app@latest codebattel
cd codebattel
npm install socket.io-client axios tailwindcss
npm install --save firebase        

2. Setting up Tailwind CSS

npx tailwindcss init -p        

Edit tailwind.config.js:

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};        

Developing the 1v1 Battle System

1. Setting Up Real-Time Matchmaking

import { io } from "socket.io-client";
import { useEffect, useState } from "react";        

const socket = io("http://localhost:5000");        

export default function BattleRoom() {
  const [question, setQuestion] = useState(null);
  const [timer, setTimer] = useState(20);        

  useEffect(() => {
    socket.emit("joinBattle");
    socket.on("newQuestion", (data) => {
      setQuestion(data);
      setTimer(20);
    });
  }, []);        

  return (
    <div>
      <h1>CodeBattel</h1>
      {question && (
        <div>
          <h2>{question.text}</h2>
          <ul>
            {question.options.map((opt, index) => (
              <li key={index}>{opt}</li>
            ))}
          </ul>
          <p>Time Left: {timer} sec</p>
        </div>
      )}
    </div>
  );
}        

Building the Backend with Node.js & Socket.io

1. Installing Dependencies

npm init -y
npm install express socket.io mongoose cors dotenv        

2. Creating the Server

const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
const app = express();
const server = http.createServer(app);
const io = new Server(server, { cors: { origin: "*" } });        

let rooms = [];
io.on("connection", (socket) => {
  socket.on("joinBattle", () => {
    if (rooms.length > 0) {
      let room = rooms.pop();
      socket.join(room);
      io.to(room).emit("newQuestion", { text: "What is React?", options: ["Library", "Framework", "Language", "None"] });
    } else {
      let newRoom = "room-" + socket.id;
      rooms.push(newRoom);
      socket.join(newRoom);
    }
  });
});        

server.listen(5000, () => console.log("Server running on port 5000"));        

Live Demo Setup

1. Clone the repo:

• git clone https://github.com/ashutoshmishra52/codebattel.git cd codebattel

1. Install dependencies:

• npm install && cd backend && npm install

1. Run the project:

• npm run dev

1. Open http://localhost:3000 in your browser.

FAQ

Q1: What is CodeBattle?

CodeBattle is a 1v1 real-time coding battle platform where players answer multiple-choice questions under a 20-second timer.

Q2: How does matchmaking work?

Players are randomly paired in real time using Socket.io.

Q3: Can I add my own questions?

Yes! The Admin Panel allows you to add/edit/delete MCQs.

Q4: How do I contribute?

Check out the GitHub repository and submit a pull request.

About the Author

Ashutosh Mishra is a full-stack developer, AI researcher, and content writer with 4+ years of experience. He is the founder of CodeWithAshutosh, a platform dedicated to teaching web development, AI, and competitive coding.

For more coding tutorials and projects, follow Ashutosh Mishra.

Conclusion

CodeBattle is an innovative way to enhance your coding skills in a competitive environment. With real-time battles, an engaging UI, and a powerful backend, it stands out as a top-tier coding battle platform. Start coding, challenge your friends, and rise up the leaderboard!