2 page HTML5 Webapp

This project received 13 bids from talented freelancers with an average bid price of $243 USD.

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Total Bids
Project Description

Things are really busy over here and we have some projects that we'd like to prototype for testing but we don't have the time to work on them ourselves.

We're looking to establish a relationship with a development team that we can use to rapidly prototype, so we can free our time up for more complicated work (algorithms, new features). We use agile development, SCRUM and lean methodology, so we'll need someone who is comfortable working using this approach. If all goes well with this job, we have a number of jobs that will follow.

With this job we have a small 2 page HTML5 webapp that we'd like coded. The purpose of the app is to create drum kit presets for a popular mobile music app. It's really basic stuff, the user will set some variables and the app will write them to a text file. We could knock it out in less then a day but I'm estimating it as a 2 day project (16-20 hours at the most) to be fair as we do work very quickly.

The user workflow is as follows

1) The user uploads up to 16 wav or aiff files to dropbox (this does not take place in our app)

2) They load up our webapp and login to their dropbox account, giving permission to the app in the process. (dropbox widget)

3) They navigate to the folder where they uploaded their audio files. If possible the directory listing should be filtered so they only see files with the .wav or .aiff extension

4) The user drags and drops a file on top of a UI element (a square pad) and that filename is assigned as that pad's variable. If the directory listing isn't filtered the app will need to validate the user is has selected a .wav or .aiff file.

5) Depending on how many pads they chose to populate (they can populate 4 to 16 pads) some hidden variables will be set for them.

6) They use 12 sliders and 9 carousel (text lists) to set the rest of the variables

7) They save the file, setting the file name and the dropbox directory they want to save to (defaulted to the directory they used in step 3)

8) Finally they'll use an 3rd party app to copy the wave and preset files from dropbox to their iOS device. (this does not take place in our app)

* The dropbox api, provides prewritten widgets that can be used so it should be very easy to integrate [url removed, login to view] read and write.

* The app will populate a text based template file with the variables the user sets.

* User will use drag and drop, touch sliders and carousel text lists to select variables

* It will use adaptive design using a 4:3 screen ratio (1,024 × 768 or 2,048 × 1,536)

* It will need to be optimized for the iOS webkit mobile browser (Safari)

* It should use animations to provide an app like feel (jquery mobile, Sencha, wijmo, etc)

* There are a total of 50 variables but the user will only set 37. THere are 13 variables will be set automatically based on how they populate the pads, the excel file "Sample assignments" tab has the look up table.

* We will prepare the assets (UI, fonts) for you, so you won't have to worry about slicing the PSDs.

Here is a video that demonstrates what the what they app will need to accomplish.

[url removed, login to view]

The UI

Page 1 - 001 Load [url removed, login to view]

Page 2 - 002 Tweak [url removed, login to view]

Popover - 0003 [url removed, login to view]

Explanation of the variables and the data they contain can be found in this file

Drum preset [url removed, login to view]

Text based preset template - The variables are wrapped in angle/chevron brackets < >

Master [url removed, login to view]


HTML5 & CSS 3 is a must and I prefer PHP but I'm open to using any other framework (Sencha, XTJS, Bootstrap, etc) or tech that helps develop the app quicker and easier. In the future I'll be more specific as to what we use but for now it's not necessary. At the end of the project we'll need to have all the code handed off to us.

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