While @Fabian Heuberger took on the heavy lifting of rewriting the backend endpoints, I focused on the new frontend.
The challenge? Our existing Case Map editor was built on React 15 and Redux - tech that’s now practically vintage. Patching the old frontend just didn’t make sense, so I decided to start from scratch. Being more comfortable with today’s React ecosystem and having already worked on other new editors, setting up the initial scaffold was a breeze.
The real challenge, though, was crafting a fresh, intuitive interface while keeping the familiar functionality. Before the code camp, I teamed up with our UI/UX designer Anais to lay down the design foundations. Our goal: a UI that aligns with the look and feel of our other modern editors, while preserving the unique timeline and Case Map style.
Day 1 & 2: I sketched out a rough outline of the new Case Map. Fabian was still working on the WebSocket backend, so I temporarily hooked the editor up to the old REST endpoints. This let me hit the ground running without waiting. By the second day, Fabian's WebSocket groundwork was in place, allowing me to switch the editor to the new endpoints.
Day 3: Drag-and-drop functionality went live, making the Case Map feel more interactive and bringing it closer to the experience users already enjoy in our form editors.
Days 4 & 5: I focused on fine-tuning the UI/UX and implementing additional features from the old Case Map Editor. By the end of the week, the editor was functional, visually appealing, and clearly headed in the right direction - though some features still remain on the roadmap.
Looking Ahead
It’s still early days, but even in this first version, you can see the direction we’re heading: a smoother, faster and more future-proof Case Map Editor. Some features (like full process animations, the metrics switch and improvements to the dev-wf-ui) are still on the to-do list, but the foundation is solid.
Wrapping Up: A Successful Code Camp
This year’s code camp was nothing short of fantastic. Nestled in the mountains, coding alongside teammates and soaking in the scenery - it was the perfect mix of work and inspiration. We made major strides on the Case Map Editor, modernizing both frontend and backend while setting the stage for future enhancements.
It was invigorating to tackle challenges, share ideas and combine our efforts to improve an essential part of Ivy. I’m excited to keep building on this work and can’t wait to see how the new Case Map will evolve in the future.
Thanks for following along, and until next time!
