About Rachnaksh

Rachnaksh was my first major React project and my first attempt at building an interactive graphics editor from scratch. The idea came from a simple observation: arranging furniture in a room often involves a lot of trial and error. I wanted to create a tool where users could upload a room image, place furniture, and experiment with different layouts before making any real-world changes.

Inspiration

I was interested in interior planning tools and wanted to challenge myself by building something more advanced than the typical beginner React projects. Instead of creating another CRUD application, I wanted a project that involved graphics, user interaction, and real-time editing. This led to the idea of creating a room layout editor.

How I Built It

The application was built using React, Vite, Tailwind CSS, and React Konva.

Some of the core features include:

• Room image upload
• Furniture placement and manipulation
• Drag, resize, rotate, and flip functionality
• Zoom and panning system
• Grid visualization
• Layer ordering (bring forward/send backward)
• Duplicate and delete functionality
• Export design as an image
• Undo and redo history system
• Categorized furniture library

The project follows a centralized state-management approach where all furniture updates pass through a common update pipeline, making features such as history tracking and state synchronization easier to manage.

Challenges Faced

One of the biggest challenges was implementing the viewport system. Features such as zooming and panning introduced problems related to coordinate systems, camera positioning, and viewport boundaries. Another challenge was synchronizing object transformations with React state while maintaining smooth user interactions.

Implementing the undo/redo system was also challenging because every object modification had to be tracked consistently. This required restructuring parts of the application's architecture to centralize state updates.

What I Learned

This project taught me much more than React fundamentals. Through building Rachnaksh, I learned:

• React state management
• Refs and direct object manipulation
• Event handling
• Canvas rendering with React Konva
• Viewport and camera systems
• Coordinate-space mathematics
• Object transformations
• History and state synchronization
• Component architecture
• Debugging complex UI interactions

More importantly, it changed the way I think about software development. Instead of focusing only on individual features, I learned how larger systems are designed, structured, and maintained.

Conclusion

Rachnaksh started as a room planner but evolved into a learning experience in graphics programming and frontend architecture. While the project is a 2D editor, the concepts learned during its development—such as transformations, coordinate systems, state management, and viewport logic—form a strong foundation for future work in advanced web applications, AI-powered tools, and 3D interactive systems.

Built With

• javascript
• konva
• reach
• tailwind-css
• vite