06.20.14 | Blog

Web-App Development, from Scratch.

After our recent submission to Esri’s Climate Resilience App Challenge, I wanted to follow up further with details on RainHarvest, addressing that which many of you might have asked--what does it take to develop a web-app from scratch? If that’s the case, here’s our ROK recipe:

    1. Find a problem that needs a solution: Before developing RainHarvest, ROK took on the goals proposed by Esri’s Challenge and thought about the resources at risk as a matter of climate change. With that said, most projects, whether for non-profit or for-profit, begin by “solving a problem” or streamlining a process.
    2. Define the scope of your project: While looking to our surrounding area, we narrowed our focus to water and the challenges it poses among our community. We also decided we would query and analyze/calculate data for Charleston (with the potential of expanding nationwide). Word of caution: the larger the scope, the harder the data acquisition and overall project.
    3. Research and acquire necessary data: Finding data can often start through government agency websites (like NOAA and USGS), or colleges and universities (like Oregon State University’s PRISM Group, from where we downloaded RainHarvest’s national monthly rainfall polygons) or Esri basemaps and ArcGIS Online data, among others.
    4. Publish your data/map services: Here at ROK, we processed the data we acquired and published through our own ArcGIS Server, ready to be displayed and queried from our Rest Services.
    5. Plan & Write the web application: Before diving into any code, take your project’s scope (from step 2) and flesh it out as a diagram of related functions and variables. With that plan, focus on the bare bones functionality of your app. As mentioned previously, RainHarvest was developed by building onto a Bootstrap template downloaded from GitHub, some of the latest framework that uses HTML5 and JS to automatically synchronize your work into a seamless web and mobile-ready interface. Here at ROK we also recommend sifting through the code samples available through the ArcGIS API for JS. This is where you will find many of the components essential to the functionality of your app, available as JQuery and Dojo library plug-ins, among others. Lastly, never hesitate to search for additional “effects” and animated thunder .gifs (that’s a shout-out to our own app) through Google.





  1. Seek evaluation: Even after running the numbers (triple-checking your outputs) and collaborating with colleagues and peers, never hesitate to seek feedback from some of your non-expert family and friends. In fact, they will almost always be the ideal app-testers--novice users who will “break” what you thought was perfect. That’s the kind of quality assurance you need before an app release.
  2. Walk away: Chances are you could always continue to improve a project, even after reaching its defined scope. Regardless, try walking away for a few days; see how you really feel about those changes you made at midnight before committing any more time. With a clear head, you may just realize your app is great.



And, just in case you haven’t seen it yet, please check out ROK’s latest Environmental App, RainHarvest.


Happy mapping,