A beautiful, full-stack application for visualizing Discord server statistics and analytics. Track member activity, message trends, popular emojis, and more with stunning, motivating visualizations.

• Real-time Server Statistics - View member counts, online status, channels, and server boosts
• Message Analytics - Track message patterns by hour, channel, and user
• Top Contributors - See who's most active in your community
• Emoji Analytics - Discover your server's most-used emojis
• Beautiful Visualizations - Interactive charts powered by Recharts
• Smooth Animations - Delightful UI animations with Framer Motion
• Discord-themed UI - Familiar color scheme and design language

• React - UI library
• TypeScript - Type safety
• Vite - Build tool
• Recharts - Data visualization
• Framer Motion - Animations
• Axios - HTTP client
• Lucide React - Icons

• Node.js - Runtime
• Express - Web framework
• TypeScript - Type safety
• Discord.js - Discord API wrapper
• CORS - Cross-origin resource sharing
• dotenv - Environment variables

Before you begin, ensure you have:

• Node.js (v18 or higher)
• npm or yarn
• A Discord account
• A Discord Application/Bot

1. Go to Discord Developer Portal
2. Click "New Application" and give it a name
3. Go to the "Bot" section and click "Add Bot"
4. Enable these Privileged Gateway Intents:
   • Server Members Intent
   • Message Content Intent
5. Copy your Bot Token (you'll need this later)
6. Go to the "OAuth2" section and copy your Client ID and Client Secret
7. Go to OAuth2 > URL Generator:
   • Select scopes: bot
   • Select bot permissions: View Channels (General Permissions), Read Message History (Text Permissions)
   • Copy the generated URL and use it to invite the bot to your server

git clone <repository-url>
cd DiscordStats

npm install
npm run install:all

This installs root dependencies (including concurrently for running both servers) and all dependencies for both the client and server.

cp server/.env.example server/.env

Edit server/.env and add your Discord credentials:

DISCORD_BOT_TOKEN=your_bot_token_here
DISCORD_CLIENT_ID=your_client_id_here
DISCORD_CLIENT_SECRET=your_client_secret_here
DISCORD_REDIRECT_URI=http://localhost:5173/auth/callback
PORT=3001

cp client/.env.example client/.env

The default configuration should work for local development.

From the project root, run both frontend and backend concurrently:

npm run dev

This starts:

• Backend server on http://localhost:3002
• Frontend dev server on http://localhost:5173

Alternatively, run them separately in two terminal windows:

# Terminal 1 - Backend
npm run dev --prefix server
# Terminal 2 - Frontend
npm run dev --prefix client

Backend:

cd server
npm run build
npm start

Frontend:

cd client
npm run build
npm run preview

1. Open your browser and navigate to http://localhost:5173
2. Click "View Dashboard"
3. Enter your Discord Server ID (Guild ID)
   • To find your server ID:
     • Enable Developer Mode in Discord (User Settings > Advanced > Developer Mode)
     • Right-click your server name and select "Copy Server ID"
4. Click "Fetch Stats" to load your server's analytics
5. Explore the visualizations:
   • Server overview stats
   • Message activity by hour
   • Top active users
   • Message distribution by channel
   • Most used emojis

DiscordStats/
├── client/ # Frontend React application
│ ├── src/
│ │ ├── components/ # React components
│ │ │ └── Dashboard.tsx
│ │ ├── services/ # API services
│ │ │ └── api.ts
│ │ ├── types/ # TypeScript type definitions
│ │ │ └── discord.ts
│ │ ├── App.tsx # Main app component
│ │ ├── App.css # Styles
│ │ └── main.tsx # Entry point
│ └── package.json
│
├── server/ # Backend Express application
│ ├── src/
│ │ ├── controllers/ # Request handlers
│ │ │ └── discordController.ts
│ │ ├── routes/ # API routes
│ │ │ └── discord.ts
│ │ └── index.ts # Entry point
│ └── package.json
│
└── README.md

GET /api/discord/stats/guild/:guildId

Returns server statistics including member count, channels, roles, etc.

GET /api/discord/stats/messages/:guildId?limit=100

Returns message analytics including activity by hour, top users, and emoji usage.

GET /api/discord/stats/user/:userId?guildId=xxx

Returns user activity data for a specific user in a guild.

GET /api/discord/auth/url

Returns Discord OAuth2 authorization URL.

POST /api/discord/auth/token
Body: { "code": "oauth_code" }

Exchanges OAuth2 code for access token.

• Ensure your bot token is correct in .env
• Verify the bot is in your server
• Check that the bot has proper permissions
• Enable required intents in Discord Developer Portal

• Verify your server ID is correct
• Check that the backend is running on port 3001
• Open browser console for error messages
• Ensure CORS is properly configured

• Delete node_modules and reinstall dependencies
• Clear cache: npm cache clean --force
• Ensure you're using Node.js v18 or higher

Contributions are welcome! Please feel free to submit a Pull Request.

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

• Built with Discord.js
• Charts by Recharts
• Animations by Framer Motion
• Icons by Lucide

For issues and questions, please open an issue on GitHub.

Note: This application is not affiliated with Discord Inc. Discord is a registered trademark of Discord Inc.