Mobile app for Geograph project
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Build Status

devDependency Status

This is a HTML5 + JavaScript mobile app for the Geograph project. This app allows searching the Geograph database to view details of images within the database. The app is location aware and has an interactive map which allows the user to search for images by location. The app also contains a news section, which allows the user to read all posts on the Geograph blog.

To find out more about the Geograph project, visit


Local Environment Setup

You will need Nodejs installed if you dont already have it. Once Nodejs is installed then simly run "npm install" to install all of the dependencies.

You will also need Sencha Cmd installed, and this requires Java. Sencha Cmd ships with a Ruby interpreter, in-built Jetty web server and a sass compiler. Senca Cmd is required for compiling the app for production.

Important Folders / Files

The folders in which the development codebase are contained are the "app" folder, which contains JavaScript files, and the "resources" folder which contains sass files, and also image files etc.

Sencha follows the MVC architechtural pattern, and so you'll notice the subfolders in the app folder are "controller, model, view", and also, the sencha specific "store" folder.

Sencha uses sass and compass. To compile your sass changes, run "sencha ant sass". Running "sencha app watch" will automatically compile as you save changes to your files (Javascript and Sass)

BEM & Sass

This project adheres to the BEM methodolgy for CSS naming conventions. See here for more information. The Sass files try to leverage Compass mixins where practical to do so.

The main sass file is resources/sass/app.scss. This file declares all the variables that will be used throughout the other imported files. this file also imports the various others sass files that are used. These include:

  • _overrides.scss, which contains overrides for existing Sencha styles
  • _mixins.scss, which contains mixins that used elsewhere in other files

Other files are organised by view, i.e. homepage, image detail, map etc.

Note: Running "sencha app watch" will also launch the in-built Jetty web server. You can also run the server by itself by running "sencha web start". The web server is accessible on http://localhost:1841

Documentation / JSDuck

The code documentation is available here. This documentation is generated from the code comments and uses JSDuck, which has its own annotation conventions. See here for more info.

Build using Sencha Cmd

In order to compile the app for production, run "sencha app build". This will output a production ready package into the build folder. Before running the above command to build the app, run "grunt travis" in order to run the CI build tasks, which will lint the code and run unit tests. Output logs from this task are located in the "build/logs" folder.

Unit Testing

Unit Testing is carried out using Karma and Jasmine. and there is a grunt build task to cover this. Run "grunt test" to run the unit tests. Code coverage is run on source files using Istanbul, again, through Karma. the karma configuration file is "karma.conf.js", and unit tests are found in the "tests" folder. They are organised into the same folder structure as the source files they are testing in the "app" folder.

Code Style

This project uses JSCS, and adheres to the Crockford standard. Run "grunt lint" to lint the project and check for code style errors. Output logs from code-style checking are found in "build/logs/jscs.xml".

Code Complexity Analysis

This project uses Plato to analyse code complexity. Run "grunt complexity" to run the analysis. Output reports can be found in the "build/logs/plato" folder.

Continuous Integration

Continuous Integration is carried out via Travis CI. Builds reports can viewed at Travis will automatically run linting, code style checking and unit tests for all pull requests.


App analytics are carried out using Google Tag Manager, which is integrated into the app, and allows remotely configuring app analytics with various different analytics vendors.

API Docs

This app was made possible by accessing the excellent public API made available by the Geograph project. For more information on this API, visit