Model-Driven DevOps Solution for Leto

Product Context: Orness, a software solutions company specializing in DevOps and infrastructure automation, aimed to enhance the development and deployment processes for enterprise applications. They sought to create Leto, a model-driven DevOps solution that would simplify and streamline the management of logical-level products through a graphical user interface (GUI).

Key contributions included:

✅ Designed and developed a reusable component library to ensure consistency across the application.

✅ Implemented real-time data visualizations for system monitoring and DevOps metrics using VueJS and RxJS.

✅ Optimized performance by implementing virtualized rendering techniques to handle large datasets efficiently.

✅ Enhanced user experience with smooth transitions and interactive elements, leveraging Vue's built-in animation capabilities.

✅ Integrated REST APIs (Postman, Swagger) and ensured seamless communication between frontend and backend.

✅ Established CI/CD pipelines (GitLab, Docker) to automate build, testing, and deployment processes.

✅ Ensured high code quality by implementing unit and end-to-end testing using Jest and Cypress.

Technical Challenges and solution

The challenge was to design and develope an intuitive and highly interactive web-based platform that allowed users to model, configure, and deploy complex DevOps workflows seamlessly. The interface needed to support real-time updates, ensure responsiveness, and provide a smooth user experience, even when handling large datasets.

As a Senior UI Developer, I played a key role in designing and implementing the frontend architecture of Leto, focusing on responsiveness, performance, and maintainability. The project was built using VueJS (Composition API), VuexJS, and Vue-router, ensuring a scalable and modular codebase.

Technologies Used

Frontend: VueJS (Composition API), VuexJS, Vue-router, Axios

State Management: Vuex

Testing: Jest, Cypress

CI/CD & Deployment: GitLab, Docker

API Tools: Postman, Swagger

Design & Collaboration: Figma, Adobe Illustrator

Code Quality: SonarQube