I made RxJS Visualizer in 4h using AI without writing any code manually.
Here is my experience. It was both pretty & ugly.
RxJS Marble Diagram visualizer
RxJS Marble Diagram visualizer is something AI wasn’t trained on very much since there are maybe 3-4 similar apps in existence right now. None of these apps aimed to make existing Marble Diagrams alive 1:1
Goal was to take Marble Diagram and make it animated to present the data flow OVER TIME. While retaining 100% of the UI from original.
This kind of app is something new and AI struggled A LOT.
First, I asked ChatGPT to generate a prompt best fitted for another AI that can generate entire applications. I explained to GPT what I wanted and got a very good prompt. Long detailed prompt.
To build the app with that prompt, I used bolt.new.
Using Angular did not work out well...
My first prototype with Angular was a total disaster. The marbles were square, they didn’t flow at all... it was chaos.
Sure, with hours of tinkering, I might have been able to guide Bolt to fix it, but I didn’t have that kind of time. On top of that, Angular-specific issues kept popping up, breaking things left and right. To make matters worse, Bolt kept flipping between Angular versions 17 and 18, creating an even bigger mess.
Bolt did better with React
I used the same prompt to generate the Visualizer with React, and the results were superb. It immediately looked much closer to what I envisioned. The animations worked, though there were some quirks - like marbles flowing off-screen or not staying on the line.
There were many small issues:
- It lacked controls
- Bolt Added a weird play button.
- There was no "add values" button.
- It wasn’t behaving like RxJS.
- Buttons had to be changed.
- Button placements needed adjustments.
- An actual RxJS logic representation for each operator had to be added.
A huge step forward compared to Angular. However fixing one thing often broke another, creating a frustrating cycle of endless adjustments.
Bolt went DRY… in a bad way
Bolt kept creating new files, leaving old ones in the same place, and later adding changes to the wrong files. On top of that, it kept redoing already working pieces of logic without my permission, breaking one thing after another.
A mess...
Here we are at the point where a non-engineer would never be able to finish this app. Maybe even a mid-tier engineer would struggle with prompting the AI.
To really move forward without doing the actual code myself. I had to do what an experienced engineer would do. I looked at the codebase, and it was clear:
- AI ran itself into a corner by going DRY. 😏
Additional mess came from leaving too many unused files and getting lost in them. I directed Bolt to fix the correct files but kept breaking existing logic. DRY was the main issue - it had crammed majority of core logic into single files.
- Single timeline file
- Single operator file,
- Single label file,
- Single data store file, etc.
When I saw this, I asked AI to immediately break it apart, duplicate code, and create separate files for each operator. It took some time to make Bolt understand this task and required some manual checking of the file tree.
After a couple of iterations, WE got it right. :) AI co-op was very nice with my experience added into the mix. I tried very hard not to touch any line of code manually to see if Bolt can handle this.
Finally a great progress!
With separated files for each operator, I started adding screenshots of existing marble diagrams and descriptions from RXJS documentation. AI got this right almost on the first shot after all codebase optimizations have been made.
I still had to adjust small but crucial details like:
combineLatest()will start emitting only when every given observable has emitted at least once.
This way, I completed the initial set of operators for version 1.
Desktop only for now...
Responsiveness isn’t supported yet, that's mainly because of my initial prompt, which didn’t include a request for a responsive design.
Totally on me. 😅
When I finally asked Bolt to add responsiveness, it completely broke everything. So, for now, v1 is desktop-only. Fixing this will likely need some good old manual intervention down the line.
AI is not replacing you today or in next couple of years
To wrap up:
- Creating something with specific, detailed requirements still requires solid engineering knowledge.
- I couldn't have built this app from scratch in 4 hours without AI.
- AI serves as an excellent prototyping tool, laying down a workable foundation.
- It will speed up your work massively, potentially reducing head count in your team
In the near future I expect to see more smaller teams moving faster then before. Reducing headcount per team, doesn't mean reducing the amount of position overall.
Thanks to this more companies will be able to compete on the market with smaller budgets. Competition is always good.
Working with Bolt today is like having a junior/mid-level engineer under your wing, an experience that felt like constant code/product review.
Can’t wait to see where we land by the end of 2025.
My personal advice to you.
Whatever comes next, make yourself future-proof by mastering high-level architectural skills, diving deep into the nuances AI often overlooks, and sharpening your leadership abilities.
In the next 5 years, we might see developers evolving into leaders of AI-driven teams, orchestrating the process and ensuring the pieces come together seamlessly.
The role might shift toward fine-tuning details, guiding AI through the complexities, and gaining a stronger grasp of the business side to bridge the gap between tech, business & strategy.
Try it out!!
If you want to test the Visualizer yourself - try out the Beta version now 😄, link 👇. I would appreciate feedback in comments section 🙂
I'm planning to open source it soon. Stay tuned!
