MOSAIC

Inspiration

University society events are supposed to be some of the easiest places to meet people, but for a lot of students, they can feel awkward, overwhelming, and isolating. You show up, look around, and everyone already seems to know someone. Even when people do attend with the intention of meeting others, those interactions can feel random, surface-level, or hard to sustain.

We were inspired by the gap between attendance and actual connection. There are plenty of platforms that help people discover events, but very few that help people feel socially comfortable once they get there. The reality is that belonging is often the hardest part. Walking into a new environment alone can be intimidating, and many students leave events without forming any meaningful friendships at all.

We wanted to build something that made those first few social steps easier. Instead of leaving connection entirely to chance, we asked: what if students could meet the right people before the event even started? What if society events could feel less like a room full of strangers and more like a space you were already welcomed into?

That is where MOSAIC came from. We wanted to create a platform that helps students find their circle ahead of time, based on shared interests, personality, and social preferences, so that events feel more inclusive, less awkward, and more memorable from the moment they begin.

What it does

MOSAIC is a social matching platform for university society events. Students create a profile with a mix of personal details, interests, and personality-based preferences, then sign up for events hosted by societies. Based on that information, MOSAIC helps connect them with a small, compatible group before the event begins.

The goal is to remove the awkwardness of arriving alone and not knowing where to start. Instead of forcing students to navigate a completely unfamiliar social environment on their own, MOSAIC gives them a starting point: a small group of people they are more likely to get along with.

The platform combines a few key experiences. First, there is the profile system, which collects not just surface-level information like degree or year, but also the user’s interests, social energy, conversation style, and the type of people they are hoping to meet. Second, there is the event system, where students can browse and sign up for society events. Third, there is the matching and grouping experience, where users can view the people or groups connected to the events they have joined.

Together, these features transform a standard event listing platform into something much more socially intentional. MOSAIC is not just about showing people where to go. It is about helping them feel like they belong when they get there.

How we built it

We built MOSAIC as a full-stack web application using Next.js for the frontend, routing, and API structure, Tailwind CSS for styling, and Supabase for authentication, database design, and backend integration. We used a modular file structure so different parts of the application could be worked on more cleanly, especially across multiple pages like authentication, profile setup, events, matches, groups, and profile management.

A major part of the project was the profile onboarding flow. We designed this to collect information that would be useful for compatibility-based matching while still feeling engaging and intuitive for the user. That included a profile picture system, standard profile fields, multi-select interests, and several personality and social preference categories that feed into the broader logic of the app.

On the backend side, we structured our database around the main entities needed for the platform to function: user profiles, events, event attendees, match groups, and matches. This gave the project a clear foundation for scaling beyond a prototype. We also set up API routes to support profile saving, event retrieval, event sign-ups, group reading, and match reading, so that the frontend was connected to a realistic backend flow rather than existing as a purely visual mock-up.

We also put effort into making the app feel polished as a user experience. We wanted MOSAIC to feel warm, modern, and socially inviting rather than purely functional. A lot of our work went into making sure that the flow from login to profile creation to navigation across the app felt cohesive and believable as a product.

Challenges we ran into

One of the biggest challenges we faced was balancing ambition with feasibility. We wanted MOSAIC to feel like a real product rather than just a hackathon concept, which meant building both a polished user-facing experience and a backend structure that could realistically support the platform. That added complexity very quickly, because we were not just designing screens, but also thinking through how profiles, event attendance, matching, and group formation would all fit together.

Another challenge was deciding what kind of information to collect from users. Since MOSAIC relies on compatibility and social comfort, the profile system needed to gather enough detail to make matching meaningful. At the same time, asking too many questions would make onboarding feel long and tiring. We had to think carefully about which questions were actually valuable, how they should be phrased, and how to present them in a way that still felt approachable.

We also ran into integration challenges across the stack. Because different parts of the application depend on one another, small mismatches between the frontend, backend routes, and database schema could create larger issues. We worked through problems involving routing, local project setup, dependency installation, state persistence, middleware, environment variables, and keeping our Supabase schema aligned with the rest of the app.

On a broader level, one of the hardest challenges was that MOSAIC is built around human connection, which is much harder to design for than a purely functional workflow. It is one thing to make a system technically work, but another to make it feel socially natural and genuinely useful. We had to keep asking whether the experience would actually reduce awkwardness and help students feel more comfortable, not just whether the buttons and pages worked.

Accomplishments that we're proud of

We are proud that we built something that addresses a real student problem in a practical and relatable way. MOSAIC is not just another event discovery app; it tackles the social friction that often stops students from getting the full value out of university society events.

We are also proud of the overall product experience we created. From the login and signup flow to the profile setup journey, the navigation, and the dedicated event, match, and group pages, MOSAIC feels like a coherent platform rather than a disconnected set of screens. The app has a clear identity, a strong user flow, and a design that reflects the kind of welcoming experience we want students to have.

Another accomplishment we are proud of is the backend foundation we put in place. Even though the matching algorithm itself can continue to evolve, we built the surrounding structure needed to support it: user profiles, event sign-up logic, group data structures, and database-backed API routes. That gave the project a much stronger sense of realism and scalability.

Finally, we are proud of turning a socially sensitive idea into something that still feels simple and approachable. Making a product about friendship and belonging is not easy, but we were able to build something that feels both useful and human-centred.

What we learned

One of the biggest things we learned is that building a good product is not just about technical functionality. It is about understanding the emotional experience of the user. With MOSAIC, the real challenge was not simply creating forms, buttons, and pages, but designing around awkwardness, uncertainty, and first impressions. That pushed us to think more deeply about empathy in product design.

We also learned how important it is to keep the frontend, backend, and data model aligned from the start. As soon as one part of the system changes, it can affect everything else. Working on MOSAIC reinforced how valuable strong structure and consistency are when building a multi-page full-stack application.

As a team, we also learned how to divide responsibilities while still keeping the product cohesive. Different features can be built separately, but they still need to come together as one experience. That meant clear communication, quick iteration, and constant checking that what we were building still matched the overall vision of the app.

Most importantly, we learned that some of the most meaningful tech ideas are not about doing more, but about helping people feel more connected, comfortable, and included.

What's next for MOSAIC

The next step for MOSAIC is to complete the live matching workflow so that event sign-ups directly generate meaningful person-to-person or group-based recommendations. We want to make the full event journey seamless, from discovery to sign-up to social connection.

We also want to expand the society-facing side of the platform, allowing organisers to create and manage events directly, monitor attendance, and use MOSAIC as a tool for improving engagement and inclusivity at their events. This would make the platform useful not only for students attending events, but also for the societies running them.

Another area for growth is the overall social experience after matching. Adding expansive group messaging with image integration, richer profile customisation, and stronger event-specific interaction tools would make the platform feel even more alive and useful in practice.

Longer term, we see MOSAIC becoming more than just an event tool. It could become a broader campus community platform that helps students build friendships, find their place more quickly, and feel a stronger sense of belonging throughout university.

MOSAIC: Find your people before the event starts.