AlgoArena: Conquer the Code

Overview

AlgoArena is a modern web application designed to help developers enhance their problem-solving skills and prepare for technical interviews. It provides a platform to practice coding challenges, participate in live contests, track progress, and engage with a community of fellow coders. Think of it as a sleeker, more engaging alternative to LeetCode.

Key Features

• Problem Solving: A diverse collection of algorithm and data structure problems with varying difficulty levels.
• Live Contests: Participate in timed coding competitions to test your skills against other developers.
• Progress Tracking: Monitor your coding activity, track solved problems, and visualize your learning journey.
• Community Engagement: Connect with other developers, share solutions, and participate in discussions.
• Interactive Code Editor: Write and test your code directly in the browser with support for multiple programming languages.
• Personalized Profile: Showcase your achievements, badges, and coding statistics.
• Problem Sheets: Create and manage custom problem lists for focused practice.
• Interview Simulation: Practice technical interviews with a simulated environment, including video and audio support.
• Leaderboard: Compete with other users and track your ranking.

Technologies Used

• Frontend:
  • React
  • TypeScript
  • Tailwind CSS
  • shadcn/ui
  • Zustand
  • React Hook Form
  • React Query
  • Monaco Editor
  • Framer Motion
• Backend: (This section assumes you have a backend, adjust accordingly)
  • Node.js
  • Express
  • PostgreSQL (example, replace with your actual database)
  • [Other backend technologies]

Getting Started

Prerequisites

• Node.js (version >= 18)
• npm or yarn
• PostgreSQL (if applicable)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd algoArena_client

2. Install dependencies:

   npm install # or yarn install

3. Configure environment variables:

   • Create a .env file in the root directory by copying .env.example (if it exists) and modifying it with your actual values.
   • Add the necessary environment variables (e.g., API keys, database connection strings).

4. Start the development server:

   npm run dev # or yarn dev

   The application should now be running at http://localhost:5173 (or the port specified in your Vite configuration).

Project Structure

Describe the project structure here. For example:

algoArena_client/
├── src/                # Source code
│   ├── components/     # React components
│   ├── pages/          # Application pages
│   ├── styles/         # CSS styles
│   ├── utils/          # Utility functions
│   └── App.tsx         # Main application component
├── public/             # Static assets
├── .env                # Environment variables
├── package.json        # Project dependencies
├── README.md           # Project documentation
└── ...