Campus Exchange

CampusExchange — where students buy, sell, and swap pre-loved items with ease. A smarter and more sustainable way to pass it on, right on campus.

Comment

About CampusExchange

Inspiration

As a student, I was frustrated by the waste I saw everywhere on campus: half-used notebooks tossed in bins, calculators gathering dust, and branded school apparel discarded at semester’s end. Schools generate staggering amounts of stationary and paper waste—Americans alone use 31.5 million tons of printing and writing paper each year (660 lbs per person) which requires 535 million trees to produce :contentReference[oaicite:0]{index=0}. Plastic pens, rulers, and binders contribute to marine pollution, with over 75% of marine debris originating from improper disposable stationery :contentReference[oaicite:1]{index=1}.

It’s not just paper and plastic: the fashion industry produces 92 million tonnes of textile waste every year, and 85% of garments end up in landfills—while washing clothes releases half a million tons of microfibres into our oceans annually :contentReference[oaicite:2]{index=2}. On the electronics front, global e‑waste reached 62 million tonnes in 2022—just 22.3% was properly recycled, leaving billions of dollars’ worth of precious materials to poison landfills :contentReference[oaicite:3]{index=3}.

In May 2025, Yale–NUS College triggered widespread outrage when NUS quietly discarded 9,000 library books—many in perfect condition—without offering them for reuse or donation. Students and alumni condemned the “opaque decision‑making” and lack of accountability :contentReference[oaicite:4]{index=4}. This incident crystallized the problem: valuable resources and knowledge go to waste due to information asymmetry and a lack of simple reuse platforms.

Beyond material waste, students struggle with information gaps for other campus needs—finding teammates for competitions, borrowing equipment, or swapping study materials. I envisioned CampusExchange as a single hub where these needs converge: a Carousell‑style marketplace tailored to student life.

What I Learned

  • Environmental Impact: Researching waste statistics deepened my understanding of how even small, day‑to‑day disposables add up to a global crisis.
  • User Pain Points: Surveys and informal chats with classmates highlighted the frustration of lost items, unused resources, and missed opportunities to collaborate.
  • Full‑Stack Development: I mastered how to wire up a React frontend to Supabase for database and auth, and deploy seamlessly to Netlify.
  • Design for Students: Crafting a mobile‑first UI taught me how to prioritize simplicity and accessibility for on‑the‑go users.

How I Built It

  1. Tech Stack:
    • Frontend: React + Tailwind CSS for a clean, responsive UI.
    • Backend & Auth: Supabase (PostgreSQL) to store users, listings, messages, with built‑in email/password authentication.
    • Hosting: Netlify for continuous deployment and serverless functions.
  2. Core Features:
    • Listings: CRUD for items with multiple images, categories, conditions, and “free” options.
    • Search & Filters: Keyword search and category filters (Books, Electronics, Clothing, Stationery, Tools, Appliances, Instruments, Games, Bags, Others).
    • Profiles & Ratings: User profiles with avatars, bios, active listings, and seller ratings.
    • Favorites & Chat: Bookmark items and in‑app messaging to coordinate meetups.
  3. Workflow:
    • Designed database schema in Supabase, then used Bolt’s AI “vibe coding” to scaffold React pages, API calls, and auth flows.
    • Styled components with Tailwind and followed Carousell’s card‑based layout for listing feeds.
    • Deployed with one click to Netlify using Bolt’s integration; configured environment variables for Supabase endpoints.

Challenges Faced

  • Data Modeling: Balancing flexibility (free‑text descriptions, multiple categories) with performance required careful schema design.
  • Image Uploads: Handling multiple file uploads and secure storage in Supabase Storage.
  • Real‑Time Chat: Implementing real‑time messaging subscriptions so conversations felt instantaneous without overloading the client.
  • User Onboarding: Ensuring email signup flows were smooth and included password resets and confirmation.
  • Design Consistency: Adapting Carousell’s aesthetic to a campus theme while keeping the interface intuitive for students.

CampusExchange emerged from the need to turn waste into opportunity—bridging information gaps, fostering community reuse, and reducing campus waste one listing at a time.

Built With

  • css
  • db
  • javascript-frontend-react
  • language-typescript
  • lucide-react
  • storage
  • supabase
  • vite
Share this project:

Updates