<?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>Forem: Kaavian Sivam</title>
    <description>The latest articles on Forem by Kaavian Sivam (@kaavian).</description>
    <link>https://forem.com/kaavian</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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1134596%2F7cfc28dd-9d00-4a72-97fe-afd2d2221813.jpg</url>
      <title>Forem: Kaavian Sivam</title>
      <link>https://forem.com/kaavian</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/kaavian"/>
    <language>en</language>
    <item>
      <title>A Guide To Launch Your Dev Tool on Hacker News — Track Where Your Conversions Came From</title>
      <dc:creator>Kaavian Sivam</dc:creator>
      <pubDate>Sat, 25 Nov 2023 15:34:49 +0000</pubDate>
      <link>https://forem.com/krunchdata/a-guide-to-launch-your-dev-tool-on-hacker-news-track-where-your-conversions-came-from-3jk2</link>
      <guid>https://forem.com/krunchdata/a-guide-to-launch-your-dev-tool-on-hacker-news-track-where-your-conversions-came-from-3jk2</guid>
      <description>&lt;h3&gt;
  
  
  A Guide To Launch Your Dev Tool on Hacker News — Track Where Your Conversions Came From
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ET8acsDx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/0%2AuAZgReGJcvHDa8gP.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ET8acsDx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/0%2AuAZgReGJcvHDa8gP.png" alt="" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hacker News (HN) is a popular news website for developers, techies, and startups. It has become a go-to resource for those looking for the latest news and updates in the tech industry. HN is similar to Product Hunt in that it works based on upvotes — the more upvotes a post gets, the higher it will appear on the site. This means that the content on HN is curated by its users and mods. The most popular posts are the ones that get the most attention.&lt;/p&gt;

&lt;p&gt;If you are a developer or a startup looking to launch your product, HN can be a great platform to showcase your work. In this blog post, we will discuss the differences between launching on Product Hunt (PH) and HN and provide some tips on launching your dev tool on HN.&lt;/p&gt;

&lt;h3&gt;
  
  
  Product Hunt Vs. Hacker News
&lt;/h3&gt;

&lt;p&gt;While launching a product, people often end up with just the Product Hunt. While Product Hunt is a platform focused on product discovery, HN focuses more on news and discussion. PH is filled with tech founders, product folks, and entrepreneurs, while HN is loaded with software professionals, IT guys, and tech enthusiasts. PH engagement is often around the utility and features, while HN is around tech details, functionalities, and features.&lt;/p&gt;

&lt;p&gt;In summary, launching on PH may be more beneficial if your product is focused on discovery and utility, while launching on HN may be more beneficial if your product is focused on tech details and functionalities.&lt;/p&gt;

&lt;p&gt;We have written a similar blog on &lt;a href="https://krunchdata.io/blog/ultimate-guide-on-product-hunt-launch-for-dev-tools"&gt;launching your dev tool on Product Hunt&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why is Hacker News Crucial for Dev Tools?
&lt;/h3&gt;

&lt;p&gt;I asked KrunchGPT, a custom GPT built for Dev Marketers or DevRels, why dev tools should launch in HN. It said this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Targeted Audience&lt;/strong&gt; : HN is a hub for developers, tech enthusiasts, and industry experts, making it an ideal platform to reach potential users who understand and value developer tools.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Valuable Feedback&lt;/strong&gt; : The HN community is known for providing insightful and constructive feedback, which can be crucial for refining and improving your tools.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Brand Visibility&lt;/strong&gt; : Regular engagement on HN increases brand awareness and visibility within the tech community, enhancing your product’s reputation and recognition.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Network Building&lt;/strong&gt; : HN offers opportunities to connect with industry professionals, potential collaborators, and investors, opening doors for partnerships and growth.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Market Validation and User Acquisition&lt;/strong&gt; : Positive reception on HN can serve as market validation for your tool and drive significant traffic to your website, aiding in user acquisition.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;To give you some examples of how some dev tools leveraged to get more eyes on their product, &lt;a href="http://www.groovehq.com/blog/hacker-news"&gt;Groove received 105,000 visits from HN&lt;/a&gt; one month before launching their last version. They got 97 signups and 14 paying customers.&lt;/p&gt;

&lt;h3&gt;
  
  
  How do you launch your dev tool on HN?
&lt;/h3&gt;

&lt;p&gt;If you have decided to launch your dev tool on HN, there is a set of &lt;a href="https://news.ycombinator.com/yli.html"&gt;instructions that HN itself provides&lt;/a&gt;. I’m sharing a few more tips to help you make the most out of the opportunity:&lt;/p&gt;

&lt;h3&gt;
  
  
  Create a Proper Story
&lt;/h3&gt;

&lt;p&gt;One of the keys to success on HN is creating a proper story. You need to speak the audience’s language and state the problem statement you’re solving clearly. Tell your story and why you picked this problem to solve. Make sure that your story is compelling and interesting and that it resonates with the HN audience.&lt;/p&gt;

&lt;h3&gt;
  
  
  Make Your Landing Page More Understandable
&lt;/h3&gt;

&lt;p&gt;Your landing page is the first thing people will see when they click on your HN post. This means that it needs to be clear, concise, and easy to understand. Use visuals and graphics to help explain your product and its features. Make sure that your landing page is optimized for mobile devices and that it loads quickly.&lt;/p&gt;

&lt;p&gt;Let’s take these &lt;a href="https://news.ycombinator.com/item?id=30617507"&gt;Example 1&lt;/a&gt; &amp;amp; &lt;a href="https://news.ycombinator.com/item?id=30699795"&gt;Example 2&lt;/a&gt; threads, and you can see how important having the right messaging on the landing page is.&lt;/p&gt;

&lt;h3&gt;
  
  
  Set Up a Proper Pricing Page
&lt;/h3&gt;

&lt;p&gt;If you are selling a product, you need to make sure that you have a proper pricing page. This should clearly state the price of your product, any discounts or promotions you are offering, and any other relevant information. Make sure that your pricing page is easy to navigate and that it is optimized for conversions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Check Whether All Things Are Working in Your Product
&lt;/h3&gt;

&lt;p&gt;Before launching your dev tool on HN, you must ensure everything is working properly. Test your product thoroughly and check whether all its features work as intended. Make sure that there are no bugs or glitches that could cause problems for users.&lt;/p&gt;

&lt;h3&gt;
  
  
  Use Repo Instead of Landing Pages
&lt;/h3&gt;

&lt;p&gt;One of the best ways to showcase your product on HN is to use your repository instead of a landing page. Given that most HN users are techies, redirecting them to your GitHub repo can lead to stars and forks, which in turn increase your product’s visibility. Ensure that your README file is as good as your landing page and updated regularly.&lt;/p&gt;

&lt;h3&gt;
  
  
  Make a Direct Title Stating the Intent
&lt;/h3&gt;

&lt;p&gt;Your title is one of the most important parts of your HN post. It needs to be direct and to the point and clearly state your post’s intent. Make sure that your title has &lt;em&gt;“Show HN”&lt;/em&gt; or &lt;em&gt;“Launch HN”&lt;/em&gt; in front of it. Don’t try to sell to the audience and definitely stay away from clickbait titles like “5 ways to solve X problem”, “How to solve X problem using our solution”. I suggest you to give it a read our previous blog on &lt;a href="https://dev.to/akhil_89/creating-and-distributing-content-for-developer-communities-a-quick-guide-373p-temp-slug-9721943"&gt;how to create content for developer communities&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Post Multiple Times
&lt;/h3&gt;

&lt;p&gt;Posting your dev tool on HN multiple times can increase its visibility and reach. However, you need to be careful not to overdo it. Posting too often can be seen as spammy and may result in your posts being flagged or removed. A good rule of thumb is to post once every few weeks or when you have a major update or new feature to showcase.&lt;/p&gt;

&lt;h3&gt;
  
  
  Set Up Analytics to Track Your Visitors
&lt;/h3&gt;

&lt;p&gt;Finally, you need to set up analytics to track your visitors. Use tools like &lt;a href="https://kdta.io/krunchdata-io_167"&gt;Krunch&lt;/a&gt; to track the visitors from your HN traffic. This will help you see how many people visit your landing page and sign up for your product. Use this information to optimize your landing page and to improve your product.&lt;/p&gt;

&lt;h3&gt;
  
  
  Other Small Things You Need to Take Care of
&lt;/h3&gt;

&lt;p&gt;In addition to the tips above, there are some other small things that you need to take care of when launching your dev tool on HN. These include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Avoid Sharing Link:&lt;/strong&gt; Don’t share the direct link of your posts and ask for upvotes. HN won’t consider the upvotes coming from direct links&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Office Upvotes don’t count:&lt;/strong&gt; HN considers one upvote per IP address. If your ask your employees who are all in the same IP upvote your post, you will just see one. Once you add your post, you can see that under &lt;em&gt;Newest&lt;/em&gt;. Ask your friends from different IP to upvote.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Timing your launch:&lt;/strong&gt; Weekends tend to have less competition but have good traffic. Weekdays during working hours are also good to go.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Engaging with your comments:&lt;/strong&gt; Respond to comments on your post and engage with your audience to build a community around your product.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Leveraging your network to start the conversation:&lt;/strong&gt; Use your social media channels and personal network to promote your HN post and drive traffic to your landing page.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Being mindful of how you talk:&lt;/strong&gt; Make sure that you are respectful and professional in all of your interactions on HN. This will help you to build a positive reputation and to gain the trust of your audience.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;In conclusion, launching your dev tool on HN can be a great way to showcase your work and reach a wider audience. By following the tips outlined in this post, you can increase your chances of success and make the most out of this opportunity. Remember to create a compelling story, make your landing page more understandable, set up a proper pricing page, check that all things are working in your product, use a repository instead of a landing page, make a direct title stating the intent, post multiple times, set up analytics to track your visitors and take care of other small things.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally published at&lt;/em&gt; &lt;a href="https://krunchdata.io/blog/a-guide-to-launch-your-dev-tool-on-hacker-news"&gt;&lt;em&gt;https://krunchdata.io&lt;/em&gt;&lt;/a&gt; &lt;em&gt;on November 25, 2023.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>productlaunch</category>
      <category>hackernews</category>
      <category>devtools</category>
      <category>devrel</category>
    </item>
    <item>
      <title>Ultimate Guide on Product Hunt Launch for Dev Tools</title>
      <dc:creator>Kaavian Sivam</dc:creator>
      <pubDate>Sat, 25 Nov 2023 15:13:16 +0000</pubDate>
      <link>https://forem.com/krunchdata/ultimate-guide-on-product-hunt-launch-for-dev-tools-ki6</link>
      <guid>https://forem.com/krunchdata/ultimate-guide-on-product-hunt-launch-for-dev-tools-ki6</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7qTSYhQf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/0%2ARsA2L9Qcl65HTTRe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7qTSYhQf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/0%2ARsA2L9Qcl65HTTRe.png" alt="" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;With the rising popularity of Product Hunt, it is becoming increasingly crucial for dev tools to have a well-executed launch that will garner the attention of developers worldwide. Your product’s visibility and reach depend heavily on the way you launch your product. Especially when planning your product release, it’s crucial to understand the nuances of launching a product in the Product Hunt.&lt;/p&gt;

&lt;p&gt;In this article, we will discuss why Product Hunt is the perfect platform for dev tools, the benefits of launching on Product Hunt, and strategies for a successful dev tool launch.&lt;/p&gt;

&lt;p&gt;So, let’s dive in and get started!&lt;/p&gt;

&lt;h4&gt;
  
  
  What is Product Hunt
&lt;/h4&gt;

&lt;p&gt;Let’s start with the basics.&lt;/p&gt;

&lt;p&gt;Product Hunt is not just a platform; it’s a bustling hub for product discovery with a spotlight on technology and developer tools. In this platform, there are three personas: Makers, the creative minds behind products; Hunters, the enthusiasts keen on discovering and sharing; and Marketers, the individuals propelling products into the limelight. Think of it as a digital marketplace where GitHub’s Atom soared to fame through a meticulously executed Product Hunt launch, capturing the attention of developers worldwide.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why Launch Dev Apps on Product Hunt?
&lt;/h3&gt;

&lt;p&gt;But why choose Product Hunt for your grand unveiling? The answer lies in its developer-inclusive exposure. While marketers play a crucial role, Product Hunt magnetically draws a massive developer audience. According to a recent discussion within the Product Hunt community, there are over &lt;a href="https://www.producthunt.com/discussions/how-many-people-here-are-software-engineers-or-developers"&gt;78% of its users are tech-savvy creators&lt;/a&gt;. This makes it the ideal platform for dev tools, as exemplified by the monumental engagement witnessed during VS Code’s Product Hunt launch, highlighting the platform’s inherently developer-friendly environment.&lt;/p&gt;

&lt;h3&gt;
  
  
  Benefits of Launching Dev Tools on Product Hunt
&lt;/h3&gt;

&lt;p&gt;The primary advantage of launching on Product Hunt is the chance to connect with a highly targeted developer audience. Dev tools, when showcased here, reach a concentrated audience actively seeking innovative solutions. This ensures not only visibility but also opens the door to valuable developer feedback. Dev tools such as &lt;a href="https://blog.producthunt.com/the-most-successful-launches-on-product-hunt-a1f455c97de2"&gt;Robinhood, Houseparty, eero, etc&lt;/a&gt;, show us how a Product Hunt launch facilitated direct feedback loops, contributing significantly to product improvements.&lt;/p&gt;

&lt;h3&gt;
  
  
  Strategies for a Successful Dev Tool Launch on Product Hunt
&lt;/h3&gt;

&lt;p&gt;I asked the KrunchGPT, a custom GPT that &lt;a href="https://kdta.io/krunchdata-io_162"&gt;Krunch&lt;/a&gt; has built for developer marketers and DevRels, for tips on successfully launching dev tools on Product Hunt. This is what it said:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Understand Product Hunt&lt;/strong&gt; : It’s crucial to understand that Product Hunt focuses on new tech or significantly revamped tech. Understanding the platform’s curation algorithm and community preferences is essential​​.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Build a Network on Product Hunt&lt;/strong&gt; : Engage with the community and create a network. Upvotes and comments from high-value users can significantly impact your launch​​.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Engage with the Community&lt;/strong&gt; : Active participation and responding to comments and feedback during the launch are crucial.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Prepare Marketing Assets&lt;/strong&gt; : Develop compelling marketing materials and a landing page to support your launch​​.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Build Interest&lt;/strong&gt; : Get people excited about your product before the launch. The first 24–48 hours are critical for traction​​.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Apart from these inputs, I would like to share a few more to you.&lt;/p&gt;

&lt;h3&gt;
  
  
  Create a Contact List
&lt;/h3&gt;

&lt;p&gt;Launching on Product Hunt is not a solo act. It begins with creating a contact list and identifying key influencers and potential users within the developer community. As mentioned by KrunchGPT before, timing is critical, especially in the first four hours post-launch, with 12:00 AM PST identified as the optimal launch window. Redis Labs’ success story is a testament to the impact of personalized outreach to influential developers during their Product Hunt launch.&lt;/p&gt;

&lt;p&gt;To get started, here are some of the communities we recommend you interact with: &lt;a href="https://www.facebook.com/groups/producthuntupvoters/"&gt;Product Hunt Upvoters&lt;/a&gt;, &lt;a href="https://www.facebook.com/groups/startupproductlaunches/"&gt;Startup Product Launches&lt;/a&gt;, &lt;a href="https://www.facebook.com/groups/1131418596887815/"&gt;Product Hunt Exchange communities&lt;/a&gt;, &lt;a href="https://www.facebook.com/groups/producthunteurope/"&gt;Product Hunt Europe&lt;/a&gt;, &lt;a href="https://www.facebook.com/groups/producthunt.exchange/"&gt;Product Hunt Upvote Promotion Exchange club&lt;/a&gt;, &lt;a href="https://www.reddit.com/r/ProductHunters/"&gt;Product Hunters&lt;/a&gt;, &lt;a href="https://www.reddit.com/r/indiehackers/"&gt;Indie Hackers&lt;/a&gt;, &lt;a href="https://chat.whatsapp.com/FBITt3NSBoQ6aPalkKSNJE"&gt;Invincible Product Hunters&lt;/a&gt;, and &lt;a href="https://www.reddit.com/r/GrowthHacking/"&gt;Startup Growth Hacking&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Warm Up Your Product Hunt Account
&lt;/h3&gt;

&lt;p&gt;Engaging with the Product Hunt community before the launch is akin to tuning your instrument before a performance. Establishing a genuine presence and active participation in dedicated dev tools communities significantly enhances visibility. GitLab, for instance, actively immersed itself in discussions, creating anticipation and laying the groundwork for successful dev tool launches.&lt;/p&gt;

&lt;h3&gt;
  
  
  Review and Warm Up Makers Account
&lt;/h3&gt;

&lt;p&gt;The maker community is at the heart of Product Hunt, and actively participating in discussions among fellow makers is pivotal. Building authentic relationships within this community sets the stage for a more impactful launch. The team behind Atom, for example, engaged proactively in the Product Hunt community before launching new dev tools, establishing credibility and anticipation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Crafting a Memorable Introduction
&lt;/h3&gt;

&lt;p&gt;First impressions matter, especially in the visually-driven world of Product Hunt. Crafting a memorable introduction involves designing eye-catching visuals — be it a GIF or image for the dev tool’s logo. Visual appeal is more than aesthetics; it significantly influences the chance of getting upvoted. Visual Studio Code’s captivating logo and GIF, for instance, contributed significantly to its immediate success.&lt;/p&gt;

&lt;h3&gt;
  
  
  Competitor Analysis
&lt;/h3&gt;

&lt;p&gt;In the sea of launches, standing out is imperative. Thorough competitor analysis is akin to navigating these waters skillfully. Checking for existing launches from competitors around the scheduled launch date and identifying opportunities to highlight unique features ensures differentiation. GitLab’s comprehensive competitor analysis, for instance, ensured that its launch stood out with distinctive features, setting it apart in a crowded landscape.&lt;/p&gt;

&lt;h3&gt;
  
  
  Avoid Blind Requests for Upvotes
&lt;/h3&gt;

&lt;p&gt;Building organic relationships is a cornerstone of success on Product Hunt. Rather than blindly seeking upvotes, focus on providing value to discussions. Genuine engagement increases the likelihood of upvotes. It is important to hone in on building relationships and adding value, resulting in organic upvotes and a more authentic presence within the developer community.&lt;/p&gt;

&lt;h3&gt;
  
  
  Exclusive Discounted Pricing for Hunters
&lt;/h3&gt;

&lt;p&gt;Incentivizing early adoption is a powerful strategy. Offering exclusive pricing for Product Hunt users creates a sense of exclusivity for the Hunter community, fostering loyalty and increasing conversions. According to a survey conducted by the Product Hunt Community, &lt;a href="https://www.producthunt.com/discussions/promotion-codes-on-product-hunt-what-works-best"&gt;100% of the users would like to be offered exclusive discounts&lt;/a&gt;, encouraging early adoption and solidifying their position within the developer community.&lt;/p&gt;

&lt;h3&gt;
  
  
  Preemptively Prepare FAQs
&lt;/h3&gt;

&lt;p&gt;Anticipating and addressing potential questions is a proactive strategy to provide a seamless experience for users during the launch. Responding to FAQs within the first hour significantly increases satisfaction, contributing to a positive developer experience. Sentry’s founders actively addressed developer queries during their Product Hunt launch, showcasing a commitment to user satisfaction and engagement.&lt;/p&gt;

&lt;p&gt;As we wrap up this comprehensive guide, it’s crucial to reiterate the key strategies for a successful dev tool launch on Product Hunt. The emphasis lies in the developer-centric nature of this community. From engaging influencers to crafting visually compelling introductions, every step is geared towards resonating with the tech-savvy audience that frequents Product Hunt.&lt;/p&gt;

&lt;p&gt;Remember, the first four hours post-launch are pivotal, and timing is everything. The optimal launch time at 12 PM PST aligns with the active hours of the global developer community. Warming up your Product Hunt account, actively engaging with fellow makers, and crafting a memorable introduction set the stage for a compelling launch. Competitor analysis ensures you stand out, avoiding blind requests for upvotes while building authentic relationships within the developer community.&lt;/p&gt;

&lt;p&gt;Product Hunt isn’t just a platform; it’s a thriving ecosystem where dev tools can thrive. Embrace the developer community, leverage their insights, and embark on a journey of continuous improvement.&lt;/p&gt;

&lt;p&gt;Your success on Product Hunt is not just about launching a dev tool; it’s about becoming an integral part of a community that values innovation and collaboration. Here’s to your dev tool’s triumphant launch on Product Hunt!&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Originally published at&lt;/em&gt; &lt;a href="https://dev.to/akhil_89/the-ultimate-guide-on-product-hunt-launch-for-dev-tools-i8a-temp-slug-2734990"&gt;&lt;em&gt;https://krunchdata.io&lt;/em&gt;&lt;/a&gt; &lt;em&gt;on November 25, 2023.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devrel</category>
      <category>devtools</category>
      <category>producthunt</category>
      <category>developermarketing</category>
    </item>
    <item>
      <title>How I built my first app using ChatGPT</title>
      <dc:creator>Kaavian Sivam</dc:creator>
      <pubDate>Thu, 03 Aug 2023 19:25:56 +0000</pubDate>
      <link>https://forem.com/kaavian/how-i-built-my-first-app-using-chatgpt-1kjl</link>
      <guid>https://forem.com/kaavian/how-i-built-my-first-app-using-chatgpt-1kjl</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GiC1fL5g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/1%2AoB08c-MyBeW_7KzhapgfvA.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GiC1fL5g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/1%2AoB08c-MyBeW_7KzhapgfvA.png" alt="banner image" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hey folks!&lt;br&gt;
I wanted to share with you all about the Q&amp;amp;A app I built from scratch using ChatGPT with the sole purpose of learning how to build an app. But , before going further, I need to tell you my background a bit.&lt;/p&gt;

&lt;p&gt;This month, I completed 5 years in content/growth marketing, and I have a Bachelor’s in Computer Science Engineering from one of the top 10 colleges in my state. It’s been almost 5.5 to 6 years since I last programmed anything. In fact, I’ve never actually developed anything during my college days. I wrote about &lt;a href="https://www.linkedin.com/pulse/my-journey-from-being-failure-become-zohoite-kaavian-sivam/"&gt;my journey on how I joined Zoho as a content writer&lt;/a&gt; a few years back.&lt;/p&gt;

&lt;p&gt;Enough of my background. Now, I’ll give you the context of this blog.&lt;/p&gt;

&lt;p&gt;At &lt;a href="http://requestly.io"&gt;Requestly&lt;/a&gt;, where I’m currently handling the Growth team, we decided to spend a day exploring AI and how it can influence our productivity. We were tasked to either build or find a good AI tool and had a “demo hour” where we showcased what we built/found.&lt;/p&gt;

&lt;p&gt;Unsurprisingly, many of my colleagues found a lot of useful tools that can actually improve how we function at Requestly. A few tools I would like to mention here are &lt;a href="https://writemyprd.com/"&gt;writemyPRD&lt;/a&gt;, &lt;a href="https://app.yoodli.ai/"&gt;yoodli&lt;/a&gt;, and &lt;a href="http://reword.com"&gt;reword&lt;/a&gt;. I found these tools very interesting, and you all should give them a try.&lt;/p&gt;

&lt;p&gt;Now, I had way too many ideas on my mind that I wasn’t sure which one I should explore. Then, I finally settled down with the idea of building a ChatGPT module within our blogs and products. While I was exploring ChatGPT, I found this plugin called LinkReader that helps ChatGPT to read all the content within a given URL.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1-583Z-6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/0%2AbRSJDqKcakVKa-mY" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1-583Z-6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/0%2AbRSJDqKcakVKa-mY" alt="ChatGPT screen" width="800" height="680"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;( &lt;strong&gt;&lt;em&gt;P.S. This plugin was not available by the time I published this article! One more reason for me to be glad that I built this tool&lt;/em&gt;&lt;/strong&gt;  )&lt;/p&gt;

&lt;p&gt;I wanted to build a similar tool that can read the content we have already published and provide a summary of the questions asked with a link to the relevant page. As a guy who can’t actually build, I just turned to ChatGPT itself to build an in-house ChatGPT.&lt;/p&gt;
&lt;h3&gt;
  
  
  It’s all about prompts!
&lt;/h3&gt;

&lt;p&gt;Initially, I didn’t even know where to start and couldn’t find heads or tails of it. I started with building a link scrapper, so I went to ChatGPT and asked it to build me the scrapper by itself. It gave me a code that I didn’t even know how to run it!!&lt;/p&gt;

&lt;p&gt;I went back to the basics. I tried to learn what Python Flask is, how to install Python on my Mac and how to run Python scripts. Gathered some ideas, installed Python and ran the script.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Boom! ran into something that every developer treads.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8heERurm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/0%2AzWcEeb-NniMYPixe" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8heERurm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/1024/0%2AzWcEeb-NniMYPixe" alt="" width="800" height="573"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I had to call in some Air Support to clear out the buggies. My Co-founders and colleagues: Sagar, Sahil, and Rohan, were kind enough to get on a huddle with me and found that the port I was trying to call was used by some other tool, and that’s why Localhost wasn’t loading. While exploring this, I learned methods for identifying which tools are utilizing specific ports. You can also &lt;a href="https://codinhood.com/nano/macos/find-kill-proccess-port-macos"&gt;learn it from here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;My objective was to build a tool that can answer questions based on the URL I’m giving. Again, I turned to ChatGPT, and it advised me to go with Python Flask. I stayed with Bootstrap as the front end because I had experience in building basic web pages earlier. I named the app &lt;strong&gt;Vina&lt;/strong&gt; as it means &lt;em&gt;question&lt;/em&gt; in Tamil.&lt;/p&gt;

&lt;p&gt;Reading all the content in a given URL will require a combination of different libraries, such as requests to handle the HTTP requests and &lt;code&gt;beautifulsoup4&lt;/code&gt; or &lt;code&gt;lxml&lt;/code&gt; to parse the HTML content. So let me walk you through the process of creating the Vina app.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1: Fetch and Parse Web Content&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You will first need to fetch and parse the web content. This is how the code will look like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import requests
from bs4 import BeautifulSoup

def fetch_webpage(url):
    response = requests.get(url)
    return response.text
def parse_webpage(html_content):
    soup = BeautifulSoup(html_content, 'html.parser')
    return soup
def extract_content(soup):
    text = ' '.join(soup.stripped_strings)
    return text
def main(url):
    html_content = fetch_webpage(url)
    soup = parse_webpage(html_content)
    text = extract_content(soup)
    print(text)
if __name__ == ' __main__':
    main('&amp;lt;https://example.com&amp;gt;')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;fetch_webpage&lt;/code&gt; function takes a URL and returns the HTML content of that page as a string. The &lt;code&gt;parse_webpage&lt;/code&gt; function takes HTML content and returns a BeautifulSoup object that you can use to navigate the HTML tree. The &lt;code&gt;extract_content&lt;/code&gt; function takes a BeautifulSoup object and returns a string with all the text on the page. The main function ties everything together. It fetches the webpage, parses it, extracts the content, and then prints the content.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2: Setup OpenAI GPT Model&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Firstly, you’ll need to install the OpenAI python client.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pip install openai
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, you’ll need to set up the API key. This key is usually provided when you sign up for OpenAI’s API service. You can set this up in your environment using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import openai
openai.api_key = 'your-api-key'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 3: Process the User Question and Generate a Response&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;With the web content and user question, you can then call the API to generate a response. The idea here is to prepend the question with the content of the webpage, which will serve as the context for the model. Then, ask the model to generate a summary or answer based on this context.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def generate_answer(context, question):
    prompt = context + "\\n\\n" + question
    response = openai.Completion.create(
        engine="text-davinci-002",
        prompt=prompt,
        temperature=0.5,
        max_tokens=150
    )
    return response.choices[0].text.strip()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this function, context is the content of the webpage, and question is the user's question.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 4: Stitching all of them together&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Now that we built a content parser and response generator, it’s time to stitch them together to get our Vina app.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import requests
from bs4 import BeautifulSoup
import openai

# Functions to Fetch and Parse Web Content
def fetch_webpage(url):
    response = requests.get(url)
    return response.text
def parse_webpage(html_content):
    soup = BeautifulSoup(html_content, 'html.parser')
    return soup
def extract_content(soup):
    text = ' '.join(soup.stripped_strings)
    return text
# Function to Generate Answer Using OpenAI GPT-3/GPT-4
def generate_answer(context, question):
    prompt = context + "\\n\\n" + question
    response = openai.Completion.create(
        engine="text-davinci-002",
        prompt=prompt,
        temperature=0.5,
        max_tokens=150
    )
    return response.choices[0].text.strip()
# Main Function
def main(url, question):
    # Fetch and parse web content
    html_content = fetch_webpage(url)
    soup = parse_webpage(html_content)
    context = extract_content(soup)

    # Set OpenAI API Key
    openai.api_key = 'your-api-key' # Replace with your actual OpenAI API key
    # Generate and print the answer
    answer = generate_answer(context, question)
    print(answer)
# Execution
if __name__ == ' __main__':
    url = input("Enter a URL: ")
    question = input("Enter your question: ")
    main(url, question)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;However, I faced 2 major problems. When I ran this code, I came across this error:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;InvalidRequestError: This model's maximum context length is 4097 tokens, however you requested 4694 tokens (4544 in your prompt; 150 for the completion). Please reduce your prompt; or completion length.&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;It means the limit on the maximum number of tokens that the OpenAI API can process in one request is 4097, but my request is 4694 tokens. I had to truncate the request and limit it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def extract_content(soup):
    text = ' '.join(soup.stripped_strings)
    # Truncate text to fit within token limits
    truncated_text = text[:4096]
    return truncated_text
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The second major issue I faced was that the code ChatGPT gave was just returning the question I asked instead of providing an answer for it. It was appending the question at the end of the context, which can lead to such situations where the answer is not as expected.&lt;/p&gt;

&lt;p&gt;So, I went back to ChatGPT and shared the error, and it rectified the mistake by modifying the &lt;code&gt;generate_answer&lt;/code&gt; function like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def generate_answer(context, question):
    prompt = f"{context}\\n\\n{question}\\nAnswer:"
    response = openai.Completion.create(
        engine="text-davinci-002",
        prompt=prompt,
        temperature=0.5,
        max_tokens=150
    )
    return response.choices[0].text.strip()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It just changed the format of my prompts to a Q&amp;amp;A format so that the code can process the question and answer it. Once I updated the code, Vina was able to give me answers to the questions I was asking.&lt;/p&gt;

&lt;p&gt;Now, I asked ChatGPT to modify the existing code to answer multiple questions for the given URL, and it changed the code like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from flask import Flask, request, render_template, redirect, url_for, session
import requests
from bs4 import BeautifulSoup
import openai

app = Flask( __name__ )
app.secret_key = 'your_secret_key' # Replace with your secret key
# Functions to Fetch and Parse Web Content
def fetch_webpage(url):
    response = requests.get(url)
    return response.text
def parse_webpage(html_content):
    soup = BeautifulSoup(html_content, 'html.parser')
    return soup
def extract_content(soup):
    text = ' '.join(soup.stripped_strings)
    truncated_text = text[:3946] # Truncate text to fit within token limits
    return truncated_text
# Function to Generate Answer Using OpenAI GPT-3/GPT-4
def generate_answer(context, question):
    prompt = f"{context}\\n\\n{question}\\nAnswer:"
    response = openai.Completion.create(
        engine="text-davinci-002",
        prompt=prompt,
        temperature=0.5,
        max_tokens=150
    )
    return response.choices[0].text.strip()
@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        url = request.form.get('url')
        # Fetch and parse web content
        html_content = fetch_webpage(url)
        soup = parse_webpage(html_content)
        context = extract_content(soup)
        session['context'] = context
        return redirect(url_for('ask'))
    return render_template('index.html')
@app.route('/ask', methods=['GET', 'POST'])
def ask():
    if 'context' not in session:
        return redirect(url_for('index'))
    if 'answer' in session:
        answer = session['answer']
        session.pop('answer', None)
    else:
        answer = None
    if request.method == 'POST':
        question = request.form.get('question')
        # Set OpenAI API Key
        openai.api_key = 'your-api-key' # Replace with your actual OpenAI API key
        # Generate answer
        answer = generate_answer(session['context'], question)
        session['answer'] = answer
        return redirect(url_for('ask'))
    return render_template('ask.html', answer=answer)
if __name__ == ' __main__':
    app.run(port=5000, debug=True)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now all I have to do it to build a front for this code where I can share a URL and ask questions from the URL. So, this is the webpage I created for the Vina tool. I needed two pages- an ‘index’ page where I’ll be feeding the URL and an ‘ask’ page where I’ll be asking my questions and getting my answers.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!-- index.html --&amp;gt;

&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
    &amp;lt;title&amp;gt;Web Content QA&amp;lt;/title&amp;gt;
    &amp;lt;link href="&amp;lt;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&amp;gt;" rel="stylesheet"&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body class="bg-light"&amp;gt;
    &amp;lt;div class="container py-5"&amp;gt;
        &amp;lt;h1 class="mb-4"&amp;gt;Enter URL&amp;lt;/h1&amp;gt;
        &amp;lt;form method="POST" action="/"&amp;gt;
            &amp;lt;div class="mb-3"&amp;gt;
                &amp;lt;input type="url" id="url" name="url" class="form-control" placeholder="&amp;lt;https://example.com&amp;gt;" required&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;button type="submit" class="btn btn-primary"&amp;gt;Submit&amp;lt;/button&amp;gt;
        &amp;lt;/form&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&amp;lt;!-- ask.html --&amp;gt;

&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
    &amp;lt;title&amp;gt;Web Content QA&amp;lt;/title&amp;gt;
    &amp;lt;link href="&amp;lt;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&amp;gt;" rel="stylesheet"&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body class="bg-light"&amp;gt;
    &amp;lt;div class="container py-5"&amp;gt;
        &amp;lt;h1 class="mb-4"&amp;gt;Ask a Question&amp;lt;/h1&amp;gt;
        &amp;lt;form method="POST" action="/ask"&amp;gt;
            &amp;lt;div class="mb-3"&amp;gt;
                &amp;lt;label for="question" class="form-label"&amp;gt;Enter Question:&amp;lt;/label&amp;gt;
                &amp;lt;input type="text" id="question" name="question" class="form-control" required&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;button type="submit" class="btn btn-primary"&amp;gt;Ask&amp;lt;/button&amp;gt;
        &amp;lt;/form&amp;gt;
        {% if answer %}
        &amp;lt;div class="mt-5"&amp;gt;
            &amp;lt;h2&amp;gt;Answer:&amp;lt;/h2&amp;gt;
            &amp;lt;p&amp;gt;{{ answer }}&amp;lt;/p&amp;gt;
        &amp;lt;/div&amp;gt;
        {% endif %}
    &amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally, after spending close to 4 hours, this is what the Vina app looks like:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/yJL6kHGo7Bo"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;P.S. This blog was NOT written using ChatGPT&lt;/em&gt; 😜&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>bootstrap</category>
      <category>chatgptchatbot</category>
      <category>chatgpt</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
