CampusCircle

Inspiration

As UCI students and college students in general, it can be difficult finding a social community on campus to a part of or hear about events happening on campus. It is often only by word of mouth that is news is spread or you have to filter through a variety of social media platforms from a variety of club accounts. Previously, we had Campus Groups, an app that tries to serve as a centralized platform for clubs, but remains unpopular and difficult to use. The difficulty of finding events and lack of centralized social media platform inspired us to create CampusCircle: a platform designed to bridge that gap by offering a comprehensive solution where students can discover a wide range of club events tailored to their interests, compete on leaderboards, and stay informed with the latest updates. With our real-time updates and builtin Google Map component, our goal is to foster a more connected and vibrant campus community, making it easier for students to engage and thrive at UCI.

What it does

CampusCircle is an all-in-one platform designed to transform campus life at UCI by connecting students with a diverse array of club events and activities tailored to their interests. Users can effortlessly discover current and upcoming events, join various clubs, and participate in groups. The app features a dynamic leaderboard system that fosters friendly competition among students, an integrated map to locate events easily, and a news section for the latest updates on club activities. CampusCircle also offers different roles for participants and clubs, allowing clubs to create groups and participants to join multiple groups.

How we built it

Building CampusCircle was a collaborative effort that leveraged a robust tech stack to create a seamless and engaging user experience. We started with Figma to design the application, ensuring a user-friendly and visually appealing interface. For the frontend, we utilized HTML, TypeScript, TailwindCSS, and AceternityUI to craft a responsive and attractive UI. Using Next.js and React, we ensured our application was fast, scalable, and easy to navigate. Shadcn provided additional components to enhance user interaction. On the backend, we implemented Leaflet for interactive maps and FastAPI to handle our API requests efficiently. Supabase served as our database management solution, offering real-time capabilities and seamless integration with our frontend. Neo4j, with its powerful graph database capabilities, allowed us to form complex relationships between nodes, such as students, clubs, and events, facilitating rich, interconnected data queries through Cypher.

Challenges we ran into

During the development of CampusCircle, we faced several challenges, including formatting the scroll area Shadcn component to prevent it from going out of view. Additionally, integrating Neo4j as a new database presented challenges, especially in ensuring real-time data updates and incorporating Leaflet as an interactive map. This required us to rethink our data modeling and update strategies to accommodate the graph database structure and integrate Leaflet for dynamic mapping functionalities.

Accomplishments that we're proud of

We are incredibly proud of our ability to seamlessly translate our Figma designs into functional code, ensuring that the user interface and experience are consistent and intuitive. Incorporating pins in Leaflet was a challenging yet rewarding feat, as it allows users to interact with the map and visualize the exact location of events they are interested in attending. This feature not only enhances the user experience but also provides valuable information that helps users make informed decisions about their participation. Additionally, our functional backend ensures that all data is managed efficiently and accurately, while our usable UI/UX design makes navigating the platform as easy as possible.

What we learned

Learning and applying this tech stack to build a fully functional, deployed application for CampusCircle has been incredibly rewarding. From Figma for design to implementing complex features like interactive maps with Leaflet and real-time data management with Neo4j, every step presented new challenges and learning opportunities. Navigating through frontend technologies like HTML, TypeScript, TailwindCSS, and AceternityUI, and backend tools like FastAPI, Supabase, and Neo4j, required a deep dive into their ecosystems. Despite the challenges, our team embraced these challenges with passion as we were eager to expand our skills and knowledge.

What's next for CampusCircle

Our vision for CampusCircle is to make it a reality for UCI students, offering a platform that enhances campus life and fosters community. We plan to carry this project forward as a personal project, refining and expanding it to meet the needs of our users. Additionally, we aim to pitch our idea and application to various Software Development Clubs, seeking collaboration and support to make CampusCircle a reality for UCI students. By doing so, we hope to create a campus that is more vibrant, welcoming, and connected, to enhance the overall student experience at UCI.