About
Boldr is a web apps builder that converts user input into fully functional Next.js app. My part was to design the system and develop interface and logic builders, and code generation engine.
Highlights
- Within two months, conceptualized and developed a Minimum Viable Product for a visual web applications builder using React and Next.js
- Hired and led an international team of 4 senior-level professionals: a Product Designer, a UI/UX Designer, and a DevOps
- Interviewed over 50 potential customers to validate technical pain points
- Developed a Next.js code generator that reduces boilerplate creation by 300%
Challenge
Design and Develop a Minimum Viable Product for a Visual Web Applications Builder, with Backend Logic Editor and Code Generation Engine.
Solution
For rapid MVP development use Next.js framework that provides Server Side Rendering, Caching strategies and Routing out of the box.
To avoid blocking sales processes develop a clickable prototype of the Back-end Logic Editor, and later utilize it as a foundation for the actual feature development.
Use React Sortable library to develop reusable drag&drop editor. Implement a custom solution for deeply nested structures.
Implement Local-First(Offline-First) storage strategy to provide hands-on experience for potential clients before the server-side development is completed. Additionally, use it as a non-blocking approach for offline use cases.
Develop WYSIWYG Interface Editor using Material UI(MUI) as User Interface library and repurpose it as a building blocks within the Interface Editor
Build a Collections feature that works as a simplified abstraction over Data Base Collection and provides a user-friendly interface for data management.
Design and implement Data Access and Management protocols. Develop access management interface.
Conceptualize, plan, and develop Actions feature which is an abstraction over the front-end and back-end functions, endpoint resolvers, and webhook handlers.
Develop real-time preview of generated interfaces, with router, user management system, authentification, content fetch and custom API calls.
Create a Custom Reusable Components system that provide additional interactivity including conditional rendering, state management, user events and animations.
Develop Code Generation Engine that converts user input - json-config into a production-ready Next.js application code.