Inspiration

The idea for UMap was inspired by the desire to foster a connected and engaging campus experience at UMass Amherst. We noticed that students often miss out on events simply because they’re unaware of them or struggle to find details easily. We wanted to create a platform where students can seamlessly discover campus activities, navigate with ease, and build connections with peers who share similar interests.

What it does

UMap is an interactive campus map designed exclusively for UMass Amherst students. Key features include:

Real-Time Event Map: Displays ongoing and upcoming events as interactive pins on a dynamic campus map.

Personalized Recommendations: Provides event suggestions based on user preferences and past activity.

How we built it

UMap was developed using:

Figma: We build the prototype from Figma and convert it into HTML/CSS Code

Frontend: Built with React for a responsive and interactive user experience.

Backend: Powered by Node.js, with data stored in a PostgreSQL database.

Challenges we ran into

Figma to Code Conversion: Translating our Figma design into a functional website presented unexpected difficulties. The exported code wasn’t entirely compatible with the setup, so we needed to manually adjust and refactor parts of it to align with structure and syntax.

Learning Curve with New Tools: As a team new to this kind of project, there was a learning curve. Understanding how to set up framework, work with new libraries, and manage project files took time and required research, trial, and error.

Frontend and Backend Integration: Integrating the frontend with the backend required setting up smooth data flow and secure connections, which proved challenging. Ensuring reliable API calls and data synchronization between both ends took time to perfect.

Accomplishments that we're proud of

Successful Frontend-Backend Integration: Despite initial challenges, we successfully integrated the frontend and backend, achieving a seamless and responsive user experience.

Interactive and Personalized Event Mapping: We’re proud of implementing a dynamic map that personalizes event recommendations and allows students to interact with real-time campus events.

What we learned

Effective Problem Solving: Overcoming setup issues and integration challenges strengthened our problem-solving skills and adaptability.

Importance of User-Centric Design: We gained a deeper understanding of designing with the end user in mind, especially in personalizing features and ensuring ease of navigation.

New Tools and Technologies: Working with frontend-backend integration, AR navigation, and data-driven recommendations broadened our technical knowledge.

What's next for UMap

Crowd Density and Real-Time Feedback: Adding real-time crowd density visualization and live feedback to enhance event discovery.

Enhanced Social Features: Implementing “RSVP with Friends” and event chats to boost social engagement.

Expanded Campus Service Integration: Incorporating campus news, dining options, and shuttle tracking for a more comprehensive student experience.

Built With

Share this project:

Updates