SkillSwap

"The skill swap is the excuse. Human connection is the product."

Comment

SkillSwap

The skill swap is the excuse. Human connection is the product.

Inspiration

We live in an age of infinite connection — 500 friends on Facebook, 2,000 followers on Instagram — yet genuine neighbourly relationships have evaporated. Studies show that in most developed cities, people can no longer name a single neighbour who lives within two doors of them.

This isn't just sad; it's actively harmful. Loneliness is now classified as a public health risk comparable to smoking 15 cigarettes a day.

I built SkillSwap because I believe the solution isn't another social app that optimises for engagement time. It's an app that optimises for depth — one intentional, face-to-face conversation at a time.

The behavioural insight underneath the whole project: people want to slow down and meet their neighbours, they just need a legitimate reason to do it. A leaky faucet, a website that needs designing, a Spanish lesson — those are the excuses we hand them.

What it does

SkillSwap is a neighbourhood skill-exchange platform with one deliberately counter-intuitive rule: you cannot exchange a skill until you've met for coffee first.

The mandatory coffee meeting isn't a friction point — it's the entire value proposition. It elegantly solves three problems at once:

  • Verification — face-to-face meeting confirms identity
  • Safety — public, neutral location
  • Loneliness — structured social interaction people secretly want

The user journey is four simple steps:

Create Profile → Discover Neighbours → Meet for Coffee → Swap Skills
  1. Create Profile. Pick the skills you offer and the skills you need. Share your location.
  2. Discover Neighbours. See real people within ~2 miles whose skills complement yours.
  3. Meet for Coffee. Both parties express interest, then propose a public meeting spot.
  4. Swap Skills. Both confirm the meeting happened. Only then is the skill swap unlocked.

A demo account and one-click "add demo neighbours" button let a single user experience the entire flow without needing a friend on the other end.

How we built it

Frontend: Vite + React + TypeScript + Tailwind + shadcn/ui — chosen because speed of iteration mattered more than framework novelty.

Backend: Express with sql.js (WASM SQLite) — the entire app runs in a single container with no external database dependencies. Perfect for rapid prototyping and zero-config demos.

Auth: JWT tokens with jsonwebtoken, password hashing with bcryptjs, route guards for protected pages, axios interceptors for automatic token attachment and 401 handling.

Approach: I worked with MeDo as a technical co-founder rather than a code generator. I described problems in plain language, MeDo reasoned through architecture and implementation, and we iterated feature-by-feature. I stayed in product-owner mode while MeDo handled the implementation details.

Challenges we ran into

The 30-Second Timeout Mystery

The most impressive technical outcome wasn't a user-facing feature — it was solving a sandbox platform bug that would have killed the app in production.

The symptom: Registration worked perfectly on my local machine but timed out with timeout of 30000ms exceeded on the Medo sandbox URL.

The detective work:

  1. MeDo traced the request path: Browser → Medo platform gateway → Vite dev server (port 50000) → Express API (port 3001)
  2. We discovered the Medo platform runs express.json() before proxying requests to Vite. This middleware consumes the entire POST request body into req.body, leaving the proxied stream empty.
  3. When Vite's built-in proxy forwarded the now-empty stream to Express, Content-Length still claimed 70 bytes existed. Express's body-parser dutifully waited for those bytes. They never arrived. 30-second hang.

The fix (three layers):

  1. A custom apiProxyMiddleware in Vite's configureServer that intercepts /api/* requests before the built-in proxy, reconstructs the body from the pre-parsed req.body object, and sends a complete fresh HTTP request to Express.
  2. A URL-encoded axios interceptor that converts every mutation payload to application/x-www-form-urlencoded. The platform has no urlencoded parser, so the body stream passes through untouched — a graceful fallback.
  3. A self-destructing service worker that deletes all caches and unregisters itself on the next page load, ensuring no stale JavaScript bundles (from before the interceptor existed) can survive in the browser.

This wasn't in any tutorial. It required understanding Node.js stream mechanics, http-proxy-middleware internals, browser service worker lifecycle rules, and Vite's dev server architecture — and MeDo reasoned through all of it step by step.

Designing Friction on Purpose

Every UX instinct screams reduce friction. SkillSwap's whole thesis is the opposite. The challenge was making the mandatory coffee meeting feel like a feature, not a roadblock — through copy, design, and pacing that frame slowing down as the point.

Accomplishments that we're proud of

  • A working "slowness" app in a world of speed. Every other app optimises for engagement time. SkillSwap optimises for depth.
  • Solved the 30-second timeout at the platform layer — a real production-grade fix that wasn't in any documentation.
  • Single-click full-flow demo. Judges and testers can experience profile → match → coffee → confirm → swap on their own, without needing a second user.
  • Zero-config setup. WASM SQLite means no database to provision, no environment variables to wrangle. It just runs.
  • Design that reinforces the thesis. The hero, the "Why Coffee?" section, the testimonials, the discover page — every surface tells the same story: human connection is the product.

What we learned

  • Behavioural design beats feature lists. The "coffee-first" rule is a single sentence, but it shapes the entire product.
  • Stream mechanics are still where the dragons live. The timeout bug taught me how proxy middleware, Content-Length, and body parsers actually interact under the hood.
  • AI works best as a thinking partner, not a vending machine. The biggest wins came from describing problems and trade-offs in plain language and letting MeDo reason through them, not from asking for finished code.
  • Friction can be the feature. Slowness, when framed correctly, is what users actually want — they just rarely get to admit it.

What's next for SkillSwap

  • Real-time chat between matched users with push notifications
  • Verified meeting check-ins via geolocation or QR code at coffee shops
  • Neighbourhood circles — opt-in groups for buildings, blocks, or streets
  • Skill reputation that grows from completed swaps, not stars
  • Local cafe partnerships — a "SkillSwap meeting here" badge for participating coffee shops
  • Mobile native apps for iOS and Android, with deep PWA install prompts in the meantime

How I Structured Conversations with MeDo

My approach with MeDo was iterative and conversational, treating the AI as a technical co-founder rather than a code generator. I started with the core concept and worked outward:

1. Concept & UX First

I described the human problem (neighbourhood isolation) and the behavioural insight (people need a legitimate reason to meet strangers). MeDo helped me shape the "coffee-first" rule into a full four-step user journey:

Create Profile → Discover Neighbours → Meet for Coffee → Swap Skills

2. Architecture Decisions

Rather than accepting a default stack, I discussed trade-offs.

  • Frontend: Vite + React + TypeScript + Tailwind + shadcn/ui — speed of iteration mattered more than framework novelty.
  • Backend: Express with sql.js (WASM SQLite) — the entire app runs in a single container with no external database dependencies. Perfect for rapid prototyping.

3. Feature-by-Feature Builds

I would describe a page or flow in plain language ("I want a split-panel login page with a demo account button"), and MeDo would build it, explain the design choices, and suggest improvements. This let me stay in product owner mode while MeDo handled implementation details.

4. Debugging as Dialogue

When things broke, I shared the exact error output (console logs, network traces, curl responses) and MeDo diagnosed root causes systematically. The most complex debug session — the 30-second registration timeout — required three rounds of hypothesis, test, and refine before we found the actual cause.

How I Used MeDo's Skills and Integrations

I leveraged MeDo's built-in Login skill to scaffold the complete authentication system:

  • JWT-based token generation with jsonwebtoken
  • bcrypt password hashing with bcryptjs
  • Route guards (RequireAuth, RedirectIfAuth) for protected pages
  • Email/password registration and login with proper validation
  • Axios interceptors for automatic token attachment and 401 handling

The Login skill gave me a production-ready auth foundation in minutes rather than hours. From there, I extended it with app-specific touches:

  • A one-click "Fill demo credentials" button on the login page (pre-created [email protected] / demo1234)
  • Live password-strength feedback on registration
  • Rotating member quotes to make the auth experience feel warm and human rather than clinical

What Makes This Different

Most skill-exchange apps treat the transaction as the goal. SkillSwap treats the transaction as the excuse. The mandatory coffee meeting isn't a friction point — it's the entire value proposition. Every design decision reinforces this:

  • The hero manifesto: "The skill swap is the excuse. Human connection is the product."
  • The "Why Coffee?" section explicitly states: "Every other app tries to save you time. We intentionally slow you down."
  • Testimonials highlight friendships formed, not skills learned.
  • The discover page shows real neighbours within 2 miles, making the proximity feel tangible.

MeDo didn't just build an app for me. It helped me think through the behavioural psychology of why people don't talk to their neighbours, and then build technology that solves the human problem first and the technical problem second.

Try It

🔗 Live demo: https://app-bqd5uvabd5hd.appmedo.com

Demo account:

Built With

Share this project:

Updates

Submission history