A week ago I came across an interesting geo quiz by Telegraph. The quiz that used 15 static unmarked map views of famous capitals from around the world - requires you to guess the name of those capitals - ultimately challenging your geographical skills. Despite being maps enthusiast, I could only guess 6 correctly out of 15. I would blame it on playing it straight after waking up in the morning.
Nevertheless, I immediately thought, how great it would be to have a live, interactive and dynamic version of it. Well, I also thought why not build it. So here it is at http://jabran.me/guess-where/ Go ahead and give it a go!
The app is based on following technologies:
- FontAwesome - for awesome font based icons
- Bootstrap - for overall styling
- Google Maps API - for wonderful enriched dynamic maps
- jQuery - for DOM manipulation
To keep the development, deployment and maintenance at ease, I have also incorporated following technologies:
- Git - for version control
- Github - for convenient collaboration and hosting
- Sass - for customizing the Bootstrap Sass and custom CSS
- Bower - for front-end resource management
- Grunt/NPM - for automatic workflow, builds and deployment
Well, that looks like a long list and probably an overkill for a one page app but it is pretty much a default setup I would use for any such app.
The code of app is open source and available at Github to fork, collaborate or just view under MIT license. You will need followings pre-installed to get going with it:
Fork the repository using
git clone https://github.com/jabranr/guess-where.git. Once ready, use
grunt for development workflow and
grunt build for production build. If you have something to fix or add, then please do not make a production build but open a pull request with only development changes.