theCodeHood: Helping Developers Get Out From Behind the Screen

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

Hacktoberfest is back and while we love spending our days writing code and shipping PRs, this year it is something different! Week 1's theme is all about the most terrifying challenge of all the Vampires and Me: Touch Grass.

To help developers step away from the screen and connect with real people, I built TheCodeHood. TheCodeHood is a directory designed for introverts and beginners that helps you discover local tech communities and meetups. It takes your interests and location, and generates a personalized, offline community connection plan using an open-weight AI model. It doesn't shame you for loving online spaces—instead, it helps bridge the gap smoothly to real-world tech meetups, coworking spaces, and local developer coffee chats.

You can check out the live project repository and explore the code here. Hosted frontend and backend deployed via Render.

Demo

thecodehood.onrender.com

Code

amelia2802 / thecodehood

Find your neighborhood tech community

TheCodeHood 🏡

A community directory for developers and technologists to discover local meetups, build connections, and step away from the screen.

Repository: https://github.com/amelia2802/thecodehood

---

🌿 Hacktoberfest Challenge: Week 1 — Touch Grass

TheCodeHood Community Matchmaker

As part of the Hacktoberfest Open-Source AI Challenge (Week 1: Touch Grass), TheCodeHood introduces the Community Matchmaker—an AI-guided feature designed to help developers find practical, comfortable pathways to connect with tech communities in the real world.

✨ What It Does

• Low-Pressure Discovery: Tailored specifically for introverts, beginners, and seasoned builders alike. Never shames anyone for preferring virtual or self-paced participation.
• Micro-Goals: Provides a small, achievable offline challenge (e.g. visiting a local tech meetup, checking out a co-working space, or talking with one developer).
• Practical Preparation: Generates concrete steps, preparation checklists (with interactive completion checkboxes), and safety verification reminders.
• Grounded Source of Truth: Evaluates verified community listings in the directory as…

View on GitHub

The feature consists of:

• Frontend Component: A clean, accessible React component matching TheCodeHood's warm beige, brown, and cream palette, capturing user preferences (interest, location, format, social comfort level).
• Backend Endpoint: A lightweight Node.js + Express backend (POST /api/matchmaker) that securely interacts with Hugging Face Inference Providers.

How I Built It

For this challenge, I wanted to leverage open-weight models through the official OpenAI-compatible endpoint provided by Hugging Face Inference Providers ([https://router.huggingface.co/v1/chat/completions](https://router.huggingface.co/v1/chat/completions)).

Backend Setup: I built a secure Node.js and Express backend service. It stores the HF_TOKEN safely as a server-side environment variable—keeping all credentials entirely out of the client bundle.

Input Validation & Safety: The backend validates incoming user parameters (interest, location, social comfort) before forwarding a structured prompt to a reliable open-weight model.

Frontend Integration: In my React + Vite frontend, the matchmaker component handles loading states gracefully, displays the AI-generated encouraging recommendation, actionable steps, an offline challenge, and safety reminders, all while making sure users know these are AI-guided suggestions rather than verified live schedules.

My Agent Session

I built, tested, and verified this feature paired with an AI coding agent using DevRelay for community wisdom, security verification, and session preservation:

Building TheCodeHood Community Matchmaker (Hacktoberfest Week 1: Touch Grass)

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ browser_subagent {}

Input

{
}

Output

executed successfully

Agent

▸ view_file {}

Input

{
}

Output

executed successfully

Agent

▸ replace_file_content {}

Input

{
}

Output

executed successfully

Agent

▸ view_file {}

Input

{
}

Output

executed successfully

Agent

▸ view_file {}

Input

{
}

Output

executed successfully

Agent

▸ replace_file_content {}

Input

{
}

Output

executed successfully

Agent

▸ replace_file_content {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ view_file {}

Input

{
}

Output

executed successfully

Agent

▸ replace_file_content {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ browser_subagent {}

Input

{
}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ write_to_file {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

TheCodeHood Community Matchmaker

Built for the Hacktoberfest Open-Source AI Challenge (Week 1: Touch Grass) without changing your site’s color palette, typography, or existing design system.

---

📋 Summary of Changes

1. Backend Service (server/index.js & server/verifiedCommunities.js):

   • Created an Express backend with POST /api/matchmaker and GET /api/health.
   • Connected to Hugging Face’s official OpenAI-compatible router endpoint: https://router.huggingface.co/v1/chat/completions
   • Configured with open-weight model meta-llama/Llama-3.1-8B-Instruct (Llama 3.1 Community License; also supports Qwen/Qwen2.5-72B-Instruct via Apache 2.0).
   • Strict server-side storage of HF_TOKEN. No tokens are exposed to the client or frontend bundles.
   • Grounded with TheCodeHood's 8 verified directory listings from data.js as the source of truth, prohibiting invented groups, mock dates, or non-existent URLs.
   • Configured CORS for FRONTEND_ORIGIN and bound to the Render-provided PORT.

2. Frontend UI Component (CommunityMatchmaker.jsx):

   • Integrated seamlessly into App.jsx between the Hero and Catalogue sections.
   • Features the required heading: "Your next connection starts outside." and description: "Find your people, step away from the screen, and make something happen in real life."
   • Includes inputs for:
     • Interest: web development, AI, open source, cybersecurity, design, or other (with custom text entry).
     • Location: City, state, or ZIP code.
     • Preferred meetup: in-person, online, or either.
     • Social comfort: "I'm new to meetups", "I'm a little nervous", or "I'm ready to network".
     • Button: "Find my community plan".
   • Renders an AI-generated community plan with:

<truncated 3587 bytes>
README.md (Complete project and deployment documentation)

---

🚀 Commands & Render Dashboard Settings

Local Development

1. Start backend: bash npm run server
2. Start frontend in a separate terminal: bash npm run dev
3. Run tests: bash npm run test:matchmaker

Render Deployment Instructions

1. Backend Web Service

• Type: Web Service
• Name: thecodehood-api
• Build Command: npm install
• Start Command: npm run server
• Environment Variables:
  • HF_TOKEN: hf_... (Your free Hugging Face User Access Token)
  • FRONTEND_ORIGIN: https://thecodehood.onrender.com (Your deployed frontend URL)
  • HF_MODEL: meta-llama/Llama-3.1-8B-Instruct
  • (Render automatically provides PORT)

2. Frontend Static Site

• Type: Static Site
• Name: thecodehood
• Build Command: npm run build
• Publish Directory: dist
• Environment Variable:
  • VITE_API_URL: https://thecodehood-api.onrender.com (The URL of your backend service from Step 1)

---

🌐 Community Wisdom

• Replayable Node.js Content Moderation Contracts for JSON Chat Completions by Briar Voss — Highlights the importance of treating model inputs as typed authorization boundaries and enforcing defensive parsing of structured JSON completions.
• Integration with Hugging Face Inference API by Zsevic — Details reliable patterns for managing Hugging Face token boundaries on Express backends without exposing private tokens to web clients.

---

📝 Next Steps & Preserving Progress

Would you like me to draft an initial post on DEV (published: false) sharing your Hacktoberfest Week 1: Touch Grass implementation, or preserve this session transcript to your connected DEV account?

Show more

You

<USER_REQUEST>
preserve this session transcript to your connected DEV account and enter it in any sponsor challenges it fits.
</USER_REQUEST>
<ADDITIONAL_METADATA>
The current local time is: 2026-10-11T11:14:46+05:30.

The user's current state is as follows:
Active Document: [REDACTED]\projects\thecodehood\Technical-spec.md (LANGUAGE_MARKDOWN)
Cursor is on line: 296
Other open documents:
- [REDACTED]\projects\thecodehood\Technical-spec.md (LANGUAGE_MARKDOWN)
Browser State:
Page EDA7F6758CAF9BC766C65BD0C6C13830 (thecodehood) - http://localhost:5173/ [ACTIVE]
Viewport: 1536x730, Page Height: 3451
</ADDITIONAL_METADATA>

Show more

Agent

▸ view_file {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ manage_task {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ view_file {}

Input

{
}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

Agent

▸ run_command {}

Input

$ {}

Output

executed successfully

50 of 50 messages

Why Does Open Innovation Matter?

Open innovation and open-weight models are game-changers for projects like TheCodeHood. Relying on closed, proprietary APIs locks developers into rigid pricing tiers and opaque ecosystems. By using open-weight models through Hugging Face, I have full transparency, flexibility, and control over how the AI behaves and what data it processes. It empowers indie developers and open-source contributors to build creative, community-focused tools without sacrificing privacy or being tied down by vendor lock-in.

Prize Categories

• Best Use of Render: TheCodeHood is architected as a two-tier decoupled deployment on Render—running the React client on a Render Static Site and the inference proxy on a Render Web Service. This cleanly isolates server-side HF_TOKEN credentials from the browser bundle while taking advantage of Render's automated process.env.PORT assignment, CORS headers, and zero-downtime deploys.

While building the AI matchmaker and setting up the Express backend, I learned a few cool things:

• Hugging Face Router API: Learned how to seamlessly call open-weight LLMs via Hugging Face’s OpenAI-compatible chat completions endpoint.
• Secure Node/Express Architecture: Kept private keys off the frontend by creating a lightweight POST /api/matchmaker endpoint.
• CORS & Environment Variables: Configured cross-origin requests cleanly between my Vite deployment and Render Web Service backend using environment variables like VITE_API_URL.
• Introvert-First Prompt Engineering: Crafted system prompts that generate encouraging, low-anxiety offline challenges instead of intimidating networking advice.