landing page
canvas
project page

Inspiration

We were inspired by videos of web dev prodigies effortlessly mapping out their ideas on infinite canvas interfaces. We loved that frictionless brainstorming experience, much like Excalidraw. So how about a website which uses the same canvas to create websites itself?

Inspiration Video: https://www.youtube.com/watch?v=Ak1ACaqNtM0&t=65s

What it does

Samsaar a workspace that transforms rough hand-drawn wireframes into production-grade UI. You draw your UI components on the canvas, and our integrated pipeline reads the spatial data to instantly generate a complete Next.js codebase.

How we built it

The core engine of Samsaar relies on a heavily engineered state management system using Redux Toolkit.

The Store Architecture: We built a Root Redux Store split into distinct slices. The Viewport Slice tracks canvas math (pan tracking, translate {x, y}, and scaling), while the Shapes Slice uses an EntityAdapter to track every rectangle, text block, and selection on the screen. We also integrated Projects and Profile slices alongside RTK Query APIs to handle data fetching.

To make the canvas feel professional, we engineered a custom Undo/Redo history stack directly in Redux. Every time a user finishes a draw/move interaction (commitHistory()), the system pushes the current state to a Past Stack, updates the Current Shapes, and clears the Future Stack.

The Generation Pipeline: When a user clicks export, the Client-Side React app dispatches the Redux data to our Server-Side Next.js API (POST /api/generate). Gemini 3.0 Flash analyzes the spatial geometry to scaffold the UI code.

Live Sync & Export: We integrated Convex Real-time DB for live data synchronization, and wired up a JSZip Asset Bundler to package the generated multi-page linked routes into a single .zip download.

Challenges we ran into Building an infinite canvas is essentially building a complex math engine. Handling the Viewport Slice for seamless panning and zooming while simultaneously tracking the precise absolute coordinates of shapes inside the Shapes Slice was a massive headache.

Furthermore, managing history (Undo/Redo) without mutating the active state caused severe performance bugs early on. We had to strictly define our action dispatchers (panMove(), zoomBy(), addRect()) to ensure the Past Stack and Future Stack arrays stayed perfectly synchronized with the user's interactions without dropping frames.

Accomplishments that we're proud of As developers who have been building projects since we were 13, creating a tool that essentially automates the very engineering we've spent years learning feels surreal. We are incredibly proud of the robust Redux architecture we designed. Building a custom history state machine and successfully bridging the client-side canvas data with a server-side Gemini generation API—resulting in a perfectly bundled JSZip output—was a massive technical victory.

What we learned We learned the sheer power of Redux Toolkit when pushed to its limits. Managing complex client-side state via EntityAdapters and RTK Query middleware completely changed how we view frontend architecture. We also learned how to effectively constrain LLM outputs by feeding Gemini structured JSON coordinate data rather than just raw images, forcing it to respect the spatial hierarchy of the canvas.

What's next for Samsaar, Due to lack of testing tokens we couldnt fully incoporate curating react apps, however the next big thing can be make sketch to apps! or even more wild stuff, imagination can get us soo far!