I wanted to make a real AngularJS app (something more than the usual todolist we’ve all done 😉 ), so all I needed was to finish my ongoing personal projects and find an idea of an app that I could focus on the frontend part. This is how I came with Topheman Cycle Infos.
If you browse the source code or the README, you’ll see that I followed the Yeoman workflow, in order to master multiple tools such as :
- yeoman / grunt / bower stack
- sass / bootstrap (I wanted to checkout the bootstrap framework – not so fond of it …)
- google maps API (I got some expertise, making Topheman Street View)
- deploy to heroku (a part we dont talk enough : the deployment of a NodeJS app)
- i18n (not really a tool, but I wanted the app in multiple languages – thanks to angular-translate)
This app will tell you the availability of bikes and bike’s stands of the bike’s JCDecaux network in real time in any of their towns.
For the deployment to heroku of a yeoman fullstack based project, I invite you to checked out Creating Apps with Angular and Node using Yeoman.
Tophe
Disclaimer : The design is responsive (it would work on a tablet or mobile), but showing the map of the bike’s stations of Paris may slow down your mobile browser (this is a too many markers problem that I am aware of, but sadly, it would make no sense to cluster them nor take cpu time to process which markers to show or hide). Maybe when I’ll have more time I’ll fix this bug.