DEV Community: Amelia Dutta

theCodeHood: Helping Developers Get Out From Behind the Screen

Amelia Dutta — Sun, 11 Oct 2026 05:55:45 +0000

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

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.
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

Start backend: bash npm run server
Start frontend in a separate terminal: bash npm run dev
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?

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>

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

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.

A Step-by-Step Guide to Create a Speaking Practice App with AWS Bedrock

Amelia Dutta — Wed, 07 Oct 2026 06:20:03 +0000

Have you ever felt that rock climbing is easier than starting a conversation? Or does an unexpected speaking invitation make your mind go blank or cause you to sweat, even in November? If so, you're not alone. This is called Glossophobia or Speaking Anxiety, which is the most common phobia. Several treatments are available, and you should consult a specialist if it affects your daily life.

In this article, we'll explore how AI can help us create an application to address this issue using AWS Bedrock.

[NOTE: This app doesn't treat the issue. It is just for developing good speaking habits and providing tips.]

Why a Speaking Practice App?

Research shows that knowing your material beforehand, rehearsing your scripts until you memorize them, and continuing to practice until you are comfortable with what you say can help treat speaking anxiety.

Why AWS Bedrock?

Amazon Bedrock is a fully managed service that provides high-performing foundation models (FMs) from top AI companies like AI21 Labs, Anthropic, Cohere, Meta, Mistral AI, Stability AI, and Amazon through a single API. It offers the capabilities needed to build generative AI applications with security, privacy, and responsible AI. It is also easy to use and beginner-friendly. By using AWS Bedrock, we can ensure our app is efficient, reliable, and easy to integrate with other AWS services.

Prerequisites

To follow along with this tutorial, you will need:

Basic knowledge of JavaScript/ES6
Node.js and npm installed on your machine
AWS credentials (access key ID and secret access key)
Familiarity with AWS Bedrock
Access to the Claude-v2 model

Let's Begin!

Setting Up the Project

First, let's set up our project on the local machine:

Create a new directory and navigate into it:

mkdir speaking-practice-app
cd speaking-practice-app

Initialize a new Node.js project:

npm init -y

Install the required dependencies: Install Vite for fast development and @aws-sdk/client-bedrock-runtime for running inference using Amazon Bedrock models.

npm install vite @aws-sdk/client-bedrock-runtime

Creating the User Interface

For the next steps, you can either follow the instructions or clone the entire application from here: https://github.com/amelia2802/glossocure

Create an index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Speaking Practice App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>GLOSSOCURE</h1>
  </header>
  <main id="app">
    <section id="daily-text">
      <section class="head-component">
        <h2>Read Aloud 🔊</h2>
        <button id="getNewParagraph">Get New Paragraph</button>
      </section>
      <article id="paragraph">...</article>
    </section>
    <section class="daily-tips">
      <h3>Daily Tips 💡</h3>
      <p id="tips"></p>
    </section>
  </main>
  <script type="module" src="main.js"></script>
</body>
</html>

Add CSS styling in style.css:

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.968);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: block;
}

header {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  box-shadow: 10px 0 10px rgb(243, 239, 61);
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

#app {
  position: absolute;
  top: 10rem;
  margin: 0 7rem;
}

.head-component {
  display: flex;
  justify-content: space-between;
}

#getNewParagraph {
  height: 100%;
  padding: 1rem;
  border-radius: 25px;
  background-color: rgb(240, 248, 151);
  font-weight: 600;
  font-family: inherit;
}

#getNewParagraph:hover, #getNewParagraph:focus {
  background-color: rgb(231, 246, 76);
  box-shadow: 1px 1px 5px rgb(249, 255, 186);
  color: black;
}

h2 {
  font-size: 1.5rem;
  font-style: oblique;
}

#paragraph {
  line-height: 27px;
}

.daily-tips {
  margin: auto;
  width: 30%;
  border: 2px dashed rgb(224, 248, 151);
  margin-top: 3rem;
  border-radius: 1rem 1rem 13%;
  text-align: center;
  padding: 0 1rem;
}

Integrating the Frontend with the Backend

Now let's link our frontend to AWS Bedrock to fetch paragraphs and tips.

Create a main.js file & import dependencies

import './style.css';
import { BedrockRuntimeClient, ConverseCommand } from "@aws-sdk/client-bedrock-runtime";

Setting Up Constants


const modelId = 'anthropic.claude-v2';
const paragraphPrompt = "Generate a paragraph for speaking practice. Imagine you are answering an interview(news,job,entertainment) question.";
const tips = "Give daily two liner tip to overcome speaking anxiety.";

modelId: The ID of the model we'll use from AWS Bedrock.

paragraphPrompt: A prompt that asks the model to generate a paragraph for speaking practice.

tips: A prompt that asks the model to provide daily tips for overcoming speaking anxiety.

Creating Conversation Objects & Declaring Variables

const paragraphConversation = [
  {
    role: "user",
    content: [{ text: paragraphPrompt }],
  },
];

const tipsConversation = [
  {
    role: "user",
    content: [{ text: tips }],
  },
];

let client = null;

paragraphConversation and tipsConversation: These are the messages we send to the model. The role: "user" indicates that the prompt is from the user.

client: This variable will hold the instance of BedrockRuntimeClient.

Fetching a New Paragraph & a New Tip

async function fetchNewParagraph() {
  disableButton(true);
  showLoadingAnimation();

  try {
    const response = await client.send(new ConverseCommand({ modelId, messages: paragraphConversation }));
    console.log("Response from Bedrock (Paragraph):", response);
    const paragraph = response.output.message.content[0].text;
    document.querySelector("#paragraph").innerHTML = paragraph;
  } catch (err) {
    console.error("Error fetching new paragraph:", err);
    document.querySelector("#paragraph").innerHTML = 'An error occurred while fetching the paragraph.';
  }

  disableButton(false);
}

async function fetchNewTip() {
  try {
    const response = await client.send(new ConverseCommand({ modelId, messages: tipsConversation }));
    console.log("Response from Bedrock (Tips):", response);
    const tip = response.output.message.content[0].text;
    document.querySelector("#tips").innerHTML = tip;
  } catch (err) {
    console.error("Error fetching daily tip:", err);
    document.querySelector("#tips").innerHTML = 'Unable to fetch daily tip.';
  }
}

fetchNewParagraph: An asynchronous function that fetches a new paragraph.

disableButton(true): Disables the button while fetching.

showLoadingAnimation(): Shows a loading spinner while fetching.

try-catch block: Attempts to fetch a new paragraph and update the DOM. If an error occurs, it logs the error and shows an error message.

fetchNewTip: Similar to fetchNewParagraph, but it fetches a tip instead.

Utility Function

function disableButton(isDisabled) {
  const paragraphButton = document.querySelector("#getNewParagraph");
  paragraphButton.disabled = isDisabled;
}

disableButton: Enables or disables the button to prevent multiple clicks during the fetch.

Initializing the App

async function init() {
  try {
    const creds = await fetchCredentials();
    client = await createBedrockClient(creds);
    await fetchNewParagraph();
    await fetchNewTip();
  } catch (err) {
    console.error("Error initializing application:", err);
    document.querySelector("#paragraph").innerHTML = 'An error occurred while initializing the application.';
    document.querySelector("#tips").innerHTML = 'An error occurred while initializing the application.';
  }

  const paragraphButton = document.querySelector("#getNewParagraph");
  paragraphButton.addEventListener("click", fetchNewParagraph);
}

init: An asynchronous function to initialize the app.

Fetches credentials and creates the Bedrock client.
Fetches the initial paragraph and tip.
Adds an event listener to the button to fetch a new paragraph when clicked.

Creating Bedrock Client

async function createBedrockClient(creds) {
  try {
    return new BedrockRuntimeClient({
      credentials: creds.credentials,
      region: creds.region,
    });
  } catch (err) {
    console.error("Error creating Bedrock client:", err);
    throw err;
  }
}

createBedrockClient: Creates and returns a new instance of BedrockRuntimeClient with the provided credentials and region.

Fetching Credentials

async function fetchCredentials() {
  return {
    region: "us-west-2",
    credentials: {
      accessKeyId: import.meta.env.VITE_AWS_ACCESS_KEY_ID,
      secretAccessKey: import.meta.env.VITE_AWS_SECRET_ACCESS_KEY,
    },
  };
}
init();

fetchCredentials: Returns the AWS credentials from environment variables and init(): Calls the init function to start the application.

Create a .env file & add the AWS credentials to it:

VITE_AWS_DEFAULT_REGION=us-west-2 // YOUR REGION
VITE_AWS_ACCESS_KEY_ID=YOUR_AWS_ACCESS_KEY
VITE_AWS_SECRET_ACCESS_KEY=YOUR_AWS_SECRET_ACCESS_KEY

Running the Application

npx vite

You should now see the app running, with functionalities to fetch new paragraphs for practice and daily tips.

Click on the Generate button and you can see a new paragraph.

Conclusion

Congratulations! You have successfully created a speaking practice app using AWS Bedrock. This app generates paragraphs for speaking practice and daily tips to overcome speaking anxiety, providing a useful tool for improving communication skills.

GiveNext: Find a need. Offer what you have. Make an impact.

Amelia Dutta — Mon, 07 Sep 2026 06:42:15 +0000

This is a submission for Weekend Challenge: Generosity Edition

What I Built

"Education, science, culture and the free flow of ideas and knowledge are humanity's fundamental needs. They are also building blocks for lasting peace..." ~ UNESCO

But according to UNESCO data, around 2.6 billion people, nearly one-third of the world's population still lack internet access, while around 765 million adults and young people lack basic literacy skills, and nearly two-thirds of them are women. In addition, 273 million children and young people are currently out of school worldwide. This number has risen for seven consecutive years, driven by factors including conflict, poverty, population growth and shrinking budgets.

We are in 2026, and although there has been progress, many of the challenges above are still very real. Millions of people are still deprived of basic opportunities like education, access to information and the resources needed to build a better future. UNESCO's latest education data also shows that progress is possible but that the people who are furthest behind still need to be reached.

For this weekend challenge by DEV.to, I chose the topic of creating a resilience tool for communities hit first and hardest.

GiveNext is a community donation platform that connects people who have useful items with organizations that need them.

Instead of asking people only to donate money, GiveNext starts with something they may already have: a laptop, books, school bags or other useful items and helps them find an organization that currently needs them.

The idea is simple:

You have it. Someone needs it.

Demo

Code

amelia2802 / GiveNext

GiveNext

GiveNext is a community donation platform that connects people who have useful items with organizations that need them.

Features

Browse and search community needs
Match donated items with nearby organizations
Send and track donation offers
View donor activity and impact
NGO dashboard for posting needs and managing offers
Responsive donor and NGO portal views

Development

Install dependencies:

npm install

Start the development server:

npm run dev

Run tests:

npm test

Build for production:

npm run build

Template Attribution

The original visual foundation for this project was adapted from the Alpha responsive HTML5 template by HTML5 UP.

Template: Alpha by HTML5 UP
Author: AJ (HTML5 UP)
License: Creative Commons Attribution 3.0 License

The GiveNext application, content, React components, and application functionality were developed separately for this project. Template attribution and license terms remain applicable to the portions derived from the HTML5 UP template.

Credits

Icons: React Icons
Original template icons…

View on GitHub

How I Built It

The entire app is built with React.js.

Key Technical Features:

Modular React components for reusable and maintainable UI elements
ES6 imports/exports for cleaner code organization
React state management to handle donation forms, matching results, and user interactions
Component-based architecture separating the donor, NGO, needs, matching, and donation flows
Responsive Design optimized for mobile, tablet, and desktop
Custom CSS styling with reusable classes, cards, buttons, badges, progress indicators, and responsive layouts
Interactive donation matching that connects items people have with community needs
Accessible UI elements with semantic HTML, labels, and clear interaction states
Gemini Antigravity was used as a development assistant to help with technical specifications, implementation, debugging, and unit testing

The user journey flows through the core GiveNext experience:

Landing → Browse Community Needs → Tell Us What You Have → Find Matches → Offer Donation → Track Donation

My goal was to create a user journey that makes generosity feel simple, tangible, and transparent, while helping donors understand where their contribution can actually make a difference.

My Learnings

This challenge allowed me to think beyond just building another CRUD application and focus on how technology can make a real-world process a little easier.

Here's what I learned:

React component architecture: breaking a larger interface into reusable components
State management: managing form inputs, filters, matching results, and UI states
Problem solving with AI: using Gemini Antigravity as a development partner while still making the architectural and product decisions myself
Thinking from the user's perspective: designing the experience around the journey of someone who wants to give, rather than just building individual pages

The biggest takeaway was that a good product doesn't necessarily need to be complicated.

GiveNext is built around one simple question: "What do you have that someone needs?"

Future Aspects

As the weekend challenge was time-bound, most of the data in the current version is hardcoded/demo data. After the challenge, I am planning to expand the project with:

Authentication
Search
Filters
Donor activity
Match breakdown
Toast notifications
Empty/error states
Real-time notifications
Chat
Maps
Image uploads
Social sharing
Advanced analytics
AI-powered matching

The current version focuses mainly on demonstrating the core idea and user journey. These features would help turn the prototype into a more complete platform.

Prize Categories

Best Use of Google AI

GiveNext was developed with Google Gemini through Google Antigravity as an AI-assisted development partner.

I used Gemini to help:

Develop and refine the technical specifications and frontend architecture
Think through implementation approaches and edge cases
Create and improve unit tests
Debug and iterate on the frontend

Gemini was used as a development aid while the product concept, feature decisions, and overall implementation direction were driven by me.

Why GiveNext?

Places like India, Bangladesh, Pakistan and many other developing countries continue to face challenges around access to education, school resources, rising costs and basic necessities.

Many people may have things sitting unused at home while somewhere else, a community organization is actively looking for exactly those things.

GiveNext is my small attempt at building a helping hand between the two.

It is not trying to solve every problem. It is simply trying to make one small part of giving easier:

help people find where what they already have can actually help someone else.

And hopefully, by making the process more transparent and connected, we can make it a little easier for people to trust the act of giving and for communities to receive the help they need.

All images used in this project are credited to their original owners.

Create a Mock Interviewer Bot with Amazon Lex V2

Amelia Dutta — Fri, 21 Aug 2026 10:02:23 +0000

Introduction

Getting a job interview call is a positive sign, but the limited time to prepare can be nerve-wracking. It's said that

"Prepare for the unknown by studying how others in the past have coped with the unforeseeable and the unpredictable."

So having a job interview in front of a bunch of strangers or only one person is indeed unpredictable and overwhelming. But with a bit of preparation—googling common patterns, practicing mock interviews with friends or family—you can confidently face any scenario.

But what if there's insufficient time for extensive research or scheduling conflicts for mock drills? Imagine having a tiny friend with you 24x7 who gathers mock questions and practices with you! Sounds like that popular Japanese blue robot cat, isn't it?

In this article, I will explain how you can build your own Mock Interviewer Bot with the help of Amazon Lex.

What is a Bot?

Before creating the bot let me explain what a bot is. So according to the standard definition of bot —

"A bot is an automated software application that performs repetitive tasks over a network. It follows specific instructions to imitate human behavior but is faster and more accurate. A bot can also run independently without human intervention." Click to read more about bots

In simple words, you have an application that performs the predefined task(for example: paying electricity bills on 1st day of the month, giving reminders for medication on time, creating/arranging meetings according to the user's schedule, or helping you in doing your homework 😜) without the user's intervention. It's like having your personal secretary. Isn't it a bit exciting?

Okay! But what is Lex?

We will create our bot using Amazon Lex. Let's take a look at what it is!

"Amazon Lex is a fully managed artificial intelligence (AI) service with advanced natural language models to design, build, test, and deploy conversational interfaces in applications." Click to read more about Lex

Let's understand what it means. Lex is a service introduced by Amazon Web Services(AWS) that is created using natural language processing (NLP) and automatic speech recognition (ASR). You can create a lifelike bot using pre-built templates by defining the type or create from scratch, then build and test it on your console; after that publish the bot publicly. Example: Amazon Alexa.

Let's Start!

Excited to dive in? Great! Now that we have a clear picture of what we're aiming for, let's roll up our sleeves and bring our mock interviewer bot to life. Follow these simple steps, and you'll have your very own interactive chatbot ready to tackle job interview questions. Ready? Let's get started!

Account Creation :

Visit https://aws.amazon.com/free/ to create your free-tier AWS account. (Remember, your free-tier account is valid for 12 months from your account creation date.)
After creating your AWS account, log in using your "root user" credentials.

Creating a Lambda Function:

In your AWS management console search for Lambda and click on the Lambda option that appears in the search results.
Once the Lambda console opens, locate and click on the "create function" button.

Now in the create function console:

Step 1: Click on the "Author from Scratch" option.
Step 2: Give a function name, for example: JobInterviewerProcessor
Step 3: Choose the current NodeJs version and leave all other settings as default.
Step 4: Click on the Create a new role from AWS policy templates option and assign a role name, such as JobInterviewerProcrsssorRole
Step 5: Now click on "Create function" to finalize and create the Lambda function.

After successfully creating the JobInterviewerProcessor function navigate to the code tab below and replace the existing code in index.mjs either copy the code provided below or write your own.

//needed to interact with Amazon Lex
import { LexModelsV2Client, PutBotCommand } from "@aws-sdk/client-lex-models-v2";

//creates a new instance of the LexModelsV2Client,change "YOUR REGION" before running the code
const client = new LexModelsV2Client({ region: "YOUR REGION" });

//exports a Lambda function named "handler"
export const handler = async (event) => {
  try {
    //parses the incoming event data from Lex
    const lexEvent = JSON.parse(event.body);

    //different cases for various intents (BehavioralInterview, TechnicalInterview etc.)
    //each case handles specific types of questions and provides responses or tips.
    switch (lexEvent.request.intent.name) {
      case "BehavioralInterview":
        //handle behavioral interview questions
        //provide responses, tips, etc.
        break;

      case "TechnicalInterview":
        //handle technical interview questions
        break;
        //you can add any different types of interviews as cases
      default:
        //handle unrecognized intents
        return {
          statusCode: 200,
          body: JSON.stringify({ message: "Intent not recognized" }),
        };
    }

    //you can customize the response
    const response = {
      statusCode: 200,
      body: JSON.stringify({ message: "Success" }),
    };

    return response;
  } catch (error) {
    //handle errors
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message }),
    };
  }
};

Delete those comments before saving the code then click "Save".
Switch to the "Test" tab and perform the following steps to verify the functionality of your Lambda function:
- Click on Create new event
- Give your Event a name, for example: BehavioralInterview
- Keep all other settings as default but update the Event JSON with the provided code.

    {
      "body": "{\"request\":{\"type\":\"IntentRequest\",\"intent\":{\"name\":\"BehavioralInterview\"}}}"
    }

Now "Save" the test event and click on "Test" to check your function.

Create The Bot!

Now that we've configured our Lambda function, let's create our bot. Follow these steps:

Navigate to the Amazon Lex console(Here we're using Lex V2) in your AWS Management console.
Locate and click on the "create bot" button. Note: If you are using Lex V1, the user interface may differ slightly from Lex V2, but the overall process remains the same.

You can create a bot using AWS templates or start from scratch. To begin from scratch, select the "Create a blank bot" option.

Name your bot, such as "JobInterviewerBot"and provide a suitable description.
If it's your first time creating a bot in Lex, opt for "Create a role with basic Amazon Lex permission" or use an existing role.
Choose "Children’s Online Privacy Protection Act (COPPA)" based on your subject (I choose no).
Set Session Timeout to 5 minutes and click "Next".
Select language as "English(US)" or your preferred language and choose a voice interaction like "Sallie."
Leave everything as default and click "Create" to complete the bot creation.

Click on Intents in the left navigation and select "Add empty intent". Give it a name based on the bot's topic, such as "BehavioralInterview". Click on "Add."

In the "Utterance" section, add relevant phrases users might use to initiate the conversation with the bot, like "Start interview" or "I want to practice some tech interview." etc.
Move to the Response tab and write some suitable responses corresponding to the utterances, such as "Let's start by introducing yourself."

Navigate to the "Slots" section and click on "Add slot." Slots are user-provided values to fulfill the intent.

For the "BehavioralInterview" intent, consider adding questions or prompts based on "Challenge" or "Outcome" slot types. For technical intents, create slots like "Programming Language" or "Database." etc.

For Slot type, you can use in-built or customized slots and click Add.

Build The Bot

Now we have everything to need to create the bot so click on _"Save Intent" _and run the "Build" process to integrate your changes into the bot's functionality. Building the bot is crucial to reflect and implement the latest modifications.

Test The Bot

Now it's time for the most interesting and long-awaited part - testing the bot! Click on "Test" and a demo chat-bot interface will appear on the screen. Write or speak any utterance that you've added to initiate the conversation and let the practice begin! Congratulations, you have successfully created your Mock Interviewer bot.🎉🎉

Publish bot in Amazon Lex V2

Remember until now we're chatting with the draft version of the Lex bot. If you want to publish the bot in amazon lex V2 follow these steps:

In your management console, go to Lex and click on the name of your bot.
In the Left Navigation menu select Bot version and choose Create version.
Name your version, for example, v1.0.0.

Under Deployment, click on "Alias" and create an alias with a suitable name like "production_1." Associate the alias with the version you just created.

Ta-da! 🎈 Give yourself a pat on the back—you've successfully published your bot.

Conclusion

Finally, I hope this article has helped you with a brief understanding of how bots work and guided you through the process of creating and publishing a chatbot in Amazon Lex V2. Happy coding! 🤖

[Boost]

Amelia Dutta — Fri, 14 Aug 2026 18:14:42 +0000

J3ffJessie

Aug 14

Interviewing doesn't have to be scary. Practice just got easier!!

#ai #discord

6 min read

Revisiting DSA Through Mini Projects #2: HTML Syntax Validator

Amelia Dutta — Thu, 05 Feb 2026 15:43:26 +0000

I am back with another mini project on revisiting DSA and today's topic is Stack! And how I built a simple HTML syntax checker app applying the Stack.

What is a Stack?

A stack is a collection of objects that are inserted and removed according to the Last-In,First-Out(LIFO) principle.

For example: Our Browser's Search history is an example of a stack where each time you visit a new web address, it will be pushed onto the stack of web addresses and by returning you are actually popping back the last searched address to the previously visited site!

Second Project of This Series: A HTML Syntax Checker
Before diving deeper into the project and the logic, check the app here: syntax-validator

Let's See How It Works

To check if HTML tags are balanced, we can use the LIFO property of a Stack. The logic is as follows:

Scan the Code: We read the HTML string from left to right.
Push Open Tags: Whenever we encounter an opening tag (like <div> or <p>) we push it onto our stack.
Pop Closing Tags: When we find a closing tag (like </div> or </p>) we check the top of our stack.
- If the stack matches the current closing tag (e.g. top is div and current is /div) we pop it off. This means the tag was correctly closed!
- If the stack is empty or the tags don't match, we know the syntax is invalid.
After reading the whole string if the stack is completely empty it means every opening tag had a matching closing tag and our html code is valid!

Implementation

I kept the implementation simple using vanilla JavaScript. Here is the snippet where the magic happens:

while(i != -1){
    // If it is an opening tag that means doesn't start with '/'
    if(!tag.startsWith("/")){
        stack.push(tag);
    }
    // If it is a Cclosing tag
    else{
        // Check if we have anything to close
        if(stack.length == 0){
            output.innerText = "Invalid Syntax";
            return;
        }
        // Check if it matches the last opened tag
        // Here tag.slice(1) removes the '/' so we compare "div" with "div"
        if(tag.slice(1) !== stack.pop()){
            output.innerText = "Invalid Syntax";
            return;
        }
    }
}

The key methods here are stack.push(tag) to add to our history of open tags and stack.pop() to match them when we close a tag.

Limitation

As I was revising stack and wanted to make a simple project on that topic so this project has some limitations:

Strict Matching: This code checks for exact string matches. That means <div class="hero-section"> wouldn't match </div> because the strings are different!
Empty Tags: HTML has "empty/void" tags like <img>, <br> and <hr> that don't need a closing tag. Which is why this code will return this as an Invalid Tag!

This project made me realize that finding the right data structure is only half the battle. While the stack was the perfect tool for the core logic, I realized that a real-world solution must handle more complex issues, such as attributes and empty tags.

Revisiting DSA Through Mini Projects #1: Optimizing a Phonebook with HashMap

Amelia Dutta — Mon, 02 Feb 2026 10:24:27 +0000

I am starting to revise the DSA topics when an idea popped in; how about starting to create one mini project based on each topic while revisiting them? This way it can give me insights into how data structures and algorithms are applied in the real world and also I can have something to showcase.

First Project of This Series: A Phonebook App

Without further ado, here is the first project of my learning series: a Phonebook App. Check the app here: https://hashphonebook.netlify.app/

I made this app some years ago but at that time I used the logic of linear searching. Which is good because it was a demo project and there is no need to store thousands of numbers, so the search can check all the possibilities and then return the desired result.

Initially I stored my contacts in a simple JavaScript Array:

let userArray = [
    { userName: "Jane", number: "1237893457" },
    { userName: "Oscar", number: "4562317895" }
];

And to find a contact I used .find() which loops through the array one by one:

// Time Complexity: O(n) Linear Time
const result = userArray.find(contact => contact.userName === "Oscar");

But Why Is Linear Search Not Enough?

In the real world, the scenario is different. We need to store many numbers in our contact list. For example: we store 100000 numbers and in an emergency case, taking the worst scenario if our phonebook takes O(100000) time to show the result then it is too much in this fast-paced world.

This is where performance actually matters not just whether the app works or not!

Optimizing the Search Logic

So the solution is using something that can give results in a shorter time. I changed the array to a HashMap and searched through the map using the key (username).

This way, the lookup time is much faster (O(1)) and more suitable for real-world use cases. Because A Hashmap acts like a real-world dictionary. You don't read every word to find "Strawberry" you flip straight to S.

let contactMap = {
    "Jane": "1237893457",
    "Oscar": "4562317895"
};

// Time Complexity: O(1) Constant Time
const number = contactMap["Jane"];

It doesn't matter if I have 5 contacts or 5 billion. The lookup speed is constant.

The Code Refactor

Here is the actual code I changed in my project:

Before (Array.push):

userArray.push({ userName, contactNumber });

After (Map Key-Value):

// Storing as a key-value pair and making the search case-insensitive
contactMap[userName.toLowerCase()] = { 
    originalName: userName, 
    number: contactNumber 
};

This project made me realize that a "working code" is not always "good code". Linear search was enough for a demo but it doesn't scale and real-world applications demand better solutions.

This is just the first step in my DSA revision journey and I plan to keep building small projects like this!

Step Into Mystic Falls: A Halloween Story Telling Game

Amelia Dutta — Mon, 10 Nov 2025 06:06:07 +0000

> “There is no such thing as a bad idea. Only poorly executed awesome ones,”
Damon once said and I couldn't stop thinking about that while building this Halloween project.

When I stumbled upon the Frontend Challenge - Halloween Edition, Perfect Landing_, I thought why not revisit some old JavaScript fundamentals and create a landing page that truly captures the Halloween spirit?

The Founder's Day and the Lockwood Masquerade Ball have always been my favorite events from The Vampire Diaries so while planning this project I thought, "Let's merge them together!"

That's how The Founder's Ball was born: an interactive storytelling game that lets users step into a dark ballroom, pick a partner, and uncover their supernatural identity.

The Experience

The entire app is built with HTML, CSS, and Vanilla JavaScript (ES6).

Key Technical Features:

Modular JavaScript with ES6 imports/exports for cleaner code organization
CSS Keyframes for smooth fade-in transitions between sections
Responsive Design optimized for mobile, tablet, and desktop (5 breakpoints)
Dark Gothic UI with gradients, animations, and elegant typography

The user journey flows through 6 distinct sections:

Landing → Enter the mysterious ballroom
Attire Selection → Choose your formal wear
Outfit Choice → Pick from 4 elegant designs
Partner Selection → Meet your mysterious companion
Identity Reveal → Discover your supernatural nature
Your Story → Read your personalized tale

My goal was to create a user journey that felt like navigating through a storybook, where each choice transitions seamlessly into the next moment.

My Learnings

This challenge gave me the perfect push to revisit my Vanilla JavaScript foundations and dust off some forgotten concepts.

Here's what I brushed up on:

Array Methods: join(), find(), map()
State Management
DOM Manipulation
ES6+ Features: arrow functions, modules, destructuring

Play The Founder's Ball

View Source Code

Halloween doesn't always have to be scary. Sometimes it's about mystery, elegance, and the thrill of becoming something supernatural for a night.

So… if you've ever wondered what your story will be in Mystic Falls, come find out. The Founder's Ball awaits you at the Lockwood Mansion from sunset to midnight. 🦇

All images used in this project are credited to their original owners.

How Being Part of a Community Took Me from Hesitant to 5 PRs Merged

Amelia Dutta — Sun, 02 Nov 2025 18:26:26 +0000

Ding-dong! The ghouls are gone and the season of Christmas begins; the month long Hacktoberfest wraps up, filled with learning, debugging and late night commits! 🎃
This year, I learned so much more through contributing to Open Source which I never got from just reading tutorials or doing personal projects. and honestly a big chunk of that credit goes to the Torc community.
(Before diving into my journey, check out Torc)

At the beginning of the month, my feed was full of posts from people on LinkedIn and Twitter buzzing about Hacktoberfest. Everyone seemed so ready and excited. And me? I was like, "Umm, nice... but where do I even start?" My calendar was already packed with other events so I didn't really have time to plan my contributions.
And that's where the magic of a good tech community kicks in. Around the second week of October, right when Hacktoberfest was in full swing I finally got a break and logged back in. That's when I discovered that Torc discord have a dedicated hacktoberfest channel, shout out to Jason Torres for creating the torctoberfest repo. And I got a place to start! My interest was back, but then came the real question: what do I contribute to?

The Beginning of torcReads

While scrolling through the channels I suddenly remembered, I hadn't even read the book we picked for our book club! That's when the idea hit me. Huge thanks to Angelos Katrantzis for starting the Torc Book Club; otherwise I might never have thought of this project in the first place!
The initial plan was simple: build a website to log the books we read each month in the club. But then my brain went "Wait, why not add more?" So I started adding features like study guides and monthly voting options. The frontend came out beautifully; Responsive, Clean and Minimalist. And guess what? My first two PRs got merged! Cool, right? 😎

After hosting it for testing, I realized something... Oops it is storing all the data locally! Which meant once deployed, everyone would see their own data. Total chaos incoming!
And here's the twist: I never worked with any backend before. So laptop on, a little googling, some brainstorming with Claude and a few Stack Overflow tabs later; BAM! I discovered Supabase! It lets you store data globally and even offers generous free storage. But of course... I had zero experience integrating a database with frontend.

Still I told myself "we've got a week and a half before 31st October! Why not learn something new?"

My Learnings in the Process

While setting up the database with the frontend I learned a few cool things:

Row Level Security (RLS)
Access control that defines who can read, insert, update, or delete specific rows based on policies.
Migration Files
Version controlled SQL scripts that track and apply database schema changes over time, allowing teams to sync database structures across environments.
CRUD Operations (Create, Read, Update, Delete)
The four fundamental database operations: Create adds new data, Read retrieves it, Update modifies it, and Delete removes it.
Uploading files to cloud
Cloud file storage service that uploads files to remote servers and returns public URLs, allowing applications to store and retrieve uploaded content without managing server infrastructure.
Organizing files
Containers that group and organize related files in cloud storage.
Public vs Private buckets
Access control for file storage; public buckets allow anyone with the URL to download files while private buckets require authentication.

Check out the Torctoberfest Repo here: https://github.com/jasonetorres/torctoberfest

Building torcReads taught me far more than just coding. Before this, I thought backend and database were way out of my league. But once hit a real problem, I had no choice but to figure it out! Kudos to Pat Clark for reviewing and giving thoughtful feedback on each of my pull requests.

I realized open source isn't about being an expert in everything and you don't need to know all to get started. It's about showing up, trying things and learning in public. Even a small idea can turn into something valuable when you have a great community guiding you!

Happy Hacking! 🕸️👻