<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Amelia Dutta</title>
    <description>The latest articles on DEV Community by Amelia Dutta (@amelia2802).</description>
    <link>https://dev.to/amelia2802</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F734803%2F0f0b2a0b-bb40-4c7b-8290-24a9eecfc60c.jpg</url>
      <title>DEV Community: Amelia Dutta</title>
      <link>https://dev.to/amelia2802</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/amelia2802"/>
    <language>en</language>
    <item>
      <title>Create a Mock Interviewer Bot with Amazon Lex V2</title>
      <dc:creator>Amelia Dutta</dc:creator>
      <pubDate>Fri, 21 Aug 2026 10:02:23 +0000</pubDate>
      <link>https://dev.to/amelia2802/create-a-mock-interviewer-bot-with-amazon-lex-v2-dmn</link>
      <guid>https://dev.to/amelia2802/create-a-mock-interviewer-bot-with-amazon-lex-v2-dmn</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

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

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;"Prepare for the unknown by studying how others in the past have coped with the unforeseeable and the unpredictable."&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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?&lt;/p&gt;

&lt;p&gt;In this article, I will explain how you can build your own Mock Interviewer Bot with the help of &lt;strong&gt;&lt;em&gt;Amazon Lex&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Bot?
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F88nryyohzksbdvewmk19.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F88nryyohzksbdvewmk19.jpg" alt="Bot Avatar" width="626" height="626"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Before creating the bot let me explain what a bot is. So according to the standard definition of bot —&lt;/p&gt;

&lt;p&gt;"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." &lt;a href="https://aws.amazon.com/what-is/bot/" rel="noopener noreferrer"&gt;Click to read more about bots&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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?&lt;/p&gt;

&lt;h2&gt;
  
  
  Okay! But what is Lex?
&lt;/h2&gt;

&lt;p&gt;We will create our bot using Amazon Lex. Let's take a look at what it is!&lt;/p&gt;

&lt;p&gt;"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." &lt;a href="https://aws.amazon.com/lex/?nc2=type_a" rel="noopener noreferrer"&gt;Click to read more about Lex&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's understand what it means. Lex is a service introduced by &lt;a href="https://aws.amazon.com/what-is-aws/?nc1=f_cc" rel="noopener noreferrer"&gt;Amazon Web Services(AWS)&lt;/a&gt; that is created using &lt;a href="https://www.ibm.com/topics/natural-language-processing" rel="noopener noreferrer"&gt;natural language processing (NLP)&lt;/a&gt; and &lt;a href="https://www.ibm.com/topics/speech-recognition" rel="noopener noreferrer"&gt;automatic speech recognition (ASR)&lt;/a&gt;. 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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fybn8qyey0mgom0wwugr1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fybn8qyey0mgom0wwugr1.png" alt="Workflow" width="799" height="264"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Let's Start!
&lt;/h2&gt;

&lt;p&gt;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!&lt;/p&gt;

&lt;h3&gt;
  
  
  Account Creation :
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Visit &lt;a href="https://aws.amazon.com/free/" rel="noopener noreferrer"&gt;https://aws.amazon.com/free/&lt;/a&gt; to create your free-tier AWS account. (Remember, your free-tier account is valid for 12 months from your account creation date.)&lt;/li&gt;
&lt;li&gt;After creating your AWS account, log in using your "root user" credentials.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fsuug62g6n1z9pk8fw38p.png" alt="AWS Login Page" width="800" height="356"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Creating a Lambda Function:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;In your AWS management console search for &lt;code&gt;Lambda&lt;/code&gt; and click on the &lt;a href="https://docs.aws.amazon.com/lambda/latest/dg/welcome.html" rel="noopener noreferrer"&gt;Lambda&lt;/a&gt; option that appears in the search results.&lt;/li&gt;
&lt;li&gt;Once the Lambda console opens, locate and click on the &lt;strong&gt;&lt;em&gt;"create function"&lt;/em&gt;&lt;/strong&gt; button.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkt9ea7h0s067n0dy6zhp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkt9ea7h0s067n0dy6zhp.png" alt="AWS Lambda" width="800" height="337"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now in the create function console:&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa9l3d67lpbz4krtdb4rk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa9l3d67lpbz4krtdb4rk.png" alt="Create Function" width="800" height="426"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After successfully creating the &lt;code&gt;JobInterviewerProcessor&lt;/code&gt; function navigate to the &lt;strong&gt;&lt;em&gt;code tab&lt;/em&gt;&lt;/strong&gt; below and replace the existing code in &lt;em&gt;index.mjs&lt;/em&gt; either copy the code provided below or write your own.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//needed to interact with Amazon Lex&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;LexModelsV2Client&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;PutBotCommand&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@aws-sdk/client-lex-models-v2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;//creates a new instance of the LexModelsV2Client,change "YOUR REGION" before running the code&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;LexModelsV2Client&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;region&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;YOUR REGION&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;//exports a Lambda function named "handler"&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handler&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;//parses the incoming event data from Lex&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;lexEvent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;//different cases for various intents (BehavioralInterview, TechnicalInterview etc.)&lt;/span&gt;
    &lt;span class="c1"&gt;//each case handles specific types of questions and provides responses or tips.&lt;/span&gt;
    &lt;span class="k"&gt;switch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;lexEvent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;request&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;intent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;BehavioralInterview&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="c1"&gt;//handle behavioral interview questions&lt;/span&gt;
        &lt;span class="c1"&gt;//provide responses, tips, etc.&lt;/span&gt;
        &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

      &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;TechnicalInterview&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="c1"&gt;//handle technical interview questions&lt;/span&gt;
        &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="c1"&gt;//you can add any different types of interviews as cases&lt;/span&gt;
      &lt;span class="nl"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="c1"&gt;//handle unrecognized intents&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Intent not recognized&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
        &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;//you can customize the response&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Success&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;//handle errors&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Delete those comments before saving the code then click "Save".&lt;/li&gt;
&lt;li&gt;Switch to the "Test" tab and perform the following steps to verify the functionality of your Lambda function:

&lt;ul&gt;
&lt;li&gt;Click on Create new event&lt;/li&gt;
&lt;li&gt;Give your Event a name, for example: &lt;code&gt;BehavioralInterview&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Keep all other settings as default but update the Event JSON with the provided code.
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"body"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"{&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;request&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;:{&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;type&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;:&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;IntentRequest&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;,&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;intent&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;:{&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;:&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;BehavioralInterview&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;}}}"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;

&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Now &lt;em&gt;&lt;strong&gt;"Save"&lt;/strong&gt;&lt;/em&gt; the test event and click on &lt;em&gt;&lt;strong&gt;"Test"&lt;/strong&gt;&lt;/em&gt; to check your function.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fm9pvclu3c1oq10jqgduy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fm9pvclu3c1oq10jqgduy.png" alt="Test The Function" width="800" height="1190"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Create The Bot!
&lt;/h2&gt;

&lt;p&gt;Now that we've configured our Lambda function, let's create our bot. Follow these steps:&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc3g1nxq6pzqu1i50bj3s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc3g1nxq6pzqu1i50bj3s.png" alt="Amaon Lex" width="799" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can create a bot using AWS templates or start from scratch. To begin from scratch, select the &lt;strong&gt;&lt;em&gt;"Create a blank bot&lt;/em&gt;&lt;/strong&gt;" option.&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fm22rho28rz811oifin02.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fm22rho28rz811oifin02.png" alt="Bot Creation 1" width="799" height="355"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6m5vam4zquuon0mjjmu3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6m5vam4zquuon0mjjmu3.png" alt="Bot Creation 1" width="800" height="341"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on Intents in the left navigation and select &lt;em&gt;&lt;strong&gt;"Add empty intent"&lt;/strong&gt;&lt;/em&gt;. Give it a name based on the bot's topic, such as &lt;em&gt;"BehavioralInterview"&lt;/em&gt;. Click on &lt;strong&gt;&lt;em&gt;"Add."&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdoa2uy4apy6f7pzo8xl5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdoa2uy4apy6f7pzo8xl5.png" alt="Chatting with Bot" width="800" height="338"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Navigate to the "Slots" section and click on "Add slot." Slots are user-provided values to fulfill the intent.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F56lfbma04l4ay5qi9eet.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F56lfbma04l4ay5qi9eet.png" alt="Chat with Bot" width="800" height="353"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;For &lt;em&gt;&lt;strong&gt;Slot type&lt;/strong&gt;&lt;/em&gt;, you can use in-built or customized slots and click Add.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7zhj5i3t371vssnulk05.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7zhj5i3t371vssnulk05.png" alt="Add Slots" width="800" height="351"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Build The Bot
&lt;/h2&gt;

&lt;p&gt;Now we have everything to need to create the bot so click on &lt;strong&gt;_"Save Intent" _&lt;/strong&gt;and run the &lt;strong&gt;&lt;em&gt;"Build"&lt;/em&gt;&lt;/strong&gt; process to integrate your changes into the bot's functionality. Building the bot is crucial to reflect and implement the latest modifications.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgkgexcvtdsjh8jvrrvpo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgkgexcvtdsjh8jvrrvpo.png" alt="Build the Bot" width="800" height="356"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Test The Bot
&lt;/h2&gt;

&lt;p&gt;Now it's time for the most interesting and long-awaited part - testing the bot! Click on &lt;strong&gt;&lt;em&gt;"Test"&lt;/em&gt;&lt;/strong&gt; 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.🎉🎉&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fymyarxxbrbatynpxqjpw.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fymyarxxbrbatynpxqjpw.jpg" alt="Test the Bot" width="800" height="566"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Publish bot in Amazon Lex V2
&lt;/h2&gt;

&lt;p&gt;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:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In your management console, go to Lex and click on the name of your bot.&lt;/li&gt;
&lt;li&gt;In the Left Navigation menu select Bot version and choose &lt;strong&gt;&lt;em&gt;Create version&lt;/em&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Name your version, for example, v1.0.0.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Under Deployment, click on &lt;strong&gt;&lt;em&gt;"Alias"&lt;/em&gt;&lt;/strong&gt; and create an alias with a suitable name like "production_1." Associate the alias with the version you just created.&lt;/p&gt;

&lt;p&gt;Ta-da! 🎈 Give yourself a pat on the back—you've successfully published your bot.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;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! 🤖&lt;/p&gt;

</description>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>Amelia Dutta</dc:creator>
      <pubDate>Fri, 14 Aug 2026 18:14:42 +0000</pubDate>
      <link>https://dev.to/amelia2802/-47fo</link>
      <guid>https://dev.to/amelia2802/-47fo</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/j3ffjessie/interviewing-doesnt-have-to-be-scary-practice-just-got-easier-3h4g" class="crayons-story__hidden-navigation-link"&gt;Interviewing doesn't have to be scary. Practice just got easier!!&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/j3ffjessie" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F129185%2F37c19477-2e89-4eb2-ba88-1c4dbb0f747d.jpeg" alt="j3ffjessie profile" class="crayons-avatar__image" width="799" height="726"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/j3ffjessie" class="crayons-story__secondary fw-medium m:hidden"&gt;
              J3ffJessie
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                J3ffJessie
                
                
              
              &lt;div id="story-author-preview-content-4390662" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/j3ffjessie" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F129185%2F37c19477-2e89-4eb2-ba88-1c4dbb0f747d.jpeg" class="crayons-avatar__image" alt="" width="799" height="726"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;J3ffJessie&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/j3ffjessie/interviewing-doesnt-have-to-be-scary-practice-just-got-easier-3h4g" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Aug 14&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/j3ffjessie/interviewing-doesnt-have-to-be-scary-practice-just-got-easier-3h4g" id="article-link-4390662"&gt;
          Interviewing doesn't have to be scary. Practice just got easier!!
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/ai"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;ai&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/discord"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;discord&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/j3ffjessie/interviewing-doesnt-have-to-be-scary-practice-just-got-easier-3h4g" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;8&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/j3ffjessie/interviewing-doesnt-have-to-be-scary-practice-just-got-easier-3h4g#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              1&lt;span class="hidden s:inline"&gt;&amp;nbsp;comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            6 min read
          &lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
    </item>
    <item>
      <title>Revisiting DSA Through Mini Projects #2: HTML Syntax Validator</title>
      <dc:creator>Amelia Dutta</dc:creator>
      <pubDate>Thu, 05 Feb 2026 15:43:26 +0000</pubDate>
      <link>https://dev.to/amelia2802/revisiting-dsa-through-mini-projects-2-html-syntax-validator-1c35</link>
      <guid>https://dev.to/amelia2802/revisiting-dsa-through-mini-projects-2-html-syntax-validator-1c35</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Stack?
&lt;/h2&gt;

&lt;p&gt;A stack is a collection of objects that are inserted and removed according to the &lt;strong&gt;&lt;em&gt;Last-In,First-Out(LIFO)&lt;/em&gt;&lt;/strong&gt; principle.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;For example:&lt;/strong&gt;&lt;/em&gt; 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!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Second Project of This Series: A HTML Syntax Checker&lt;/strong&gt;&lt;br&gt;
Before diving deeper into the project and the logic, check the app here: &lt;a href="https://amelia2802.github.io/syntax-validator/" rel="noopener noreferrer"&gt;syntax-validator&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Let's See How It Works
&lt;/h2&gt;

&lt;p&gt;To check if HTML tags are balanced, we can use the &lt;em&gt;LIFO&lt;/em&gt; property of a Stack. The logic is as follows:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;&lt;strong&gt;Scan the Code&lt;/strong&gt;&lt;/em&gt;: We read the HTML string from left to right.&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;&lt;strong&gt;Push Open Tags:&lt;/strong&gt;&lt;/em&gt; Whenever we encounter an opening tag (like &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;) we push it onto our stack. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Pop Closing Tags:&lt;/em&gt;&lt;/strong&gt; When we find a closing tag (like &lt;code&gt;&amp;lt;/div&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;/p&amp;gt;&lt;/code&gt;) we check the top of our stack. 

&lt;ul&gt;
&lt;li&gt;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!&lt;/li&gt;
&lt;li&gt;If the stack is empty or the tags don't match, we know the syntax is invalid.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;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!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpox7lbcgfvb2usajny0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjpox7lbcgfvb2usajny0.png" alt="HTML syntax is valid" width="799" height="408"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Implementation
&lt;/h2&gt;

&lt;p&gt;I kept the implementation simple using vanilla JavaScript. Here is the snippet where the magic happens:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;!=&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="c1"&gt;// If it is an opening tag that means doesn't start with '/'&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;tag&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startsWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)){&lt;/span&gt;
        &lt;span class="nx"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tag&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="c1"&gt;// If it is a Cclosing tag&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Check if we have anything to close&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
            &lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerText&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Invalid Syntax&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="c1"&gt;// Check if it matches the last opened tag&lt;/span&gt;
        &lt;span class="c1"&gt;// Here tag.slice(1) removes the '/' so we compare "div" with "div"&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;tag&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;()){&lt;/span&gt;
            &lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerText&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Invalid Syntax&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The key methods here are &lt;em&gt;stack.push(tag)&lt;/em&gt; to add to our history of open tags and &lt;em&gt;stack.pop()&lt;/em&gt; to match them when we close a tag.&lt;/p&gt;

&lt;h2&gt;
  
  
  Limitation
&lt;/h2&gt;

&lt;p&gt;As I was revising stack and wanted to make a simple project on that topic so this project has some limitations:&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxb8xu2ngls5vmbohgquc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxb8xu2ngls5vmbohgquc.png" alt="Invalid HTML syntax" width="799" height="585"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>webdev</category>
      <category>datastructures</category>
      <category>html</category>
    </item>
    <item>
      <title>Revisiting DSA Through Mini Projects #1: Optimizing a Phonebook with HashMap</title>
      <dc:creator>Amelia Dutta</dc:creator>
      <pubDate>Mon, 02 Feb 2026 10:24:27 +0000</pubDate>
      <link>https://dev.to/amelia2802/revisiting-dsa-through-mini-projects-1-optimizing-a-phonebook-with-hashmap-370l</link>
      <guid>https://dev.to/amelia2802/revisiting-dsa-through-mini-projects-1-optimizing-a-phonebook-with-hashmap-370l</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  First Project of This Series: A Phonebook App
&lt;/h2&gt;

&lt;p&gt;Without further ado, here is the first project of my learning series: a Phonebook App. Check the app here: &lt;a href="https://hashphonebook.netlify.app/" rel="noopener noreferrer"&gt;https://hashphonebook.netlify.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I made this app some years ago but at that time I used the logic of &lt;em&gt;&lt;a href="https://www.geeksforgeeks.org/dsa/linear-search/" rel="noopener noreferrer"&gt;linear searching&lt;/a&gt;&lt;/em&gt;. 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.&lt;/p&gt;

&lt;p&gt;Initially I stored my contacts in a simple JavaScript Array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;userArray&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;userName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;number&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1237893457&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;userName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Oscar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;number&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;4562317895&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And to find a contact I used &lt;code&gt;.find()&lt;/code&gt; which loops through the array one by one:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Time Complexity: O(n) Linear Time&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;userArray&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;contact&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;contact&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;userName&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Oscar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  But Why Is Linear Search Not Enough?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;This is where performance actually matters not just whether the app works or not!&lt;/p&gt;

&lt;h2&gt;
  
  
  Optimizing the Search Logic
&lt;/h2&gt;

&lt;p&gt;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).&lt;/p&gt;

&lt;p&gt;This way, the lookup time is much faster &lt;strong&gt;&lt;em&gt;(O(1))&lt;/em&gt;&lt;/strong&gt; 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 &lt;em&gt;"Strawberry"&lt;/em&gt; you flip straight to &lt;em&gt;S&lt;/em&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;contactMap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1237893457&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Oscar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;4562317895&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="c1"&gt;// Time Complexity: O(1) Constant Time&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;contactMap&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It doesn't matter if I have 5 contacts or 5 billion. The lookup speed is constant.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Code Refactor
&lt;/h2&gt;

&lt;p&gt;Here is the actual code I changed in my project:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Before (Array.push):&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;userArray&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;userName&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;contactNumber&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;&lt;strong&gt;After (Map Key-Value):&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Storing as a key-value pair and making the search case-insensitive&lt;/span&gt;
&lt;span class="nx"&gt;contactMap&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;userName&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;()]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="na"&gt;originalName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;userName&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="na"&gt;number&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;contactNumber&lt;/span&gt; 
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;This is just the first step in my DSA revision journey and I plan to keep building small projects like this!&lt;/p&gt;

</description>
      <category>datastructures</category>
      <category>programming</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Step Into Mystic Falls: A Halloween Story Telling Game</title>
      <dc:creator>Amelia Dutta</dc:creator>
      <pubDate>Mon, 10 Nov 2025 06:06:07 +0000</pubDate>
      <link>https://dev.to/amelia2802/step-into-mystic-falls-a-halloween-story-telling-game-imb</link>
      <guid>https://dev.to/amelia2802/step-into-mystic-falls-a-halloween-story-telling-game-imb</guid>
      <description>&lt;p&gt;&lt;em&gt;&amp;gt; “&lt;strong&gt;There is no such thing as a bad idea. Only poorly executed awesome ones,&lt;/strong&gt;”&lt;/em&gt;&lt;br&gt;
Damon once said and I couldn't stop thinking about that while building this Halloween project.&lt;/p&gt;

&lt;p&gt;When I stumbled upon the &lt;a href="https://dev.to/challenges/frontend-2025-10-15"&gt;Frontend Challenge - Halloween Edition, Perfect Landing&lt;/a&gt;_, I thought why not revisit some old JavaScript fundamentals and create a landing page that truly captures the Halloween spirit?&lt;/p&gt;

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

&lt;p&gt;That's how The Founder's Ball was born: &lt;em&gt;&lt;strong&gt;an interactive storytelling game that lets users step into a dark ballroom, pick a partner, and uncover their supernatural identity.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Experience
&lt;/h2&gt;

&lt;p&gt;The entire app is built with &lt;strong&gt;HTML, CSS, and Vanilla JavaScript (ES6)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Technical Features:&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;The user journey flows through 6 distinct sections:&lt;/p&gt;

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

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

&lt;h2&gt;
  
  
  My Learnings
&lt;/h2&gt;

&lt;p&gt;This challenge gave me the perfect push to revisit my Vanilla JavaScript foundations and dust off some forgotten concepts.&lt;/p&gt;

&lt;p&gt;Here's what I brushed up on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Array Methods&lt;/strong&gt;: join(), find(), map()&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;State Management&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;DOM Manipulation&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ES6+ Features&lt;/strong&gt;: arrow functions, modules, destructuring&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://amelia2802.github.io/halloween-masquerade/" rel="noopener noreferrer"&gt;Play The Founder's Ball&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;&lt;a href="https://github.com/amelia2802/halloween-masquerade" rel="noopener noreferrer"&gt;View Source Code&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F681pzts2p9fx79a0le6p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F681pzts2p9fx79a0le6p.png" alt="User Story" width="800" height="422"&gt;&lt;/a&gt;&lt;br&gt;
Halloween doesn't always have to be scary. Sometimes it's about mystery, elegance, and the thrill of becoming something supernatural for a night.&lt;/p&gt;

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

&lt;p&gt;&lt;em&gt;All images used in this project are credited to their original owners.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>frontendchallenge</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>How Being Part of a Community Took Me from Hesitant to 5 PRs Merged</title>
      <dc:creator>Amelia Dutta</dc:creator>
      <pubDate>Sun, 02 Nov 2025 18:26:26 +0000</pubDate>
      <link>https://dev.to/amelia2802/how-being-part-of-a-community-took-me-from-hesitant-to-5-prs-merged-2l0d</link>
      <guid>https://dev.to/amelia2802/how-being-part-of-a-community-took-me-from-hesitant-to-5-prs-merged-2l0d</guid>
      <description>&lt;p&gt;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! 🎃 &lt;br&gt;
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.&lt;br&gt;
&lt;em&gt;(Before diving into my journey, check out &lt;a href="https://platform.torc.dev/#/r/ZILxKHb0/cp" rel="noopener noreferrer"&gt;Torc&lt;/a&gt;)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;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, &lt;em&gt;"Umm, nice... but where do I even start?"&lt;/em&gt; My calendar was already packed with other events so I didn't really have time to plan my contributions. &lt;br&gt;
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 &lt;a href="https://www.linkedin.com/in/thejasontorres/" rel="noopener noreferrer"&gt;Jason Torres&lt;/a&gt; for creating the torctoberfest repo. And I got a place to start! My interest was back, but then came the real question: &lt;em&gt;&lt;strong&gt;what do I contribute to?&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Beginning of torcReads
&lt;/h2&gt;

&lt;p&gt;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 &lt;a href="https://www.linkedin.com/in/angeloskatrantzis/" rel="noopener noreferrer"&gt;Angelos Katrantzis&lt;/a&gt; for starting the Torc Book Club; otherwise I might never have thought of this project in the first place! &lt;br&gt;
The initial plan was simple: build a website to log the books we read each month in the club. But then my brain went &lt;em&gt;"Wait, why not add more?"&lt;/em&gt; 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? 😎 &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxmbvb2uqz3s91gab6la9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxmbvb2uqz3s91gab6la9.png" alt="2 PRs Approved" width="738" height="158"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After hosting it for testing, I realized something... &lt;em&gt;Oops it is storing all the data locally!&lt;/em&gt; Which meant once deployed, everyone would see their own data. Total chaos incoming! &lt;br&gt;
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.&lt;/p&gt;

&lt;p&gt;Still I told myself &lt;em&gt;"we've got a week and a half before 31st October! Why not learn something new?"&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Learnings in the Process
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqjeaqu2gkbp0gd1cvfsv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqjeaqu2gkbp0gd1cvfsv.png" alt="torcReads Preview" width="800" height="746"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While setting up the database with the frontend I learned a few cool things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Row Level Security (RLS)&lt;/strong&gt;&lt;br&gt;
Access control that defines who can read, insert, update, or delete specific rows based on policies.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Migration Files&lt;/strong&gt;&lt;br&gt;
Version controlled SQL scripts that track and apply database schema changes over time, allowing teams to sync database structures across environments.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;CRUD Operations (Create, Read, Update, Delete)&lt;/strong&gt;&lt;br&gt;
The four fundamental database operations: Create adds new data, Read retrieves it, Update modifies it, and Delete removes it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Uploading files to cloud&lt;/strong&gt;&lt;br&gt;
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.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Organizing files&lt;/strong&gt;&lt;br&gt;
Containers that group and organize related files in cloud storage.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Public vs Private buckets&lt;/strong&gt;&lt;br&gt;
Access control for file storage; public buckets allow anyone with the URL to download files while private buckets require authentication.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Check out the Torctoberfest Repo here: &lt;a href="https://github.com/jasonetorres/torctoberfest" rel="noopener noreferrer"&gt;https://github.com/jasonetorres/torctoberfest&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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 &lt;a href="https://www.linkedin.com/in/pat-clarke-dev/" rel="noopener noreferrer"&gt;Pat Clark&lt;/a&gt; for reviewing and giving thoughtful feedback on each of my pull requests. &lt;/p&gt;

&lt;p&gt;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! &lt;/p&gt;

&lt;p&gt;Happy Hacking! 🕸️👻&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>hacktoberfest</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
