HobbySwap

Matches Page --> see potential swaps
Profile Page --> edit your info & hobbies
Sent Page --> see swaps you've requested
Search Page --> search for a person, hobby, place, or other qualities
Received Page --> see swaps you've received

Inspiration

HobbySwap was born from a simple yet profound realization: in our hyperconnected digital world, we've somehow lost the art of meaningful, skill-based human connection. I was inspired by how us Cornellians want to maximize our productive output, but we rarely leave room for hobbies. The concept of hobby exchange isn't new but we wanted to bring it into the modern age in a way that is accessible and safe.

What it does

We wanted to create a platform where someone who's passionate about photography could find someone eager to learn it, while simultaneously discovering someone who could teach them guitar. It's about mutual growth, community building, and the beautiful dance of teaching and learning.

How we built it

Frontend: Next.js 15 with TypeScript for type safety and performance Backend: Node.js with Express, creating a robust API that handles everything from user authentication to complex matching algorithms Database: MongoDB for flexible, document-based data storage Styling: Tailwind CSS for rapid, beautiful UI development

Challenges we ran into

Semantic Search Algorithms: It was difficult deciding on how to design the algorithm as we had limited experience. We tried to implement a categorizer using Gemini, but was unsuccessful and had to resort to a similar keyword semantic search algorithm.
API Integration: There was a lot of trial and error integrating with ImgBB for image hosting. We initially struggled with API authentication, request formatting, and handling different image formats. The free tier limitations also required us to implement aggressive image compression to stay within size limits.
State Management Complexity: Managing real-time updates across multiple components while keeping the UI synchronized with backend data was challenging. We had to implement custom hooks and context providers to handle favorites, swap requests, and profile updates without creating infinite re-render loops.
Cross-Origin Resource Sharing (CORS): Configuring proper CORS policies between our frontend and backend to allow secure API calls while maintaining security was a recurring challenge during development.
Third-Party API Integration: Finding and implementing ImgBB as a free image hosting solution, learning to work with external APIs for reliable, scalable image storage without the overhead of managing our own file system

Accomplishments that we're proud of

We were really proud of how we were able to handle logins and registration and handle user data in a way that synced all across our devices. This was super impressive and what we were building felt really real. Seeing users create accounts, upload profile pictures, and have their data instantly available across different sessions made HobbySwap feel like a genuine social platform.
Building a Complete Full-Stack Application - Successfully created a production-ready platform with user authentication, profile management, real-time data synchronization, and complex matching algorithms. The satisfaction of seeing every piece work together seamlessly was incredible.
Creating Intelligent Matching - Developing a semantic matching system that goes beyond simple keyword searches to understand hobby relationships was my proudest technical achievement. Seeing it correctly match users based on transferable skills felt like magic.
Finding and Using a Random API - Finding ImgBB as a free image hosting solution and implementing a robust image processing pipeline saved us significant costs while providing users with a seamless upload experience.

What we learned

Building HobbySwap was a masterclass in full-stack development. We dove deep into: Live Database Synchronization:

Creating a real-time system where user profiles sync seamlessly between frontend and backend
Building a live database of passionate hobby enthusiasts that updates instantly across all users Advanced React Patterns: Complex state management with custom hooks, context providers, and the delicate art of keeping UI and data in perfect sync Semantic Search Algorithms: Creating a sophisticated matching system that goes beyond simple keyword matching to understand the relationships between hobbies Third-Party API Integration: Finding and implementing ImgBB as a free image hosting solution, learning to work with external APIs for reliable, scalable image storage without the overhead of managing our own file system Database Design: Crafting MongoDB schemas that balance performance with flexibility, handling complex user interactions and relationships

What's next for HobbySwap

Mobile App Development: Creating iOS and Android versions to make HobbySwap accessible everywhere
Enhanced Matching: Implementing machine learning to improve match quality based on user interactions
Real-time Chat: Adding instant messaging so matched users can communicate directly on the platform
Video Integration: Allowing users to share short skill demonstration videos
Scheduling System: Allowing users to see availability and connect directly to Google Calendar