InstantAppBellingham, WA, Richmond, VA

  • 147 Commits
  • 63 Pushes
  • 3 Deploys
Launch Site
Quick Intro

Rapid Application Development for the Modern Web


Rapid Application Development for the Modern Web


InstantApp enables non-developers to create web applications with the ease-of-use of a spreadsheet. Since the generated web application is made up of industry-standard components (Backbone, Bootstrap 3 and mustache-style templates for the front-end, a REST-ful API and a MongoDB server on the back-end), users are not locked into the tool, but can transition smoothly to custom web application development. For this reason, InstantApp is also useful for developers who wish to quickly build web app prototypes that they can later expand into full-fledged custom applications.

Judging Instructions

URL: -- this will redirect you to a unique application path, like .../app-12/ so that you can start from scratch and not collide with applications that other people have built.

The main UI of InstantApp is a repeating ItemView laid out in a 12-column Bootstrap grid.

To create a web application, begin by typing labels ("First Name:", "Last Name:") into Text cells and typing data ("Steve" "Jobs", "Linus" "Torvalds") into Input cells. Cells are Text by default and can be changed to Input using the type buttons in the editor pane.

As soon as data is typed into Input cells in the first record, a new record appears above the record being edited. Even after there are multiple records displayed, the template can still be changed (new Text and Input cells can be modified or added) and all templates will instantly update to the new template.

Input cells have a "Name" property that corresponds to the data field in the database. There is currently no data migration, so changing the Name will orphan data. If you want to name the fields something more memorable than A1, C2, it is recommended to set the Name early.

Instead of prefixing formulas with "=", Text cells use mustache-style templates to refer to other data fields. For instance {{ first_name }} {{ last_name }} -- or {{ A1 }} {{ B1 }}, if the Input cells have the default names.

Once the first sheet of data is populated, a new sheet can be created by clicking the green "New" button. Data in this sheet can reference data in the first sheet by using the Dropdown type. When the Dropdown type is activated, two new dropdown controls appear to the left of the "Merge Cells" button. The first contains a list of all other sheets, the second contains a list of all data fields for that sheet (including orphaned data fields that are no longer displayed).

Clicking on a Dropdown cells and picking an item from the resulting menu will associate that target record with the one that is being edited. This is done in the data via a field name like "item_id" or "person_id". The name is auto-created based on the name of the target sheet and is displayed in editor pane "Name" box.

With these basic building blocks, some surprising custom functionality can be added by referencing other sheets in the templates. For instance, on a "pet" sheet that has a Dropdown cell referencing the pet's "person" (data on another sheet), additional data, such as the person's phone number, can be pulled in and displayed on the pet sheet via a template like this: {{ persons.get(person_id).get('phone') }}.

Or, going in the other direction, a list of the person's pets can be displayed on the person sheet by using a template like this: {{ _.pluck(pets.where({person_id: _id}), 'name').join(', ') }}. More custom functionality can be imagined using underscore aggregate functions such as min, max, uniq, findWhere, etc.

What they Used

Express.js, Backbone.js, Underscore.js, Bootstrap 3 (with glyphicons), NeDB (an in-memory database with the MongoDB API), Mocha.js, Jasmine



Your Vote

Voting is now closed.

Other Votes

  • (1)
  • judge


    Didn't really seem usable, would love to see it in action

  • contestant


    Good idea, the UI is pretty complicated though.

  • contestant

    Australian Antarctic Division

    I can't say I get idea of creating websites/applications in a spreadsheet context, but maybe my mind it's broken from all the years of programming. Is there a way to see the application running outside of the spreadsheet view?

  • judge
  • judge App Studio LLC

    It's a great idea. I've known a few people who have built businesses run with programs they've built in Excel. Obviously this approach can only go so far, but I could see it really help empower people to create businesses.

    I couldn't find a link to the compiled web page once I had built one. So, I feel like it's incomplete because it just shows the editor UI and none of the "meat" of the app.

    Interesting concept; good start on the editor!

  • contestant


    This is a nice idea but I don't think that the implemntation actually allows the users to handle web app design with ease.

  • judge


    Liked it, looks super useful for prototyping or doing a spreadsheet-like app.

  • contestant
  • contestant


    Nice UI, but I was a bit confused by the concept.

  • contestant

    I think lowering the bar to website creation is a great idea, something that can really be utilized when done well. You've got some good ideas, and I like what you're going for here, but I found it difficult to use.

    I couldn't figure out how to get more than the two lines of elements, that was a problem for me. I also couldn't figure out how to resize the cells without merging them together... it'd be cool to see something with the golden ratio or rule of thirds so you could make some pretty things effortlessly. Just a thought.

    I think given more time this has potential but I found using this app hard and because of it I probably missed stuff.

  • contestant

    The concept seems very applicable, but if the purpose is to enable non-developers to build web applications, I'm not sure that typing JavaScript into table cells really bridges the gap enough.


SEP 15
NOV 9-15
NOV 16