StemMatch

• 

  Home Page

• 

  Authentication Screen

• 

  Mentor Matching Screen

• 

  Profile Mentee Page

• 

  Profile Edit Screen

• 

  Mentee request screen

Inspiration

Women in STEM often struggle to find accessible mentors, especially in environments where role models and guidance may be limited. Many existing mentorship platforms rely on long directories or complicated sign-up processes that make mentorship discovery overwhelming. We wanted to rethink how mentorship connections are made by creating a platform that feels intuitive, modern, and approachable while still maintaining professionalism and intentionality.

What it does

StemMatch is a mentorship platform that helps women in STEM discover mentors through swipeable profile cards. Mentees can explore mentor profiles that highlight experience, interests, and compatibility. If a mentee is interested, they can send a mentorship request. Mentors then review incoming requests and decide who they’d like to mentor. Once accepted, the pair becomes a match and can begin messaging. This creates a structured yet engaging way to build meaningful mentorship relationships.

How we built it

StemMatch was built as a single-page web application using React and TypeScript with Vite for fast development. We designed modular components to keep the interface clean and reusable, including profile cards, avatars, and progress indicators. The application uses centralized state management to track users, mentorship requests, accepted matches, and messaging data. Tailwind CSS was used to quickly build a modern and responsive interface.

Challenges we ran into

One of the biggest challenges was designing a user experience that borrowed ideas from swipe-based apps while still keeping the platform professional and appropriate for mentorship. We also had to carefully think about how the mentor request system should work so mentors wouldn’t feel overwhelmed by requests. Structuring the application state for matches, requests, and messages was another challenge as we planned how these pieces would interact in a scalable way.

Accomplishments that we're proud of

We’re proud that we were able to turn a complex mentorship process into a simple and engaging experience. The swipe-based mentor discovery concept makes the platform feel modern while still supporting meaningful connections. We also built a clean and modular architecture that makes the project easy to extend with new features in the future.

What we learned

Through this project, we learned how important user experience design is when building platforms meant for human connection. We also gained experience building modular React components, managing application state, and designing systems that balance usability with meaningful interactions.

What's next for StemMatch

Next, we plan to add secure authentication, real-time messaging, and scheduling features so mentors and mentees can easily set up meetings. We also want to improve compatibility matching using smarter recommendation systems and expand the platform to include community discussions and mentorship progress tracking. Ultimately, our goal is to grow StemMatch into a platform that supports women throughout their entire STEM journey.

Built With

• node.js
• react
• swc
• tailwindcss
• typescript
• vite