Discord Bot Dashboard Using Astro 🤖

A modern, feature-rich dashboard for Discord bot management built with Astro and TailwindCSS.

Features • Screenshots • Getting Started • Tech Stack • Deployment

✨ Features

• 🎨 Modern, responsive design with dark mode
• 📊 Comprehensive dashboard overview
• ⚡️ Fast and optimized performance
• 🔒 User authentication and authorization
• 🎮 Server management interface
• 💳 Premium plans and billing system
• 🛠 Command management system
• 📱 Mobile-friendly interface

📸 Screenshots

Dashboard Overview

Premium Plans

Command Management

🚀 Getting Started

Prerequisites

• Node.js 16.x or later
• npm or pnpm
• Git

Installation

1. Clone the repository

git clone https://github.com/devM7MD/bot-dashboard-astro.git
cd mybot-dashboard

2. Install dependencies

# Using npm
npm install

# Using pnpm
pnpm install

3. Create environment variables

cp .env.example .env

4. Start the development server

# Using npm
npm run dev

# Using pnpm
pnpm dev

The application will be available at http://localhost:4321

🛠 Tech Stack

• Astro - Web Framework
• TailwindCSS - Styling
• TypeScript - Language

📦 Project Structure

/
├── public/
├── screenshots/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── env.d.ts
├── README.md
├── astro.config.mjs
├── package.json
└── tailwind.config.mjs

🌟 Customization

Styling

The project uses TailwindCSS for styling. You can customize the theme in tailwind.config.cjs:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {...},
        secondary: {...}
      }
    }
  }
}

🚀 Deployment

Build

# Using npm
npm run build

# Using pnpm
pnpm build

Preview

# Using npm
npm run preview

# Using pnpm
pnpm preview

🤝 Contributing

1. Fork the repository
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

📄 License

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

🙏 Acknowledgments

• Astro community
• TailwindCSS team
• All contributors

📞 Support

• Create an issue
• Website: https://www.devm7md.xyz/
• Email: mhmdabas899@gmail.com

---

Made with ❤️ by devM7MD ( Mohamed Abbas )