Bike a'River

Intro

'Bike a'River' is the title of my second web development course project, combining front and backend dependencies. The idea was born out of the annual trips I take with two of my friends: we bike along a river from its source to either the end of it or until it becomes a full-fledged river. Every year we struggle to find integrated information about the route chosen. This app aims to fill this gap as well as to document anyone's adventures through incredible landscapes and offer new options for biking lovers.

Creative process

I've organized my work in Trello, including wireframes (via balsamiq.com). I've approached the backend first and moved on to frontend.

Installation and setup

You can run the project locally by downloading or clonning the Github repo or you can view it online on Heroku.

Technology

This is a a full-stack RESTful application that includes authentication. In a nutshell, it is an Express application that has a Mongo database using the Mongoose ORM.

The initial version of the project was developed within five days using:

A. Backend

• Node.js
• MongoDb
• Google Maps API
• "bcrypt": "1.0.3",
• "bluebird": "3.4.7",
• "ejs": "2.5.6",
• "express": "4.14.1",
• "express-ejs-layouts": "2.2.0",
• "express-flash": "0.0.2",
• "express-session": "1.15.6",
• "method-override": "2.3.10",
• "mongoose": "5.0.0-rc2",
• "morgan": "1.8.1"
• "babel-core": "6.26.0",
• "babel-preset-env": "1.6.1",
• "browser-sync": "2.23.5",
• "gulp": "3.9.1",
• "gulp-babel": "7.0.0",
• "gulp-clean": "0.4.0",
• "gulp-clean-css": "3.9.2",
• "gulp-nodemon": "2.2.1",
• "gulp-notify": "3.1.0",
• "gulp-plumber": "1.2.0",
• "gulp-sass": "3.1.0",
• "gulp-sourcemaps": "2.6.3",
• "gulp-uglify": "3.0.0",
• "run-sequence": "2.2.1"

B. Frontend

• HTML5
• Bootstrap
• Fontawesome
• jQuery
• jQuery validator
• SCSS/SASS

Achievements

The app covers all the technical requirements for this project. On top, it uses the Google Maps API that gives it a degree of dynamism. Further, it contains client-side form validation using jQuery and flash messages to show success/error information. The search function can look up rivers and is not case sensitive. Initial tests indicate that the app is fully responsive however more testing should be conducted.

Next steps

In the short run, I aim to make the app fully responsive. The SCSS code must be DRYer and the UI experience can be improved. Content-wise, the user will get a profile page to check their contributions and there should be a functionality to allow them to add routes they like to their profile (create a portfolio or a wish list). A rating system can be implemented. Further, using Google Maps API documentation, I should include autocomplete on the form for adding a new route and elevation on the map for additional information. Not least, the search function can be made more flexible.

Acknowledgments

This project would not have come to fruition without the brilliant support from General Assembly's instructional team. Kudos to Ben, Emily, Guy, Rane and Rupesh.

Grateful to my biking mates for their companionship and initial feedback on the project.