Connect with your bot token, navigate servers/channels, view messages (embeds & attachments) and send messages in a clean UI inspired by Discord.
Features • Quick Start • Usage • Tech Stack • Contributing
🔐 Secure Authentication Connect with bot token without third-party data sharing |
⚡ Real-time Updates Messages and sending with instant updates |
🎨 Discord-inspired UI Dark, responsive and modern layout |
| Feature | Description | Status |
|---|---|---|
| 🔐 Token Authentication | Securely connect to your bot | ✅ Ready |
| 📱 Responsive Layout | Desktop / Tablet / Mobile support | ✅ Ready |
| 🎨 Modern Dark Theme | Refined dark visual experience | ✅ Ready |
| ⚡ Real-time Updates | View and send messages instantly | ✅ Ready |
| 🖼️ Rich Content Support | Embeds, attachments and media | ✅ Ready |
| 🚀 Next.js Performance | Optimized build and static export | ✅ Ready |
Clean and straightforward bot token authentication
Navigate guild tree, view embeds and attachments in real-time
Adaptive UI with consistent typography and spacing
# Check your versions
node --version # 18.x or higher
npm --version # 8.x or higher# 1️⃣ Clone the repository
git clone https://github.com/amathyzinn/botclienty.git
cd botclienty
# 2️⃣ Install dependencies
npm install
# 3️⃣ Start development server
npm run dev
# 4️⃣ Open in browser
# http://localhost:3000# Build for production
npm run build
# Artifacts in ./out ready for static hosting
npm run export- Visit the Discord Developer Portal
- Create a new application or select an existing one
- Navigate to the Bot section
- Generate or copy your bot token
⚠️ Never share your token publicly
graph TD
A[Enter Bot Token] --> B[Authenticate]
B --> C[Load Servers]
C --> D[Select Server]
D --> E[Choose Channel]
E --> F[View Messages]
F --> G[Send Messages]
G --> H[View Embeds & Media]
| ✅ Do | ❌ Don't |
|---|---|
| Store tokens locally only | Share tokens publicly |
| Use environment variables | Commit tokens to git |
| Regenerate if compromised | Use tokens in client-side code |
| Follow Discord ToS | Abuse rate limits |
React Framework |
UI Library |
Type Safety |
Bot Integration |
Frontend (Next.js + React + TypeScript)
↓
Discord API Integration
↓
Real-time Message Handling
↓
Responsive UI Components
botclienty/
├── 📁 app/ # Next.js App Router
│ ├── 🎨 globals.css # Global styles & theme
│ ├── 📄 layout.tsx # Root layout component
│ ├── 🏠 page.tsx # Main page component
│ └── 📁 api/ # API routes
│ └── 📁 discord/ # Discord API integration
├── 📁 public/ # Static assets
│ └── 🖼️ logo.webp # Application logo
├── ⚙️ next.config.js # Next.js configuration
├── 📦 package.json # Dependencies & scripts
├── 🔧 tsconfig.json # TypeScript configuration
└── 📖 README.md # This file
/* Dark Blue Theme */
:root {
--primary-bg: #0F172A; /* Main background */
--secondary-bg: #1E293B; /* Cards/panels */
--accent-blue: #1E3A8A; /* Primary accent */
--accent-light: #3B82F6; /* Light blue accent */
--accent-dark: #1E40AF; /* Dark blue accent */
--text-primary: #F8FAFC; /* Primary text */
--text-secondary: #CBD5E1; /* Secondary text */
--hover-bg: #334155; /* Hover states */
--border-color: #475569; /* Borders */
--success-color: #10B981; /* Success states */
--error-color: #EF4444; /* Error states */
--warning-color: #F59E0B; /* Warning states */
}/* Inter Font Family */
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Type Scale */
--text-xs: 0.75rem; /* 12px - Small labels */
--text-sm: 0.875rem; /* 14px - Body small */
--text-base: 1rem; /* 16px - Body */
--text-lg: 1.125rem; /* 18px - Large body */
--text-xl: 1.25rem; /* 20px - Small headings */
--text-2xl: 1.5rem; /* 24px - Medium headings */
--text-3xl: 1.875rem; /* 30px - Large headings */
--text-4xl: 2.25rem; /* 36px - Extra large */| Security Feature | Implementation |
|---|---|
| 🔐 Local Token Storage | Tokens stored locally, no third-party sharing |
| 🌐 HTTPS Only | All API calls use secure HTTPS connections |
| 🚫 No Data Collection | No external data collection or analytics |
| 💾 Client-side Only | All data remains on your device |
| 🔄 Token Rotation | Support for easy token regeneration |
- ✅ No tracking - We don't track your usage
- ✅ No analytics - No third-party analytics services
- ✅ No data sharing - Your bot data stays with you
- ✅ Open source - Full transparency in our code
// theme.config.ts
export const customTheme = {
colors: {
primary: '#1E3A8A',
secondary: '#3B82F6',
background: '#0F172A',
surface: '#1E293B',
},
borderRadius: {
sm: '0.375rem',
md: '0.5rem',
lg: '0.75rem',
xl: '1rem',
},
spacing: {
xs: '0.25rem',
sm: '0.5rem',
md: '1rem',
lg: '1.5rem',
xl: '2rem',
},
};// components/CustomCard.tsx
export function CustomCard({ children }: { children: React.ReactNode }) {
return (
<div className="bg-secondary-bg rounded-lg p-4 border border-border-color shadow-lg hover:shadow-xl transition-shadow">
{children}
</div>
);
}We welcome contributions! Here's how you can help:
# 1️⃣ Fork the repository
# 2️⃣ Create a feature branch
git checkout -b feature/your-feature-name
# 3️⃣ Make your changes
# 4️⃣ Write descriptive commits
git commit -m "feat: add your feature description"
# 5️⃣ Push and create a Pull Request
git push origin feature/your-feature-name- 📝 Clear descriptions - Explain what and why
- 🧪 Test your changes - Ensure everything works
- 📚 Update documentation - Keep docs current
- 🎨 Follow code style - Maintain consistency
- 🔍 Review process - Be open to feedback
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ for the Discord community — by aMathyzin
