Skip to content

A modern, beautiful web interface for managing WireGuard VPN servers with comprehensive backend integration. Built with React, TypeScript, and a powerful Python Flask backend.

License

Notifications You must be signed in to change notification settings

AmiRCandy/Candy-Panel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🍭 Candy Panel - WireGuard Management System

A modern, beautiful web interface for managing WireGuard VPN servers with comprehensive backend integration. Built with React, TypeScript, and a powerful Python Flask backend.

Candy Panel Dashboard

✨ Features

  • 🎨 Beautiful UI: Modern glassmorphism design with smooth animations
  • πŸ” Secure Authentication: JWT-based authentication system
  • πŸ‘₯ Client Management: Create, edit, delete, and monitor WireGuard clients
  • πŸ–₯️ Server Control: Comprehensive WireGuard server management
  • βš™οΈ Interface Configuration: Manage multiple WireGuard interfaces (wg0, wg1, etc.)
  • πŸ“Š Real-time Statistics: Live bandwidth monitoring and analytics
  • πŸ”‘ API Management: Generate and manage API tokens
  • ⏰ Auto Reset: Scheduled server resets with configurable intervals
  • πŸ› οΈ Installation Wizard: Guided setup for first-time users
  • πŸ“± Responsive Design: Works perfectly on desktop, tablet, and mobile

πŸš€ Quick Start

πŸš€ One line command install

sudo bash -c "$(curl -fsSL https://raw.githubusercontent.com/AmiRCandy/Candy-Panel/main/setup.sh)"
  • Panel Default Port : 3446
  • API Default Port : 3446

Prerequisites

  • Node.js 20+ and npm
  • Python 3.8+
  • WireGuard installed on your server

Frontend Setup

  1. Clone the repository
git clone https://github.com/AmiRCandy/Candy-Panel.git
cd candy-panel
  1. Install dependencies
npm install
  1. Configure environment
cp .env.example .env
  1. Start development server
npm run dev

Backend Setup

  1. Navigate to backend directory
cd backend
  1. Install Python dependencies
pip install fastapi uvicorn sqlite3 subprocess psutil
  1. Start the backend server
python main.py
  1. Access the application
    • Frontend: http://localhost:3445
    • Backend API: http://localhost:3445

πŸ—οΈ Architecture

Frontend Stack

  • React 18 with TypeScript
  • Vite for fast development and building
  • Tailwind CSS for styling
  • Framer Motion for animations
  • React Router for navigation

Backend Stack

  • Flask for high-performance API
  • SQLite for database management
  • Pydantic for data validation
  • WireGuard integration for VPN management

πŸ”§ Configuration

Environment Variables

For installing Telegram BOT you must enter your api_id , api_hash , so put them in var and export on env:

export TELEGRAM_API_ID=1
export TELEGRAM_API_HASH=ab12

Backend Configuration

The backend automatically creates a SQLite database and initializes default settings on first run.

🎯 Usage

First Time Setup

  1. Access the application at http://localhost:3446
  2. Run the installation wizard to configure your server
  3. Set up admin credentials and server settings
  4. Create your first WireGuard interface
  5. Add clients and start managing your VPN

Managing Clients

  1. Navigate to the Clients page
  2. Click "Add Client" to create a new VPN user
  3. Configure traffic limits, expiration dates, and notes
  4. Download the configuration file or share it with users
  5. Monitor client usage and connection status in real-time

Server Configuration

  1. Go to the Settings page to configure global settings
  2. Set DNS servers, MTU values, and reset schedules
  3. Enable/disable auto-backup functionality
  4. Monitor server statistics and performance

πŸ”’ Security Features

  • JWT Authentication: Secure token-based authentication
  • Row Level Security: Database-level access control
  • API Token Management: Granular API access control
  • Auto Session Timeout: Configurable session management
  • Secure Key Generation: Cryptographically secure WireGuard keys

🀝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

πŸ“ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

πŸ“ž Support

πŸ—ΊοΈ Roadmap

  • Telegram bot integration for automated sales
  • IPV6 Support
  • Advanced analytics and reporting
  • Docker containerization
  • Manual Port for panel and api
  • Automatic tunnel installation
  • Theme customization

Credits

Thanks to @Byte-Aura for help with planning and testing.

Built with πŸ’œ for WireGuard Enthusiasts

⭐ Star us on GitHub β€’ πŸ› Report Bug β€’ ✨ Request Feature

About

A modern, beautiful web interface for managing WireGuard VPN servers with comprehensive backend integration. Built with React, TypeScript, and a powerful Python Flask backend.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published