React Floor Plan Editor Enhancements

$250-750 USD

Fechado

Publicado há 3 meses

$250-750 USD

Pago na entrega

App rzutnieruchomosci pl My online floor-plan editor ([login to view URL]). React and [login to view URL] and Ai tool ,. I now need an experienced React developer to pick up the codebase, extend it and tune the experience. The immediate milestones are clear: • Add new drawing tools – snapping windows and doors to walls, moving entire walls in one action, rotating doors, windows and furniture in 90-degree steps, plus a “Your plans” view that saves correctly to localStorage. • Squash any existing bugs that surface while you work and leave the codebase cleaner and faster. You’ll get files acces, direct Slack contact with me. Work is fully remote, and I fund each agreed stage as a separate milestone so expectations stay crystal-clear. If you know React inside out and have real-world canvas or [login to view URL] experience, I’d love to hear how you would tackle the next release and when you can start. Functional Specification – Floor Plan Editor (React + [login to view URL]) I. Snapping Doors and Windows to Walls Example reference: [login to view URL] Feature description Doors and windows should automatically snap (attach) to the nearest wall when: Dragged from the element palette onto the plan, Moved across the scene after being placed. Behavior Each element detects when it is within ≤ 10 px of a wall line. When detected, the element automatically aligns with the wall (its edge becomes flush with the wall). For horizontal walls, doors/windows align horizontally. For vertical walls, doors/windows are rotated by 90° and centered along the wall segment. When the element is moved outside the snapping threshold, it returns to free placement (no snapping). Configurable parameters Parameter Default Description snapDistance 10 Distance (in px) within which snapping occurs snapEnabled true Global switch to enable/disable snapping Technical notes The snapping algorithm should be optimized for performance — ideally using bounding boxes or segment proximity calculations rather than per-pixel checks. Snapping should only occur for elements in the “door” or “window” categories. When a snapped element’s parent wall moves or rotates, the element should follow (optional in stage 1). II. Project Management System in LocalStorage Example reference: [login to view URL] Goal Create a LocalStorage-based project manager, showing saved floor plans on a home screen divided into three tabs: [ All ] [ Favorite ] [ Trash ] By default, the All tab is active, displaying all plans where trashed === false. No backend is used – storage must be 100% local. Action icons Icon Action Behavior Favorite / Unfavorite Toggles the favorited property Move to Trash Sets trashed = true Restore from Trash Sets trashed = false Delete Permanently Removes from LocalStorage completely Clicking the plan thumbnail opens it in the plan editor. STAGE 1 — Data Model and Storage Define a data structure describing a single project (plan). Must include: Unique ID Project name Date created / modified Serialized Konva stage JSON Optional preview thumbnail (base64 image) Flags: favorited, trashed Define a collection structure stored in LocalStorage: [login to view URL]('plans', [login to view URL]([ { ...projectObjects } ])); Implement a save/update mechanism when exporting a project from the editor (e.g. “Save Plan” button). STAGE 2 — Project List Interface Use the provided static view for displaying projects in a grid of thumbnails. Each thumbnail includes: Project name Action icons Clicking a thumbnail opens the plan in the editor. STAGE 3 — Display Categories Implement tab-based filtering: Tab Data filter All trashed === false Favorite favorited === true && trashed === false Trash trashed === true Switching tabs dynamically filters the project list. STAGE 4 — Project Actions and States Implement logic for: Toggling favorite → updates the favorited flag. Moving to trash → sets trashed = true. Restoring from trash → sets trashed = false. Permanent delete → removes project from LocalStorage. STAGE 5 — Thumbnails Each project must include a thumbnail generated from the Konva canvas: const thumbnail = [login to view URL]({ pixelRatio: 0.2 }); The thumbnail is stored within the project JSON for quick preview rendering. III. Object Manipulation (Rotation / Layer Order) Reference: [login to view URL] Feature description Every scene element (door, window, furniture, stairs, etc.) must support contextual actions: Rotate 90° Bring to Front Send to Back Behavior details Rotate 90° Each click rotates the object by +90° clockwise. [login to view URL](([login to view URL]() + 90) % 360); Rotation happens around the center of the object. The rotation state is persisted in the editor and saved to LocalStorage (if the plan is stored). Bring to Front Moves the element to the top of its layer stack: [login to view URL](); Send to Back Moves the element to the bottom of the stack: [login to view URL](); UI / UX Actions are accessible via context menu (right-click) or properties sidebar. For snapped elements (doors/windows), rotation should maintain alignment with the wall they’re attached to. Technical & Quality Requirements Must integrate cleanly into the existing React + [login to view URL] editor.

ID do Projeto: 39970916

Sobre o projeto

218 propostas

Projeto remoto

Ativo há 2 meses

Quer ganhar algum dinheiro?

Endereço de e-mail

Benefícios de ofertar no Freelancer

Defina seu orçamento e seu prazo

Seja pago pelo seu trabalho

Descreva sua proposta

É grátis para se inscrever e fazer ofertas em trabalhos

218 freelancers estão ofertando em média $489 USD for esse trabalho

@softsolution2000

I have thoroughly reviewed the requirements for the React Floor Plan Editor Enhancements project. With my expertise in JavaScript, CSS, HTML, Software Development, and React.js, I am confident in delivering the enhancements you are seeking. I am open to adjusting the budget once we discuss the full scope of the project. My top priority is to work within your budget and deliver quality results. Please check my 15-year-old profile for my extensive experience. Let's discuss the details and get started on this project. I am eager to showcase my commitment by starting tasks upfront. Looking forward to your response.

$525 USD em 10 dias

4,9

(365 avaliações)

8,5

@kamran2012

Hello, I’ll help you enhance your existing React-based floor plan editor with precise, high performance improvements. I’ll refine the canvas logic for smoother object rendering, optimize drag-and-drop behavior, and implement advanced features like snapping, scaling, and rotation control. I’ll also ensure state management is clean and modular using hooks or Redux as needed for a stable, extendable architecture. Send me a message, and we can review your current codebase, planned enhancements, and technical constraints to ensure each new feature integrates seamlessly with the existing editor. Best regards, Kamran

$460 USD em 7 dias

5,0

(134 avaliações)

8,2

@divumanocha

Hello, I came across your project and found it truly interesting. With over eight years of hands-on experience in this field, I have successfully delivered high-quality solutions to clients worldwide. My dedication to excellence is reflected in the 180+ positive reviews from satisfied clients. I’d love to bring this expertise to your project and ensure outstanding results. However, I do have a few important points I’d like to clarify to align perfectly with your vision. Let’s connect via chat, where I can also share relevant examples of my past work. I'm looking forward to hearing back from you! Best Regards, Divu.

$750 USD em 8 dias

4,9

(156 avaliações)

8,1

@rahuliitm69

Hi there, I have strong expertise in React and can handle the existing codebase efficiently. I am confident in setting up the project, writing clean, maintainable code, and extending the application with the new features you described, including drawing tools, snapping elements, object rotation, and the localStorage-based project manager. Could you please share the current codebase and the list of existing bugs so I can review them thoroughly? This will help me plan the next steps and ensure the code is cleaner, faster, and ready for the next release. Looking forward to collaborating on this project. Thanks, Rahul

$500 USD em 8 dias

4,9

(40 avaliações)

8,0

@abhisaini0188

Hello, I am a full stack developer with over 10 years of experience in web and mobile development. I have strong hands-on knowledge in ReactJS, NodeJs, MongoDB, ExpressJs, VueJs, Angular.Js, Bootstrap, React Native, Flutter, AWS, Git, Docker, Linux administration, WordPress CMS, Shopify, Backend development, Firebase, and SEO, among others. I am confident that I can help you achieve your goals and look forward to the possibility of working together. Let's quick chat to discuss the project in more details. With Regards, Abhishek Saini

$500 USD em 7 dias

5,0

(19 avaliações)

6,5

@Techislandsllc

As an experienced Full-Stack Web Developer with a strong focus on the frontend and working knowledge of React.js, I bring a deep understanding of the technology to the table, ensuring that your vision for the React Floor Plan Editor Enhancements project is in adept hands. Additionally, my proficiency in JavaScript is a strong asset given your dependence on it. My technical skills combined with my creativity are tailored for versatile web solutions such as this and I commit to delivering a visually stunning and high performing floor plan editor that is well-aligned with your needs. With regard to your immediate milestones, I have extensive experience expanding and refining existing codes. I understand the pressing need to eliminate bugs while making significant enhancements without compromising the codebase quality or performance. I assure you that I will not only meet these immediate objectives but leave you with a cleaner and faster Floor Plan Editor. Lastly, the fact that I'm able to contribute and communicate effectively using platforms like Slack, enables direct access throughout our collaboration, facilitating prompt delivery and adherence to each agreed milestone. Trusting me with this project would be leveraging on proven expertise garnered over time from similar successful web app builds and optimizations exceeding expectations. Crowd Kanza! And let's bring your vision for this app to life!

$250 USD em 4 dias

5,0

(27 avaliações)

6,1

@johnallenvillan1

Hi there, I'm John Allen, an experienced React developer excited about enhancing your React Floor Plan Editor with new features and improvements. I'll seamlessly integrate snapping tools for windows and doors, enable wall movement, and facilitate easy rotations for elements. Additionally, I'll create a 'Your plans' view for efficient localStorage saving. Let's work together to squash bugs and optimize the codebase for a smoother user experience. When can we kick off this exciting project?

$400 USD em 7 dias

5,0

(11 avaliações)

5,9

@imphasys

Hey Adam Z., Good evening! I’ve carefully checked your requirements and really interested in this job. I’m full stack node.js developer working at large-scale apps as a lead developer with U.S. and European teams. I’m offering best quality and highest performance at lowest price. I can complete your project on time and your will experience great satisfaction with me. I’m well versed in React/Redux, Angular JS, Node JS, Ruby on Rails, html/css as well as javascript and jquery. I have rich experienced in Web Development, Tailwind CSS, JavaScript, React.js, React Native, Frontend Development, HTML, CSS and Software Development. For more information about me, please refer to my portfolios. I am checking your attachment, I'll update you shortly... I’m ready to discuss your project and start immediately. 'plans' Looking forward to hearing you back and discussing all details.. For more details Chat with us

$750 USD em 30 dias

4,2

(74 avaliações)

7,1

@DGM999

Hello, I’ve carefully reviewed your project and know exactly how to deliver results that are strategic, efficient, and tailored to your goals with no wasted time or guesswork, just real, measurable value. With several years of hands-on experience in JavaScript, CSS, HTML, Software Development, React.js, Web Development, Frontend Development, React Native, Tailwind CSS, I bring not just expertise but a track record of delivering results that help clients move forward with confidence. My Portfolio: https://www.freelancer.ca/u/DGM999 If you’re looking for reliable, quality-driven support, I’m just a message away. Let’s make it happen. Best Regards, Sadat Saeed

$330 USD em 7 dias

4,8

(49 avaliações)

5,9

@trm66614

Hi there,Good evening I am Talha. I can work with your project skills JavaScript, React Native, CSS, Web Development, React.js, Frontend Development, Tailwind CSS, HTML and Software Development I am excited to present my proposal, which centers around a personalized approach designed to elevate your project. We will start with an in-depth consultation to gain a deep understanding of your project's unique requirements, goals, and constraints. Our commitment to customization means that we will tailor our services to align perfectly with your project, and we will explain how this approach will meet your expectations. Please note that the initial bid is an estimate, and the final quote will be provided after a thorough discussion of the project requirements or upon reviewing any detailed documentation you can share. Could you please share any available detailed documentation? I'm also open to further discussions to explore specific aspects of the project. Thanks Regards. Talha Ramzan

$400 USD em 15 dias

5,0

(21 avaliações)

5,8

@adrianmaynardny

Hello, I’m experienced with React + Konva and can pick up your floor-plan editor to add the requested tools and harden the codebase. 1. Audit: quick repo review to map components, state flow, and current Konva layers. 2. Implementation: - Snapping: walls ↔ doors/windows with collision-aware guides. - Batch actions: move entire walls in one operation. - Rotation: 90° snap-rotate for doors/windows/furniture. - "Your plans": reliable save/load in localStorage with versioning. 3. Hardening: fix surfaced bugs, optimize renders, add small unit/integration checks. 4. Deliverables: PRs per milestone, tests, README, and Slack updates. Ready to start once you share access. Best regards, Adrian

$500 USD em 4 dias

5,0

(10 avaliações)

5,5

@codefusion53

Hi, I’m an experienced React developer with hands-on expertise in canvas-based tools and Konva.js. I can jump into your floor-plan editor and extend its functionality with precise snapping tools, intuitive wall manipulation, and smooth 90° rotations for elements. I’ll also implement the “Your plans” view with reliable localStorage handling. While working, I’ll address existing bugs, refactor where needed, and ensure the app stays performant and clean. I'm ready to collaborate via Slack and begin the next milestone quickly with clear, testable goals. Let’s make your next release seamless and powerful. Best, Justin

$500 USD em 7 dias

5,0

(2 avaliações)

5,3

@douglasfullstack

Hello! I’m an experienced React developer with a strong background in canvas-based tools and Konva.js. I understand you need enhancements for your online floor plan editor, including new drawing tools with snapping, rotation functionality, a better plan-saving view, and overall performance improvements. I will extend your current codebase carefully, adding these features while ensuring smooth user experience and cleaning up bugs for faster performance. My approach includes leveraging React’s state management efficiently alongside Konva to maintain a responsive and intuitive editor. I’m ready to start soon and can communicate directly via Slack for quick progress updates. Could you share any coding standards or existing docs to align with your setup before beginning? Looking forward to your reply!

$675 USD em 10 dias

5,0

(30 avaliações)

5,5

@TechizeBuilder

Hi Adam Z., I came across your project "React Floor Plan Editor Enhancements" and I'm confident I can help you with it. About Me: I'm a agency owner with over 8+ years of experience in JavaScript, React.js, React Native, CSS, HTML, Tailwind CSS. , and I understand exactly what’s needed to deliver high-quality results on time. Why Choose Me? - ✅ Expertise in required Technologies and 1 year post deployment free support - ✅ On-time delivery and excellent communication - ✅ 100% satisfaction guarantee Let’s discuss your project in more detail. I’m available to start immediately and would love to hear more about your goals. Looking forward to working with you! Best regards, Deepak

$600 USD em 15 dias

4,8

(25 avaliações)

5,2

@loinguyen254

As a highly skilled and experienced React developer, I am confident that I can take your current floor plan editor to the next level. I have an in-depth understanding of React and have worked extensively with tools such as Konva.js. In fact, my experience covers a wide range of projects including e-commerce platforms, media apps, and more recently, image recognition and ID card scanning projects using machine learning. I am well-aware of the immediate challenges this project presents such as adding new drawing tools and bug fixing while optimizing performance. Over the years, not only have I become comfortable with optimizing for performance but also adept at leveraging more efficient methods like bounding boxes or segment proximity calculations instead of per-pixel checks which will undeniably make your app cleaner and faster! Moreover, my experience in building custom business applications should be valuable for developing localStorage-based project management system you envision ensuring a truly user-friendly experience. Keeping your unique requirements at core, using my six-year experience in web development with React, I promise to create an enhanced floor plan editor that manifests perfection and efficiency whilst bringing your vision into life.

$500 USD em 7 dias

4,9

(6 avaliações)

4,6

@Ahmedyar547005

Hey Tushar B., I just went through your job description and noticed you need someone skilled in React Native, Web Development, Software Development, JavaScript, React.js, Frontend Development, CSS, Tailwind CSS and HTML. That’s right up my alley. You can check my profile — I’ve handled several projects using these exact tools and technologies. Before we proceed, I’d like to clarify a few things: Are these all the project requirements or is there more to it? Do you already have any work done, or will this start from scratch? What’s your preferred deadline for completion? Why Work With Me? Over 180 successful projects completed. Long-term track record of happy clients and repeat work. I prioritize quality, deadlines, and clear communication. Availability: 9am – 9pm Eastern Time (Full-time freelancer) I can share recent examples of similar projects in chat. Let’s connect and discuss your vision in detail. Kind Regards, Zain Arshad

$250 USD em 4 dias

4,9

(17 avaliações)

3,9

@efanntyo

Hello Adam Z. Hope you are doing well! This is Efan , I checked your project detail carefully. I am pretty much experienced with HTML, CSS, React Native, JavaScript, React.js, Software Development, Frontend Development, Web Development and Tailwind CSS for over 8 years, I can update you shortly. Cheers Efan

$650 USD em 10 dias

3,9

(12 avaliações)

4,9

@Azfarzul

Hi, I’m an experienced React developer with deep knowledge of canvas libraries like Konva.js. I can extend your floor-plan editor by adding snapping for doors/windows, wall movement, 90-degree rotation for objects, and a “Your Plans” view that reliably saves to localStorage. I’ll also perform a thorough bug sweep and optimise the existing codebase for speed and maintainability. My approach would be: Audit the current Konva setup and component structure to identify reusable patterns. Implement the new drawing tools incrementally, testing snapping, rotation, and multi-object moves. Ensure state management and localStorage interactions are robust, avoiding potential data loss. Clean up performance bottlenecks, redundant re-renders, and memory leaks. Deliver each milestone for review via your preferred workflow, keeping Slack open for immediate feedback. I can start immediately and provide estimated timelines per feature once I review the repo. Best Regards, Azfar

$350 USD em 4 dias

5,0

(7 avaliações)

3,9

@krisk63

Hi there, I’ve worked on similar projects before, and as a senior full-stack and AI engineer, I have the proven experience needed to deliver this successfully. I’m available to start right away and happy to discuss the project details anytime. Looking forward to speaking with you soon. Best regards, Kristopher Kramer

$500 USD em 7 dias

4,3

(5 avaliações)

4,6

@eDesignerExpert

Having worked as an architectural designer for several years, I have honed my skills in both conceptual development and space planning. My extensive experience with 2D and 3D modeling, as well as rendering, complements the specific demands of your project impeccably. You can trust me to bring your new drawing tools to life. Moreover, my command over AutoCAD and Revit(BIM) will aid in rectifying any existing bugs, and subsequently ensure that your codebase is cleaner and faster - a priority you mentioned. Over the course of my career, I have also developed a knack for project management and efficient coordination, which will help us maintain clear communication milestones to get the work done brilliantly within expected timeframes. In conclusion, by choosing me to extend and tune your online floor-plan editor, not only do you get a reliable React developer but also a diligent architectural specialist who is dedicated to delivering quality work on time. Let's discuss how I can tackle your project in detail and commence this next milestone, bringing enhanced features into fruition on schedule and to your satisfaction.

$500 USD em 3 dias