HTML 5 Room Planner

HTML 5 space planner Overview We need a two dimensional space planner with functionality similar to the app on planyourroom.com. 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 angular.js, backbone.js 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 [login to view URL]). 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.