ImpactHub

Inspiration

Students often struggle to showcase community service and volunteer work in a verifiable way due to the fragmented community service landscape with various charities having their own ways of showing recognition and many even having none. Community service rganizations and CSR initiatives also need a better way to recruit volunteers and track impact. ImpactHub addresses both by creating a "LinkedIn for Impact", a platform where students can build verified portfolios of community service while organizations can efficiently recruit talent and generate ESG data.

What it does

ImpactHub is a dual-sided platform connecting students and employees with CSR initiatives and volunteer opportunities. For students, it provides a centralized, verified "Impact Resume" that tracks completed projects, volunteer hours, and skills. For organizations and student leaders, it offers tools to post opportunities, recruit volunteers, and track impact metrics. The platform supports dual profiles, allowing users to both apply for opportunities and post their own projects. Key features include an opportunity marketplace with filtering, impact profile dashboards, project management for posters, and a system for tracking completed projects and volunteer hours.

How we built it

We built ImpactHub using Next.js 14+ with the App Router for server-side rendering and fast page loads. The frontend uses Tailwind CSS for styling and React for component architecture. We chose Supabase as our backend-as-a-service, leveraging its PostgreSQL database for data storage and its built-in authentication system. The database schema includes separate tables for applicant profiles and poster profiles, with a projects table that stores all unique opportunities. We implemented API routes in Next.js for authentication, profile management, and project CRUD operations. The platform uses a dual-profile system where users can have both applicant and poster profiles linked to the same authentication ID, enabling flexible user roles.

Challenges we ran into

One major challenge was designing a database schema that supports users having dual roles (both applicant and poster) while maintaining data integrity. We solved this by creating separate profile tables (applicant_profiles and poster_profiles) linked to the same auth_user_id. Another challenge was implementing the project tracking system, we needed to store project IDs in profile arrays while maintaining referential integrity with the main projects table. We also faced issues with Supabase client initialization in Next.js, which we resolved by implementing lazy initialization using a Proxy pattern. Additionally, converting static HTML mockups to dynamic Next.js components while preserving the original design required careful attention to component structure and state management.

Accomplishments that we're proud of

We're proud of creating a flexible dual-profile system that allows users to seamlessly switch between being an applicant and a poster. The impact profile dashboard successfully displays all user projects (completed, ongoing, and applied-to) in a beautiful masonry layout. We implemented a robust project management system where posters can create and manage opportunities, and the system automatically tracks project relationships in profile arrays. The opportunity marketplace includes location-based filtering using Google Maps API integration. We also successfully migrated from a single profiles table to separate applicant and poster tables while maintaining backward compatibility, and created comprehensive seed data for prototyping and testing.

What we learned

We learned the importance of designing flexible database schemas that can accommodate evolving user needs, the dual-profile system taught us to think about user roles as composable rather than exclusive. Working with Supabase and Next.js App Router deepened our understanding of server-side rendering and how to optimize data fetching. We gained experience with TypeScript for type safety across the application. The project also taught us about the complexity of building two-sided marketplaces, where we need to balance the needs of both students and organizations. We learned to prioritize core features (MVP) and document future enhancements rather than trying to implement everything at once.

What's next for ImpactHub

Our roadmap includes implementing the applications system (apply, accept, reject workflows), manual verification and impact hours tracking, a full poster dashboard with applicant management and analytics, QR code verification for event check-ins, and a messaging/notifications system for communication between applicants and posters. We also plan to add payment integration for paid gigs, group applications ("Squads"), enhanced filtering and search in the platform, mobile app development, and integration with social media platforms for sharing impact achievements.

Built With

• css
• eslint
• google-maps
• html
• next.js
• node.js
• react
• rest
• sql
• supabase
• tailwind
• typescript
• vercel
• vitest