Modern full-stack web application called DevOpsForge using React + TypeScript + Vite + Tailwind CSS + shadcn/ui for the frontend and Node.
Generated Prompt
## APPLICATION OVERVIEW DevOpsForge is a modern full-stack web application designed for developers, focusing on simplifying the creation and management of Kubernetes manifests and CI/CD workflows. It provides users with an intuitive interface to generate Kubernetes configurations, validate YAML files, and manage application deployment histories. ## CORE FEATURES - **Kubernetes Manifest Generator**: A multi-step wizard allowing users to input application details and generate production-ready Kubernetes manifests including `values.yaml`, `deployment.yaml`, and more. - **CI/CD Workflow Generator**: Generates GitHub Actions workflows based on user specifications for framework, Docker image, and Helm release, streamlining deployment processes. - **Kubernetes YAML Validator**: Validates user-provided YAML files for syntax errors, missing fields, and best practices, returning detailed feedback. - **Application Management**: CRUD functionality for managing applications and their deployment histories, allowing users to track changes and configurations. - **Responsive Dashboard**: A clean, responsive dashboard with a collapsible sidebar, providing easy navigation between features and settings. - **Structured Logging**: Utilizes Pino for structured JSON logging with correlation IDs for better monitoring and debugging. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography - **Color Mode**: Light theme with dark text on light backgrounds - **Primary Color**: #1978E5 (accent for buttons, links, highlights) - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs - **Layout**: The layout consists of a responsive dashboard featuring a collapsible sidebar for navigation, with main content areas dynamically updating based on user selections. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: React Query for API communication - **Database**: PostgreSQL with Prisma ORM - **Backend**: Node.js with Express and TypeScript ## IMPLEMENTATION STEPS 1. **Set Up Project Environment**: - Initialize a new React project using Vite with TypeScript. - Install necessary dependencies including Tailwind CSS, shadcn/ui, React Query, and Prisma. 2. **Design the User Interface**: - Create a responsive layout with a collapsible sidebar using Tailwind CSS. - Implement the dashboard area with sections for each core feature. 3. **Implement the Kubernetes Manifest Generator**: - Create the multi-step wizard UI component. - Use Zod for input validation before submission. - Set up API routes in Express to handle incoming data and generate manifests. 4. **Develop the CI/CD Workflow Generator**: - Create a form where users can specify their CI/CD requirements. - Implement backend logic to generate and return the GitHub Actions YAML. 5. **Build the Kubernetes YAML Validator**: - Create a validation service in the backend to check for common issues in provided YAML files. - Display validation results in the frontend with feedback on errors and suggestions. 6. **Implement Application Management**: - Create CRUD APIs for applications and history using Prisma for database interactions. - Design UI components for listing, adding, editing, and deleting applications. 7. **Set Up Logging and Health Check**: - Integrate Pino for logging structured data in the backend. - Expose a `/health` endpoint to monitor the application's status. 8. **Testing and Deployment**: - Perform unit and integration tests to ensure functionality. - Containerize the application with Docker and prepare for deployment to Kubernetes using Helm. ## USER EXPERIENCE Users will start at the dashboard, where they can easily navigate through different features via the collapsible sidebar. The Kubernetes Manifest Generator will guide them through entering required application details in a step-by-step manner. Upon generating manifests, users can view and copy the output in a Monaco Editor, with options for downloading and explanations. Validation features will provide immediate feedback on YAML inputs, enhancing the overall user experience. The application will maintain a clean and straightforward design, ensuring that users can focus on their tasks without unnecessary distractions.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
