Inspiration
The inspiration behind our project stemmed from the critical need to ensure that CUNY students are fully aware of the essential health and wellness resources available to them. Recognizing the challenges students face in navigating campus services, we envisioned a gamified, interactive platform that not only makes these resources accessible but also engages students in a meaningful way. Our goal is to empower every student to take control of their well-being by making vital information easy to find and fun to explore.
What it does
Our application is a React/Next.js platform that integrates Google Maps Street View to create an interactive, virtual campus. Students can navigate through this virtual space to discover health resources like counseling services, mental health support, and food security options. The platform turns the process of finding these services into an engaging adventure, where students complete quests, earn points, and climb leaderboards, all while learning about the support available to them. It’s a unique blend of education and entertainment designed to enhance student well-being.
How we built it
We built this application using Flask for the backend and React/Next.js for the frontend. The Google Maps API, specifically the Street View and Aerial View feature, was integrated to provide an immersive exploration experience. The backend, utilizing Flask and PHP MyAdmin, handles user authentication, quest logic, and data management, ensuring a seamless flow of information between the server and the client. Our development process was a collaborative effort, focusing on creating a responsive, user-friendly interface that engages students from the moment they log in.
Challenges we ran into
Throughout development, we encountered several challenges, particularly with the integration of the Google Maps Street View API. Ensuring a smooth, responsive user experience while loading complex 3D environments required careful optimization. We also faced issues with the routing of certain components, especially leaderboard and quests. This was handled via constant communication between frontend and backend developers, as well as very detailed documentation created by the gifted Jay Noppone. We also faced difficulties in balancing the gamified elements with the educational content, striving to maintain both engagement and clarity. Additionally, managing real-time updates for the leaderboard and quest progress introduced complexity that tested our backend and frontend integration.
Accomplishments that we're proud of
We’re proud of creating a platform that not only meets the project’s core objectives but also provides an innovative solution to an important issue. Our successful integration of Google Maps Street View into a React application stands out as a technical achievement, as does our ability to make the discovery of essential resources both engaging and informative. On the collaboration side, we are pleased with the outcome of our project and the several meetings we held to work out everyone's skillsets and task allocations before the hackathon started. Notion was our primary source of collaboration, where Jawad placed drafts of what he envisioned the project would look like. We’re particularly proud of the teamwork and collaboration that allowed us to overcome technical challenges and deliver a polished, functional product.
What we learned
This project was a tremendous learning experience for our team. We deepened our expertise in React, Next.js, and Flask, and gained valuable experience in integrating third-party APIs like Google Maps. For myself, Jawad, I was mostly experienced in backend development via Flask and FastAPI. This was a wonderful opportunity for myself to explore frontend development by creating react components and bundling them inside Nextjs pages. Also, handling HTTP requests was something the team all learned as we developed multiple endpoints. Finally, this project reinforced the value of collaboration, problem-solving, and adaptability in the face of technical challenges.
What's next for our project
Looking forward, we plan to expand the platform by adding more quests and enhancing the gamified elements to cover a broader range of resources, including financial aid and academic support services. We also aim to introduce this product to other campuses like CUNY Baruch and CUNY City Tech. Ultimately, we envision this platform becoming a go-to resource for all CUNY students, helping them navigate their college experience with confidence and support.
Built With
- Frontend: React, Next.js, Google Maps API (Street View)
- Backend: Flask, PHP MyAdmin
- Task Management: Notion
Built With
- chromadb
- cuny
- flask
- google-maps
- langchain
- mysql
- nextjs
- openai
- phpmyadmin
- react
Log in or sign up for Devpost to join the conversation.