Flexel: Traveling Together

• 

  2:50am :D

Inspiration

When discussing ideas, we all agreed that one of the biggest aspects of traveling is getting experiences. Sometimes, we wish we could share those experiences easily with others. Through our platform, users can share their experiences with others, as if they were there with them.

What it does

Users can post their trips, including journal entries and photos taken. The trip can include multiple places they visited during the trip. When trip info is put in and the post is made, a map is created with all the places visited during the trip. On the map, there are pins where journal locations were made or where photos were taken. On the main feed, users can scroll through other people's posts where they view the entries, photos, and maps. The profile displays the user's following and follower counts, total distances traveled, and total countries visited. Also on the profile, you can view the user’s trips in a grid view. In addition to a profile and feed, there is a notifications pop-up tab and a search/explore page.

How we built it

Flexel was built with a foundation of Node.js and mySQL, with Express.Js and Mustache.Js on the frontend. We deployed a Digital Ocean Droplet on a development server, used google Oauth (“sign-in with google”), and integrated elegantly with the ArcGIS REST API.

Challenges we ran into

Since HTML was a new language for some members of our team, it was difficult to learn in under 24 hours and effectively program a working website. Other challenges included finding roles for teammates of varying experience levels and knowing how to split up the work. Additionally, the integration of the maps API was extremely difficult to do in a timely manner since we also wanted to add specialized features such as lines connecting places the user traveled through photo metadata.

Accomplishments that we're proud of

We are proud of our collaboration and professionalism throughout this project despite being of different experiential backgrounds. This included issues with troubleshooting in HTML, which some users were not familiar with, and assigning specific roles. Also, we are proud that we all were able to learn a new skill and contribute significantly to the final result.

What we learned

Anna learned how to program in HTML through this hackathon, including syntax and how to write CSS files to support web development. For Homira, she learned more about data sets and the beginnings of mySQL. Johnny experienced the difficulties of integrating extensive APIs into a project when few features were needed.

What's next for Flexel: Traveling Together

We hope to improve our platform on the backend side by connecting all the pages through the navigation bar while also making UI/UX design better. Lastly, the user interface was not fully implemented since it was a trivial element in the bearings of our project with no real interacting users.

Built With

• esri
• express.js
• fontawesome
• google-cloud
• google-oauth
• html/css
• mustache.js
• mysql
• node.js