fivespot

Profile Page with User Posts
Homepage with curated list of Posts

Inspiration

We're connected in more ways than just one. Fivespot aims to bring together the vastly different perspectives of the very land we live and laugh on with sharable Virtual Tours.

So take us on a tour about that ice cream place around the corner - or the history behind your town that no one seems to know - or, just your favorite place to chill on planet earth. Mark and describe your tour with five spots on the map, and fivespot will take care of the rest.

What it does

fivespot is a standalone social media platform so you can Login/Sign up and create your virtual tour, as well as browse Users and their Tours. Essentially, it's a social media platform that emphasizes on the WHERE, and WHAT. Sharing experiences on social media has traditionally been about the WHAT - and not many offer the power to link data about multiple locations on a map with an intuitive interface that fivespot does.

How I built it

User Interface was done completely in React. The React Frontend works in conjunction with Django REST Framework and a database in Django to store and retrieve data. REST Framework takes data and spits it out in json format which can be read by React components.
Google Maps API lets users mark custom points on a map.

Challenges I ran into

React Routing was so hard to figure out. It conflicted with django's built in url routing, but we did manage to find a workaround.
Setting up a query search for database entries proved to be really difficult. We wanted React to be able to fetch data about a specific user and their related posts - that required some heavy lifting to harmonize the frontend and backend.

Accomplishments that I'm proud of

Setting up the Google Maps and StreetView API.
Finding a way to send Google Maps Custom Map data in a REST framework friendly format. We increased loading times by saving the coordinates of map markers in the database and rendering the map entirely in the frontend component.

What I learned

Google Maps API is actually really powerful and has a lot of features - we took the time to learn how to style custom maps which was (really) fascinating
How to connect Django backend to React frontend

What's next for fivespot

There's tons of features we want to put in this! Here are some potential changes:

Configure ManyToMany relationships between Users and their Favorited posts. This way, a user can have multiple favorites, and a post can have multiple favorited users.
Add ability to favourite tours
User Groups and Collaborative maps
Geolocation API to search for nearby Tours