MySpace

MySpace is an application that combats social isolation by empowering users to instantly create and find hyper-local, real-world social events, effectively rebuilding community "third spaces."

Comment

MySpace: Rebuilding Community in the Digital Age

1) What Inspired You 💡

Our project, MySpace, was born from the growing realization that modern urban planning, especially in North America, has systematically eroded "third spaces." A "third space," as coined by sociologist Ray Oldenburg, is the essential public setting separate from the two primary environments of home (first place) and work (second place). These are the informal anchors of community life—the coffee shops, parks, and community centers where voluntary, informal, and happily anticipated social gatherings occur.

In North American cities, development prioritizing the automobile has led to disjointed, residential-only communities, making organic, spontaneous social interaction a rarity. This scarcity is not just an inconvenience; it is a public health concern. Social media platforms are now flooded with discussions from people, particularly young adults, sharing how difficult it has become to meet new people and build lasting connections outside of highly structured environments.

The mental health ramifications are severe, particularly for isolated populations like retired or older citizens. Research by the NIH indicates that approximately 24% of community-dwelling Americans aged 65 and older are considered socially isolated. Furthermore, the impact of lacking social connection is significant: studies have found that social isolation is associated with a risk of premature mortality comparable to that of smoking 15 cigarettes a day. MySpace seeks to combat this crisis by digitally mapping and facilitating the creation of hyper-local, spontaneous, and accessible real-world community events, effectively creating a "digital third space" to launch physical ones.

2) What It Does 🌍

MySpace is a geo-location based web application designed to connect users with local community events and facilitate the creation of new social gatherings. The main interface is an interactive map that centers on the user's location, displaying all nearby events posted by other users. This platform empowers individuals to move beyond isolated digital interactions and form real-world connections, whether for board games, sports, movies, or arts and crafts.

3) Core Features 🛠️

MySpace provides the tools necessary to foster community connections:

Interactive Map & Pin Drop: Users are greeted by a Mapbox-powered map displaying local events. The core functionality allows users to drop a pin anywhere to instantly create a new event, defining its name, time, attendee limit, and choosing an emoji icon.

AI Event Generation: Leveraging the Google Gemini API, users can optionally generate an event description and details by simply stating their mood or desired activity, bypassing creative block and streamlining the event creation process.

Comprehensive Filtering: An event panel on the left allows users to filter events by category (e.g., Sports, Arts & Crafts) and view nearby events sorted by distance from their current location. Users can also manage events they have created.

Social Networking: Users can view the profiles of event creators, which display their bio, interests, and activity goals. They can send, accept, and manage friend requests, building their local social network.

4) How You Built Your Project 🏗️

MySpace was built as a modern, full-stack application leveraging scalable and flexible technologies.

Architecture: We utilized the MERN stack: React with Tailwind CSS for a fast, responsive, and aesthetically pleasing frontend; Node.js and Express.js for a robust and secure RESTful API backend; and MongoDB for flexible document-based data storage.

Mapping & Location: Mapbox was integrated to provide the core interactive map component. The application centers the map on the user’s current location and dynamically loads nearby event pins.

Core Functionality: User registration captures essential social data (bio, interests). The event creation pipeline handles map interaction, form submission, and storage of location data (latitude/longitude) for distance calculation.

5) Accomplishments We're Proud Of 🏅

We are most proud of:

  • Seamless AI Integration: Implementing the Google Gemini API to instantly transform vague user ideas into structured, appealing event listings, which significantly lowers the barrier to event creation.
  • Full-Cycle Location Management: Successfully integrating Mapbox Geocoding for address autofill, ensuring pin drops update the address field, and address input accurately re-positions the pin—providing a robust and intuitive system for defining event locations.
  • Responsive, Unified Design: Creating a single-page application with React and Tailwind CSS that fluidly manages complex data display (map, filters, profiles) and maintains a smooth, accessible user experience across various screen sizes.

6) What You Learned 🧠

Developing MySpace provided invaluable experience in full-stack architecture and leveraging generative AI for user engagement.

Geospatial Data Management: We gained deep expertise in integrating and manipulating the Mapbox API to handle dynamic, real-time geolocation. This involved calculating distance-based sorting and efficiently rendering hundreds of custom event markers on the map without sacrificing performance.

AI-Driven Creativity: Using the Google Gemini API taught us the nuances of prompt engineering. We learned how to structure concise system instructions to generate creative and relevant event ideas, such as a "Board Game Night" or a "Community Art Jam," based on a user's stated bio and interests, making the event creation process effortless and inspiring.

Real-time Full-Stack Synchronization: We solidified our understanding of the MERN (MongoDB, Express, React, Node) stack, focusing specifically on establishing a secure and performant system capable of handling complex filtering queries—such as simultaneously filtering events by category, sorting them by distance, and displaying the results seamlessly in the frontend UI.

7) Challenges You Faced 🚧

Our most significant challenges centered on data optimization and complex integration.

Social Networking Data Structure: Implementing the social features—sending and accepting friend requests, and securely displaying a user’s network—required careful design of the MongoDB schema. Managing the bidirectional status of these relationships (pending, accepted) and ensuring efficient lookups for a user's current friends list and pending requests proved to be a complex logical challenge that was critical for the application's success.

Mapbox State Management & Geocoding: A key challenge was synchronizing user input with the map display. We needed to implement robust autofill for addresses using the Mapbox Geocoding API. This required ensuring that when a user manually drops a pin, the corresponding address field is updated, and conversely, if a user enters an address, the map pin moves, and the stored latitude/longitude is updated to correctly determine distances for other users.

User Interface Flow: Designing a highly functional user interface that was intuitive for creating a new pin, managing friend requests, and filtering a large volume of events, all within a single-page application layout, required several iterations to ensure accessibility and a seamless user experience across mobile and desktop breakpoints.

8) What's Next 🚧

  • Event Popularity Heatmap: Implement a visualization layer over the Mapbox map to show a heatmap of popular event locations and times. This feature would leverage past event data to guide users towards areas with high community engagement, making it easier to find spontaneous social activity.
  • Group Chat Functionality: Introduce real-time group chat within each event page to allow confirmed attendees to coordinate and discuss details leading up to the gathering.
  • Gamified Event Badges: Create a system of digital badges or achievements for users who consistently create events, attend diverse types of gatherings, or successfully introduce new friends, encouraging active participation.
Share this project:

Updates