Whereabouts App
Whereabouts combines the social media functionality of Instagram with location-based adventuring like geocaching, letterboxing, or Randonautica, giving users something unique to post about.
Users will activate one of three missions, travel there and explore that location, share photos and a description of what they found, and interact with posts by fellow adventurers.
Built with JavaScript, Python, Flask, React, Redux, CSS, AWS S3, Google Maps API, PostgreSQL, SQLAlchemy, Heroku, Docker, and Git/Github.
Feature list, user stories, database schema, and more on project wiki:
https://github.com/JackyxCS/Whereabouts/wiki
Project highlights:
Collaborated in a three-person team, coordinating activity through issue tracking and developer documentation
Wrote React architecture for fast, maintainable client-side features: post feed, likes, user profile, splash, and nav
Splash
The entrance screen steps through how the app works.
Explore
The explore feed shows the primary image uploaded for each post. Photos are displayed in a masonry grid; clicking an image reveals all the photos, description, and comments for that post.
User Profile
The user profile includes the mission dashboard at the top. Each day, the user is given three fresh missions, based on their entered location and distance willing to travel) to choose from. Users can update their coordinates to generate new missions. Only the user can see their mission dashboard, so others do not know where they will be traveling in advance.
The Google Maps API was used to generate mission maps based on randomized latitude and longitude. A custom branded pin marks the mission location.
The profile also includes photos from each of the user’s past missions.
Publishing Posts
After selecting a single mission, the user can upload 1-5 photos of their adventure, as well as typing a description of their experience.
Photo upload uses AWS S3 (as does the user’s photo at the top of their profile)
Post Detail + Comments
A preview image from the explore feed or a user profile leads to the full details of the post. The primary image is featured at the top. Clicking any of the image thumbnails will load them in the featured space for a larger view.
The map, description, username (with link to profile), date, and number of people who liked the post are displayed.
A comments section at the bottom allows users to discuss the mission.
