Spots (In Progress)

In CSS, HTML, Javascript, Node.js, Portfolio, UX, Web Design

For my Designing for Data Personalization Final, I made Spots—a web app that allows you to pin your favorite places on to a map and share it with your friends. The idea is that you can see your favorite spots or see all the favorite spots of a selected group of friends that you follow on the platform (although this social functionality does not exist yet). While it’s not a revolutionary idea, it was very surprising to me that there is not an easy way to share a custom pinned map of a city with friends or family. Now next time a visiting relative asks what they should do, you can just send them your Spots map. The technology stack for this application include HTML, CSS, Javascript and Node.js.

[Click Here] to check out the Spots live demo.


Screen Shot 2015-11-30 at 9.04.50 AM


Screen Shot 2015-11-30 at 9.15.27 AM


To give the map application a unique feel, I designed my own map using Mapbox and created pins that matched the Spots visual ID. Currently a user can pin either a bar, restaurant or “other” and each location type is illustrated by a different pin color. To the left, there is a control panel that allows a person to choose their display options or add a new place. Among the display options, a user can either filter the pins displayed on the map by type (by selecting or unselecting the custom checkboxes for each location type that are represented through their respective pins) or they can choose to only show their pins or show all of the pins from the people they follow by adjusting the slider at the bottom. Lastly, if you click on the pins, it will bring up all the info you’d need about the place (unfortunately, this part is incomplete as not all the desired info is being rendered).


Screen Shot 2015-11-30 at 9.19.00 AM


The last piece that’s worth explaining with regards to the product is how you add a new spot. If you click the add button in the control panel, an overlay will appear that will allow you to search and add a new place.


Screen Shot 2015-11-30 at 9.22.18 AM


Screen Shot 2015-11-30 at 9.22.43 AM


As you can see here, once you execute the search, all the results are pulled from Foursquare and the appropriate pin type is added to each listing (in this case it’s magenta because they are all food listings). Once you click on a listing, it saves the location to the database and will re-render the map the next time it loads.



Submit a comment