Trips Advisor

Trips Advisor - A geotagging app where people can record their thrills and spills whilst out in this dangerous world

Installation & Setup

Run Locally

• Download or clone the Github repo
• Run npm install or yarn in the terminal to download required dependencies
• Run gulp in the terminal to compile the source code and open in browser

View Online

• View on Heroku
• View on Github

Users can select any location they like and then click it to record details of their mishap

Description

The premise for this app is simple - if you fall over/faceplant/do a random gravity check - you can log in to this app and record it on the map, along with a description of the event. Other clumsy people can see where the tripping hotspots are and avoid them. Users can interact on the site by leaving comments - for example, to wish a fellow user well whilst they recover in hospital.

A wireframe Diagram showing the various routes accessible to the user to perform CRUD actions

Technologies used

The list of the software and languages used in the project, for example:

• HTML5
• SASS
• JavaScript ES6
• jQuery 3.10
• Google Maps API
• Gulp
• node.js
• Express
• Mongo
• Yarn
• NPM
• Git
• Github

Challenges faced

A personal challenge for me was using Jquery to access the data from the trips model in the DOM to plot markers without using server-side.js in the front end. I successfully overcame this in the end with the use of data attribute tags on my maps.

I struggled with the CSS styling. Whilst in some respects I found it easier using bootstrap, I also found it difficult to position and center things on the page, which often left me frustrated. The Node.js and express app back end part I found easier to deal with.

Making It Better

Improvements that I would like to make to the project in the future would be:

• Improve the overall styling.
• I want to include an address search bar
• I want to include a navigation page - where users can work out a route from point A to point B and see all the potential trip hazards on route.
• I want to hook upto a weather api so on the profile page the app can advise particularly clumsy people not to go out when it is icy.
• add image upload and an oauth from a social media site
• I want to include animations to my app to make the UI seem slicker and more modern.