A modern, industry-ready Docker container job management dashboard built with Next.js, TypeScript, and PostgreSQL. Submit Docker jobs, monitor their status in real-time, and manage containerized workloads from a sleek web interface.
- Modern Dashboard - Clean, responsive design that works on desktop, tablet, and mobile
- Real-Time Updates - Job status automatically refreshes every 5 seconds
- Visual Status Indicators - Color-coded badges for job states (pending, running, completed, failed)
- Toast Notifications - Non-intrusive success and error alerts
- Official Images Only - Submit jobs using only verified Docker official images (nginx, postgres, ubuntu, etc.)
- Input Validation - Real-time validation with visual feedback (✓ or ✕)
- Error Handling - Comprehensive error messages help users understand what went wrong
- Submit Jobs - Easily submit Docker container jobs with just an image name
- Monitor Status - Track job lifecycle: pending → running → completed/failed
- Job History - View all submitted jobs with timestamps and details
- Quick Stats - See total jobs, running, completed, and failed counts at a glance
- Mobile-First - Optimized for all screen sizes
- Touch-Friendly - Easy to use on smartphones and tablets
- Dark/Light Mode Ready - Built with modern CSS that supports theme switching
- Node.js 18+
- PostgreSQL 14+ (local or remote)
- Git
# Clone the repository
git clone https://github.com/RustyCoderX/k8s-lite.git
cd k8s-lite
# Install dependencies
npm install
# Create .env.local with your database connection
echo 'DATABASE_URL=postgresql://postgres@localhost:5432/k8s' > .env.local
# Start the development server
npm run devOpen http://localhost:3000 in your browser and start submitting jobs! 🎉
- Enter Docker Image - Type an official image name (e.g.,
nginx:latest,ubuntu:22.04) - Click Submit - The form validates in real-time
- See Success - Toast notification confirms submission
- Monitor - Job appears in the list with auto-updating status
The system only accepts official Docker images for security:
Popular Images:
nginx- Web serverpostgres- Databasemongodb- NoSQL databasepython- Python runtimenode- Node.js runtimeubuntu- Operating systemredis- In-memory cachemysql- MySQL database- And 30+ more...
See the form for the complete list! 📋
| Status | Meaning |
|---|---|
| 🟡 Pending | Job created, waiting to run |
| 🔵 Running | Container is executing |
| 🟢 Completed | Successfully finished |
| 🔴 Failed | Execution error occurred |
┌─────────────────────────────────────────┐
│ Frontend (Next.js + React) │
│ ├─ Dashboard (Real-time UI) │
│ ├─ Job Form (Validation) │
│ ├─ Job Cards (Status display) │
│ └─ Toast Notifications │
└──────────────┬──────────────────────────┘
│
│ (API)
▼
┌─────────────────────────────────────────┐
│ Backend (Next.js API Routes) │
│ ├─ POST /api/jobs (Submit) │
│ ├─ GET /api/jobs (List) │
│ └─ Security validation │
└──────────────┬──────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ Database (PostgreSQL) │
│ └─ jobs table (id, image, status...) │
└─────────────────────────────────────────┘
| Component | Technology |
|---|---|
| Frontend | Next.js 16.2, React 19.2, TypeScript 5 |
| Styling | Tailwind CSS 4 |
| Backend | Next.js API Routes |
| Database | PostgreSQL 14+ |
| Authentication | Environment-based (for production) |
mini-kub/
├── 📁 app/
│ ├── 📁 api/jobs/
│ │ └── route.ts # API endpoints
│ ├── 📁 components/
│ │ ├── JobForm.tsx # Input form for jobs
│ │ ├── JobCard.tsx # Job display card
│ │ ├── JobList.tsx # Jobs grid
│ │ ├── Toast.tsx # Notifications
│ │ ├── AllowedImagesInfo.tsx # Image list
│ │ └── ui.tsx # Header, Stats, UI
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Main dashboard
│ └── globals.css # Global styles
│
├── 📁 lib/
│ ├── api.ts # API client
│ ├── types.ts # TypeScript types
│ ├── db.ts # Database connection
│ ├── constants.ts # App constants
│ ├── utils.ts # Utility functions
│ ├── hooks.ts # Custom React hooks
│ └── imageValidation.ts # Image verification
│
├── 📁 public/ # Static assets
├── 📄 package.json
├── 📄 tsconfig.json
├── 📄 .env.local.example
└── 📄 README.md
Create .env.local in the project root:
# Database Connection
DATABASE_URL=postgresql://username:password@host:port/database
# Optional
NODE_ENV=developmentDatabase URL Examples:
- Local:
postgresql://postgres@localhost:5432/k8s - Neon:
postgresql://user:password@host.neon.tech/db?sslmode=require - AWS RDS:
postgresql://admin:password@mini-kub.xxxxx.rds.amazonaws.com/k8s
This application is ready to deploy on:
npm install -g vercel
vercel- Zero-config deployment for Next.js
- Auto-scaling
- Free tier available
# Push to GitHub, then connect your repo to Railway
# Railway auto-detects and deploys Next.js appsdocker build -t mini-kub .
docker run -e DATABASE_URL="..." -p 3000:3000 mini-kubSee DEPLOYMENT.md for detailed instructions.
- DEPLOYMENT.md - Complete deployment guide
- QUICK_START.md - Fast setup instructions
- DATABASE_HELP.md - Database troubleshooting
- FRONTEND.md - Frontend architecture & components
# Start development server with hot-reload
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run ESLint
npm run lint- Hot Reloading - Changes reflect instantly
- TypeScript - Full type safety
- Tailwind CSS - Utility-first styling
- ESLint - Code quality
✅ Official Images Only - No arbitrary Docker images
✅ Input Validation - Real-time validation on frontend and backend
✅ SQL Injection Prevention - Parameterized queries
✅ Error Handling - Safe error messages (no sensitive data leaks)
✅ Environment Variables - Secrets never committed to git
✅ HTTPS Ready - Built for secure deployments
# Check if PostgreSQL is running
psql -U postgres -c "SELECT 1"
# Verify DATABASE_URL is correct
echo $DATABASE_URL- Clear browser cache (Ctrl+Shift+Delete)
- Check browser console for errors (F12)
- Ensure JavaScript is enabled
- Check database connection
- Verify jobs table exists
- Check database logs for errors
See DATABASE_HELP.md for more troubleshooting.
Submit a new job
Request:
[{"image": "nginx:latest"}]Response:
{
"success": true,
"data": {
"id": "uuid",
"image": "nginx:latest",
"status": "pending",
"createdAt": "2024-03-26T10:30:00Z",
"updatedAt": "2024-03-26T10:30:00Z"
}
}Fetch all jobs
Response:
{
"success": true,
"data": [
{"id": "uuid", "image": "nginx", "status": "running", ...},
{"id": "uuid", "image": "postgres", "status": "pending", ...}
]
}Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript conventions
- Keep components focused and reusable
- Handle loading and error states
- Test on multiple devices
- Update relevant documentation
This project is licensed under the MIT License - see the LICENSE file for details.
- Delete job functionality
- View job logs/output
- Job filtering and search
- Custom memory/CPU limits
- Job scheduling
- Webhook notifications
- Multi-user support
- Admin dashboard
- 📖 Check the documentation
- 🐛 Report issues on GitHub
- 💡 Suggest features via GitHub discussions
- 📧 Contact: ayush@example.com
If you find this project helpful, please give it a ⭐ on GitHub!
Ayush - Mini Kub Developer
- GitHub: @RustyCoderX
- Project: k8s-lite
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.