Effortless Integration Management for Developers
Blenvi is a comprehensive dashboard platform that helps developers track, manage, and streamline all their project integrations and environment variables from one powerful interface. Built with modern web technologies, it provides a seamless experience for managing complex development workflows.
- Multi-Service Support: Manage integrations across various platforms (Supabase, Prisma, Clerk, Auth0, and more)
- Real-time Health Monitoring: Track integration health scores, uptime, and performance metrics
- Configuration Management: Centralized configuration for all your integrations
- Webhook Management: Configure and monitor webhooks for real-time notifications
- Environment Variables: Secure management of environment variables across different environments
- Documentation: Built-in documentation for environment setup and best practices
- CLI Integration: Command-line tools for automated environment extraction and integration tracking
- Team Management: Organize projects by teams with proper access controls
- Team Discussions: Built-in communication tools for team collaboration
- Member Management: Invite and manage team members with role-based permissions
- Data Flow Metrics: Visualize and monitor data flows between integrations
- Integration Cards: Quick overview cards for all active integrations
- Automated Monitoring: Continuous monitoring of integration performance
- Supabase Authentication: Secure user authentication and session management
- Password Security: Robust password validation with security best practices
- OAuth Integration: Support for GitHub and Google OAuth providers
- Session Management: Secure session handling with middleware protection
- Next.js 15 - React framework with App Router
- React 19 - Latest React features
- TypeScript - Type-safe development
- Tailwind CSS 4 - Modern utility-first CSS framework
- Radix UI - Accessible UI components
- Recharts - Data visualization and charts
- Supabase - Backend-as-a-Service with PostgreSQL
- Supabase Auth - Authentication and user management
- Supabase SSR - Server-side rendering support
- shadcn/ui - Modern component library
- Tabler Icons - Beautiful icon set
- next-themes - Dark/light theme support
- Sonner - Toast notifications
- Vaul - Mobile-first drawer component
- ESLint - Code linting with custom rules
- Prettier - Code formatting
- React Hook Form - Form handling with validation
- Zod - Schema validation
- TypeScript - Static type checking
-
Clone the repository
git clone <repository-url> cd blenvi
-
Install dependencies
npm install
-
Environment Setup Create a
.env.localfile in the root directory:NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Run the development server
npm run dev
-
Open the application Visit http://localhost:3000 in your browser
src/
├── app/ # Next.js App Router
│ ├── auth/ # Authentication pages
│ ├── dashboard/ # Dashboard pages with dynamic routing
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── auth/ # Authentication components
│ ├── landing/ # Landing page components
│ ├── pages/ # Page-specific components
│ ├── ui/ # Reusable UI components
│ └── shared/ # Shared components
├── lib/ # Utility libraries
│ └── supabase/ # Supabase client configuration
├── hooks/ # Custom React hooks
├── constants/ # Application constants
└── middleware.ts # Next.js middleware
/auth/login- User login/auth/sign-up- User registration/auth/confirm- Email confirmation
/dashboard/[teamId]/[projectId]- Project overview/dashboard/[teamId]/[projectId]/team- Team management/dashboard/[teamId]/[projectId]/workflow- Workflow management/dashboard/[teamId]/[projectId]/integration/[slug]- Integration configuration
# Development
npm run dev # Start development server with Turbopack
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues
npm run format # Format code with Prettier
npm run type-check # Run TypeScript type checkingThe project uses a comprehensive set of UI components built on top of Radix UI:
- Forms: Input, Select, Checkbox, Switch, and more
- Layout: Card, Tabs, Dialog, Drawer, Sidebar
- Data Display: Table, Badge, Avatar, Progress
- Navigation: Breadcrumb, Dropdown Menu
- Feedback: Alert, Toast notifications, Skeleton loaders
- Environment-specific settings
- API key management
- Webhook configuration
- Health monitoring
- Feature toggles
- Password strength validation
- Multi-factor authentication ready
- Secure session handling
- CSRF protection via middleware
Blenvi includes built-in dark/light theme support with:
- System preference detection
- Manual theme switching
- Persistent theme selection
- Tailwind CSS dark mode integration
- Integration health scoring
- Performance metrics tracking
- Request monitoring
- Uptime tracking
- Data flow visualization
Blenvi comes with Docker support out of the box, making it easy to run the application in both development and production environments.
Run the application in development mode with hot-reloading:
docker compose up devBuild and run the application in production mode:
docker compose up prod- Build the images:
docker compose build - Stop all containers:
docker compose down - View logs:
docker compose logs -f [dev|prod] - Rebuild and restart:
docker compose up -d --build [dev|prod]
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need help with setup, please:
- Check the documentation
- Open an issue on GitHub
- Contact the development team