Jonny Olsen

Background

Memory map

A location-based social media platform that enables users to post and share their memorable experiences based on geographic locations.

Project Image

Project Overview

Map Functionality:
Utilizing the robust capabilities of Mapbox, our platform offers an intuitive and seamless user experience. Users can effortlessly place markers at specific locations on the map with just a click. Moreover, they can view memories tied to specific coordinates, and our interface gracefully animates a "fly" transition to the memory's location, offering a visually captivating experience.

Memory Posting:
Every marker serves as a repository of memories. With each marker, users can provide a distinct title, attach a memorable image, and include an evocative description. These memories are cataloged below the map for easy access. Furthermore, the platform ensures user autonomy over their memories, providing them the flexibility to edit or delete them, either from the marker modal or directly from the cataloged cards.

Profile Customization:
In today's digital-centric era, an online profile stands as an emblematic representation of an individual's persona. Acknowledging this, our platform is equipped with versatile customization tools. It grants users the liberty to upload their preferred profile imagery, craft a compelling bio, and more. This facet ensures that each user has a distinctive digital space, enabling them to proficiently display their prowess, milestones, and cherished moments.

Social Page:
The Social Page acts as a comprehensive dashboard that showcases all markers plotted on the map. Users can filter memories by selecting a specific user, offering a streamlined view of individual experiences. Moreover, the dynamic nature of our interface ensures that as the map's viewpoint shifts, the displayed markers realign, presenting only those within the current visual frame, enriching user interaction and engagement.

Tools Used

React
CSS
JavaScript
Mongoose
Node JS
Mongo DB
MapBox
Heroku
GIT
Bootstrap
GraphQL
Apollo