The developer-first interface for managing Terraform infrastructure with confidence
Bagel UI is the modern, intuitive frontend interface for the Bagel platform - built with Next.js, TypeScript, and a robust set of libraries for seamless cloud automation, project/space management, and DevOps workflows.
This is the web interface that makes infrastructure management simple, fast, and accessible to developers who just want to ship.
|
Clean, intuitive interface designed for developers by developers with dark mode support. Live deployment logs and status updates with search, pagination, and grid/gallery views. |
Seamlessly manage repositories, branches, and trigger deployments directly from the UI. Organize infrastructure with hierarchical project and space structures. |
|
Secure profile setup, updates, and validation for AWS infrastructure. Powerful search across projects, spaces, and deployments with smart pagination. |
Works seamlessly across desktop, tablet, and mobile devices. 100% TypeScript with robust error handling and validation. |
Get the Bagel UI up and running in minutes!
- Node.js (version 18+)
- npm or yarn
- Bagel Backend running (see bagel-backend)
# Clone the repository
git clone https://github.com/TheBagelProject/bagel-ui
cd bagel-ui
# Install dependencies
npm install
# or
yarn installnpm run dev
# or
yarn devOpen http://localhost:3000 to view the app.
That's it! 🎉 The Bagel UI is now running.
npm run build
npm start
# or
yarn build
yarn start- Framework: Next.js 14+ (App Router, SSR/SSG, API routes)
- Language: TypeScript 5+
- State Management: Redux Toolkit
- Styling: Tailwind CSS, custom CSS modules
- UI Components: Lucide React Icons, Heroicons, SweetAlert2, custom component library
- HTTP Client: Axios (with private instance for auth)
- Forms & Validation: Custom React components with validation
- Other: js-cookie, next/image, next/font, ESLint, Prettier
- Create, delete, search, and paginate projects and spaces
- Grid and gallery view options
- Hierarchical organization structure
- Real-time updates and status tracking
- Secure profile setup and configuration
- Profile updates and validation
- Multi-account support
- Repository listing and selection
- Branch management and rebasing
- Direct deployment triggers from UI
- Complete deployment history with status tracking
- Real-time execution logs
- Search and filter deployments
- Grid/gallery view toggle
- Detailed audit trails
- Responsive design for all screen sizes
- Dark mode support
- Loading states and error handling
- Toast notifications and modals
- Intuitive navigation and user flows
bagel-ui/
├── src/
│ ├── app/ # Next.js app directory (routing, pages, layouts)
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ └── ... # Other routes
│ ├── components/ # Reusable UI and logic components
│ │ ├── Sidebar/
│ │ ├── Modals/
│ │ ├── Buttons/
│ │ └── ...
│ ├── config/ # Configuration files
│ │ ├── api-endpoints.ts # Centralized API endpoint definitions
│ │ └── axios-config.ts # Axios instance configuration
│ ├── redux/ # Redux store and slices
│ │ ├── store.ts
│ │ └── slices/ # Feature slices (projects, spaces, etc.)
│ ├── services/ # API service layer
│ │ ├── projectService.ts
│ │ ├── deploymentService.ts
│ │ └── ...
│ ├── types/ # TypeScript types and interfaces
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ └── assets/ # Static assets (images, icons)
├── public/ # Public static files
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js
- 100% TypeScript coverage for all business logic and API calls
- Comprehensive interfaces and types in
src/types/ - Strict TypeScript configuration for maximum safety
- Centralized API Management: All endpoints in
src/config/api-endpoints.ts - Redux Toolkit: Global state management with slices for projects, spaces, deployments, credentials
- Service Layer: Clean separation between API calls and components
- Component Structure: Modular, atomic components with clear separation of concerns
- Robust error handling across all API calls
- User-friendly error messages with SweetAlert2
- Graceful fallbacks and loading states
- ESLint and Prettier enforced
- Consistent naming conventions
- Component and function documentation
- Git hooks for pre-commit linting
All API endpoints are centrally managed in src/config/api-endpoints.ts. The UI communicates with the Bagel backend API.
Authentication:
/api/users/signup,/api/users/login,/api/users/get-user-by-id
GitHub:
/api/github-pat/save-pat,/api/github-pat/list-repos
Projects:
/api/project/create-project,/api/project/:projectId/spaces,/api/project/:projectId/delete
Deployments:
/api/deployment/,/api/terraform
AWS Credentials:
/api/project/:projectId/configure-aws-profile,/api/project/:projectId/update-aws-profile
Replace :projectId and other parameters at runtime. See full list in src/config/api-endpoints.ts.
Create a .env.local file in the root directory:
# Backend API URL
NEXT_PUBLIC_API_URL=http://localhost:5000
# Other environment-specific configs
NEXT_PUBLIC_ENVIRONMENT=developmentUpdate in package.json:
{
"scripts": {
"dev": "next dev -p 3000"
}
}npm run lint
# or
yarn lintnpm run type-check
# or
yarn type-checknpm run format
# or
yarn formatWe welcome contributions! Here's how to get started:
- Fork the repository and create your branch from
main - Follow TypeScript best practices and existing code patterns
- Use the existing folder structure and component organization
- Write meaningful commit messages following conventional commits
- Test your changes thoroughly before submitting
- Run linting and formatting before committing
- Update documentation if you're adding features
- Ensure all TypeScript types are properly defined
- Add comments for complex logic
- Test across different screen sizes
- Run
npm run lintandnpm run format - Submit PR with clear description of changes
- Use TypeScript for all new code
- Follow existing naming conventions
- Use centralized API endpoints and types
- Keep components small and focused
- Write self-documenting code with clear variable names
Port already in use:
# Kill process on port 3000
lsof -ti:3000 | xargs kill -9Dependencies issues:
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm installBuild errors:
# Clear Next.js cache
rm -rf .next
npm run build- bagel-backend - Backend API and Terraform execution
- Bagel Platform - Complete platform overview
- Project and space management UI
- Real-time deployment logs
- GitHub integration interface
- AWS credentials management
- Responsive design with dark mode
- Enhanced deployment rollback UI
- RBAC user interface
- Multi-cloud provider UI support
- Advanced analytics dashboard
- Mobile app (React Native)
- GitHub Discussions - Ask questions and share ideas
- Discord Community - Coming Soon! 🚀
Report an issue and we'll get it fixed!
Have an idea? Open a feature request
Bagel UI is released under the AGPL 3.0 License.
Built with ❤️ using:
- Next.js - React Framework
- TypeScript - Type Safety
- Tailwind CSS - Styling
- Redux Toolkit - State Management
- Lucide - Beautiful Icons