Give N Take

Public resources
Item giveaway
Profile page
Handout process

Inspiration

Friday, January 23rd. It is approximately -23 degrees out there, one of the coldest nights of the year. A friend and I are just leaving a comedy show: it was great, we had a good time! As we’re walking outside, we witness a couple of homeless people getting kicked out of the building we were in, and left to fend for themselves in these rough conditions. That’s where the idea for our app comes from: we as developers can use our powers to help the most vulnerable amongst us, in a significant and impactful way. Our initial idea was to build a web app that would help people experiencing homelessness locate nearby shelters, food banks, and public restrooms. We had already explored this idea before but it never came to fruition. We thought this is the time to see it through.

However, as we discussed the problem further, we realized that support does not only come from organizations. What if individuals also had an easy way to help? Many people discard perfectly usable items throughout the year, such as clothes, furniture, and electronics, items that could make a real difference in someone else’s life. Give N Take was born from this realization. Our goal is to strengthen community connections by making generosity accessible, while reducing waste and encouraging mutual support within local neighbourhoods.

What it does

Give N Take is a community-driven platform centered around an interactive map that connects givers and takers. Users can:

Give: Upload items they no longer need with photos, descriptions, and locations
Take: Browse available items on an interactive map and claim what they need
Connect: Build a culture of sharing and sustainability within their local community

The platform shows real-time locations of available items, making it easy to find and collect items nearby.

How we built it

Tech Stack:

Frontend: Next.js 14 with TypeScript and Tailwind CSS for a responsive, mobile-first interface
Authentication: Kinde for secure user authentication and authorization
Database: MongoDB for storing item listings, user data, and interactions
Storage: Firebase Storage for scalable image hosting
Mapping: Google Maps API for interactive map rendering and location services

Development Process:

Implemented Kanban boards for agile project management
Protected API routes and resources using Kinde authentication middleware
Built RESTful APIs for CRUD operations on items and user profiles
Integrated geocoding services for address-to-coordinate conversion
Designed a fully responsive UI that works seamlessly on mobile and desktop

Challenges we ran into

Git Merge Conflicts: Coordinating work across multiple team members led to complex merge conflicts that required careful resolution
Real-time Map Rendering: Optimizing performance when displaying hundreds of markers on the map while maintaining smooth interactions
Image Upload & Storage: Implementing reliable drag-and-drop file uploads with Firebase integration and proper error handling
Mobile Responsiveness: Ensuring all features, especially the map interface, work flawlessly across all screen sizes
Authentication Flow: Integrating Kinde authentication with Next.js App Router and protecting sensitive routes

Accomplishments that we're proud of

Successfully integrated a multi-platform tech stack (Next.js, Kinde, Tailwind, MongoDB, Firebase) into a cohesive, functional application
Created a beautiful, intuitive UI with consistent orange theming and smooth animations
Implemented full mobile responsiveness with drawer navigation and touch-optimized controls
Built a secure authentication system that protects user data and API endpoints
Delivered a working MVP within the hackathon timeframe with all core features functional
Achieved seamless real-time updates when items are posted or claimed

What we learned

The critical importance of defining clear requirements and project scope early in development
Effective git collaboration strategies to minimize merge conflicts in team environments
How to integrate multiple third-party services (Kinde, MongoDB Atlas, Firebase) into a unified application
Mobile-first design principles and responsive UI/UX best practices
The value of incremental development and testing features continuously rather than all at once
Working with modern React patterns like Server Components and Client Components in Next.js 14

What's next for Give N Take

Security & Safety:

Implement user verification and rating systems to build trust
Add in-app messaging for safe coordination of item pickups
Create safety guidelines and best practices for meetups

Privacy Enhancements:

Allow users to show approximate locations rather than exact addresses
Implement privacy controls for user profiles and listing visibility

Feature Expansion:

Expand beyond physical items to include community resources (free community centers, food banks, public services)
Add resource categories for services like tool lending, skill sharing, and community events
Implement notification system for nearby item postings matching user interests
Create community impact metrics showing total waste reduced and connections made

Platform Growth: