Hello there !, I'm Sumeeth.A Web Developer/Designer specialized in building scalable web applications and interactive experiences through motion graphics.
Skills
Web Development
Web Animations
Three.js
Blender
Portfolio
Project Details
Duration
2 Weeks
Role
Developer
Tech Stack
React, Html2canvas
Overview
Wireframer is a designing tool to design wireframes/mockups which can help users to visualize their ideas before designing User Interfaces (UI) for web applications.As we know that creating wireframes is a crucial step in designing user interfaces and wireframer can assist users with that process. Wireframer's node based design will allows users to create their design with flexibility. Wireframer also allows users to download their designs as pdf's and share them easily.
Challenges
One of the main challenges was sharing the data through out the application to make all the systems work together. Usually this can we achieved with a state management solution like redux in react. But this is not the case with wireframer because of redux's limitations on how it passes data. The other problem that I faced while developing wireframer is rendering the design. Wireframer doesn't use canvas api like other designing tools, so rendering the design became difficult.
Outcome
Managing data in wireframer using redux isn't easy because after a point redux couldn't pass data to components. So I forcefully re-rendered the specific components on the page to get the data. And to render the design, I didn't use canvas api so the usual method of rendering doesn't work. To solve this I chose to dynamically add HTML elements to the DOM by altering it in real-time and achieved this by using recursion. The algorithm is designed to replicate how we code a HTML and adds it to DOM so the browser engine could render it.