HTML 5 Room Planner - repost

This project received 34 bids from talented freelancers with an average bid price of $3760 AUD.

Get free quotes for a project like this
Project Budget
$1500 - $3000 AUD
Total Bids
Project Description

HTML 5 space planner


We need a two dimensional space planner with functionality similar to the app on The icons for the furniture will be provided. The database and API calls to save a plan, load a plan, save a user’s account information, allow the user to log in, and dynamically add products to the plan will be provided.

Technology Requirements

The project must be done in a way that will work on all desktop browser environments, and all mobile browser environments. This means a combination of HTML 5, javascript, and CSS. This will be a complex javascript application, a framework like [url removed, login to view], [url removed, login to view] or something similar will be required. The app must be both mouse and touch capable. Flash, Silverlight, or any other plug-in requirement will not be acceptable.

More Details

Creating a new plan:

The user will be able to choose from a small set of predefined room shapes or start from scratch. Then, the user will be able to edit the existing walls, add new walls, and delete walls. (the user should be able to edit the wall shapes at any time).

The user will be able to add furniture products to the room. There are two ways to add a piece of furniture to a room. 1. Select a product from the in-app navigation (similar to [url removed, login to view]). 2. Add a product from somewhere else on the website via an API call (see section on API calls)

Once a piece of furniture has been added to the room plan, the user will be able to move it, rotate it, delete it, or view details on it.

The user will be able to save their plan and retrieve it later. The user should be able to share the plan with others, who will be able to view it in read-only mode.

Products and Icons

The products that can be added to a room plan will be a combination of Actual Products and generic placeholders. We will use generic icons for each product type regardless if the product is an Actual Product or a place holder. For example, all sofas will use the same icon. For Actual Products the icon must be scaled to the proper dimensions, which will be provided. For place holders we will provide default dimensions. It is OK if the icon image is stretched to make it display at the Actual Product’s dimensions. Place holder products will be have the option to let the user re-size the icon.

Databases and API

We have a database of furniture products and user accounts, and an API that this app will use to make calls to get and save data. This app should be retrieving data via the API on an as-needed basis. For example, when a user uses the in-app navigation to see all of the sofas available to add to a plan, that list should be retrieved on the fly via the API. Caching that data for that user is acceptable and encouraged, but in general the app should use our database for storage.

This app is going to be used along with an existing website. Each product page on the website will have a button that will say ‘add this to your room plan’. When the button is clicked that product will be added to their plan.

Overall interface

We will provide wireframe mock ups for most major UI elements and layouts. Some dynamic UI elements are not easily communicated with a wireframe and in those cases we will verbally explain what we are intending.

Project Process

We will want to see your progress during the development of this app. To bid on this project you will need to submit an outline of your development plan with deliverable milestones. One of the first phases of this plan should include time to gain a very good understanding of what we need, account for that time when you bid. Also as part of the bidding process, include a first draft of the data schema you would use to save the data in a plan. This can be a sample JSON snippet, XML, or a few sentences explaining what you would do. This doesn’t need to be perfect, but I want to get a sense that you have thought about what this project will entail before you bid.

Skills Required

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online