Riverboss

Gowtham (Gauti) Selvaraj's Portfolio - Riverboss - front-end & Ruby on Rails Developer

HTML5 CSS3 SCSS JavaScript CoffeeScript jQuery Ruby Rails

RiverBoss features all 9,048 rivers, creeks and streams monitored by the US Geological Survey, supplemented with NOAA current weather conditions and extened forecasts for each of these locations. RiverBoss store a huge amount of data that is delivered almost instantly via an in-memory database.

Stuffs used and my part

I developed Riverboss' front-end as well as its ruby back-ends. There are 2 parts in riverboss, web app and seeding app. After discussion with the client, we decided to use ruby on rails for the web app and ruby for the seeding app. Our seeding app constantly gets updates from US Geological Survey & NOAA and update our NOSQL redis database where as our web app displays that info instantly in browser. Regarding front-end, we decided not use responsive design because most of the existing users used riverboss via mobile and we wanted our mobile website to be super fast and super simple. So we created separate design for desktop & mobile and based on user agent we render respective views. This significantly improves the mobile browsing experience.

Home page - Desktop view

If the user is not logged in, we show nearby rivers' info, user's location is found by a combination of HTML5 geolocation and IP address. If the user is logged in, we show info of rivers that user has added to their account. Sunrise/Sunset time is fetched dynamically via javascript from Yahoo Weather API

Home page - Mobile view

If the user is not logged in, we show nearby rivers' info, user's location is found by a combination of HTML5 geolocation and IP address. If the user is logged in, we show info of rivers that user adds to their account. Sunrise/Sunset time is fetched dynamically via javascript from Yahoo Weather API

River details - Desktop view

This page displays all information regarding a particular river that is fetched from Redis database

River details - Mobile view

This page displays all information regarding a particular river that is fetched from Redis database

Search rivers - Desktop view

Desktop rivers' search is developed using jQueryUI autocomplete. If an autocomplete result is choosed it will take directly to that river details page instead of search results page

Search rivers - Mobile view

Mobile rivers' search is developed using jQueryUI autocomplete & JsRender (as JS templating). If an autocomplete result's river is choosed it will take directly to that river details page instead of search results page

Add river to account

Logged in users can add their favorite rivers to their account and get their information in home page. This page uses jQueryUI autocomplete to find the rivers by name and use JsRender (as JS templating) to display the rivers

Manage rivers

Using this page user can manage their rivers. They can drag & drop rivers to sort it, set river CFS conditions via modal and delete rivers. Drag & drop is powered by jQuery draggable

Edit conditions

Logged in users can set their preferred river CFS conditions, a modal with a jQueryUI slider is used to set the conditions. Based on the conditions, we show high/good/low in river details

HTML5 location

For mobile users, we try to get user's location using HTML5 geocoding so that we can show accurate details for nearby rivers

Mobile Menu