This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
What I Built
I was tired of bloated webapps for practicing system design problem or creating one. So I thought of creating my own. I started with simple canvas with few components such as load balancer, api gateway and database and a custom element.
Then I started adding features step by step
Step 1:
Add arrows to connect different components
Step 2:
Add edit option in components where I can drag the components and move them in canvas, edit their names, resize them and delete them from canvas
Step 3:
Make the canvas size infinite
Step 4:
Add zoom options using mouse scroll in canvas
Step5:
Add few more components such as User, Web client, Cache, etc and add scrollbar in the components section
Final Step:
Add export functionality to export this design in png or jpeg format
And voila the app is live and functional.
Demo
Check it out here and share your designs
Future scope
Now it's time to add more features. Few of them are
- Add an option to create flow chart as well
- Option to copy a single element
- Ability to move multiple elements at once and many more.
Suggest your ideas in comments to make this bigger and better. So that we can have our own canvas opens source and free without any telemetry
My Experience
There were few moments when gemini was approaching correctly but not making the code changes. I had to ask specifically to continue making the code changes and then it moves ahead. That was annoying a bit, but the results were really cool. I like vibe coding a lot with this new tool. Planning to build more for the public for free.
Create your own design and share it in the chat and inspire us with your suggestions
This is extremely impressive, especially since you went piece by piece on your own. I’m always down for something less bloated like this