<?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: Soumasish Dasgupta</title>
    <description>The latest articles on DEV Community by Soumasish Dasgupta (@soumasish2005).</description>
    <link>https://dev.to/soumasish2005</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%2F1807917%2F725b177d-8d29-4550-a821-bcd6074d2c4b.jpg</url>
      <title>DEV Community: Soumasish Dasgupta</title>
      <link>https://dev.to/soumasish2005</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/soumasish2005"/>
    <language>en</language>
    <item>
      <title>BrandSpark: AI-Powered Logo Generator with Google AI Studio</title>
      <dc:creator>Soumasish Dasgupta</dc:creator>
      <pubDate>Fri, 04 Jul 2025 14:52:25 +0000</pubDate>
      <link>https://dev.to/soumasish2005/brandspark-ai-powered-logo-generator-with-google-ai-studio-39l4</link>
      <guid>https://dev.to/soumasish2005/brandspark-ai-powered-logo-generator-with-google-ai-studio-39l4</guid>
      <description>&lt;p&gt;&lt;em&gt;This post is my submission for &lt;a href="https://dev.to/deved/build-apps-with-google-ai-studio"&gt;DEV Education Track: Build Apps with Google AI Studio&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I created BrandSpark, a web app that leverages Google Gemini and Imagen models (via Google AI Studio) to generate complete branding kits in seconds.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Key prompt used:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“Create an app which uses Al to generate unique logos and branding descriptions for businesses, projects, and teams. Users provide details and receive a custom logo and tagline created by Gemini.”&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;Additional features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Choice of logo styles (Modern, Retro, Geometric, etc.)&lt;/li&gt;
&lt;li&gt;Predefined color palettes (Vibrant, Earthy, Monochromatic, etc.)&lt;/li&gt;
&lt;li&gt;Downloadable PNG assets and persistent local state&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Here’s a quick look at BrandSpark in action:&lt;/p&gt;

&lt;ul&gt;
&lt;li&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%2Fhrro5gh8v4mtpl79rcqw.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%2Fhrro5gh8v4mtpl79rcqw.png" alt="Brandspark Landing Page" width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&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%2Fhphvntau7gjiloi5ynbl.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%2Fhphvntau7gjiloi5ynbl.png" alt="BrandSpark Logo Generation Page" width="800" height="414"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Also you can check out the website at: &lt;a href="https://brand-spark.netlify.app" rel="noopener noreferrer"&gt;BrandSpark&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Experience
&lt;/h2&gt;

&lt;p&gt;Working through the Build Apps with Google AI Studio track taught me:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Seamless API Integration:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;How to structure requests to Google Gemini for text‑based prompt engineering.&lt;/li&gt;
&lt;li&gt;    Chaining responses into Gemini model calls for high‑quality image outputs.&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;Prompt Engineering Nuance:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt; Small tweaks in phrasing dramatically affected logo composition and color balance.&lt;/li&gt;
&lt;li&gt; Iterating on prompts led to much crisper, on‑brand visuals.&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;State Management &amp;amp; UX Considerations:&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;Saving user inputs/results in localStorage made the experience frictionless.&lt;/li&gt;
&lt;li&gt;Implementing spinners and error messages ensured smooth, transparent feedback.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What surprised me most was how quickly the AI iterated on dozens of design variations—the combination of Google’s large‑language and image models felt truly magical. This project sharpened my full‑stack skills (React, Vite, Tailwind) while deepening my understanding of modern generative‑AI workflows.&lt;/p&gt;

</description>
      <category>deved</category>
      <category>learngoogleaistudio</category>
      <category>ai</category>
      <category>gemini</category>
    </item>
    <item>
      <title>ToneShift: Transforming Communication with AI</title>
      <dc:creator>Soumasish Dasgupta</dc:creator>
      <pubDate>Sun, 19 Jan 2025 18:38:00 +0000</pubDate>
      <link>https://dev.to/soumasish2005/toneshift-transforming-communication-with-ai-d4</link>
      <guid>https://dev.to/soumasish2005/toneshift-transforming-communication-with-ai-d4</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github"&gt;GitHub Copilot Challenge &lt;/a&gt;: Transitions and Transformations&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;ToneShift is a cutting-edge tool that leverages AI to enhance text communication by transforming its tone and sentiment. It enables users to seamlessly adapt their messages to fit a range of contexts, from formal and professional to empathetic and motivational. &lt;br&gt;
It helps users maintain clarity and emotional intelligence in their written interactions.&lt;/p&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You can check out the website here: &lt;a href="https://toneshift-five.vercel.app/" rel="noopener noreferrer"&gt;ToneShift&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Watch ToneShift in action &lt;a href="https://drive.google.com/file/d/1hFa-NM4y1QKJcPirDcvL9G-2Gwin5pQq/view?usp=drive_link" rel="noopener noreferrer"&gt;here&lt;/a&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%2Fipunjhz73r2oi0tt6l7l.png" alt="Dashboard" width="800" height="385"&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Repo
&lt;/h2&gt;

&lt;p&gt;The full source code is publicly available on GitHub:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Soumasish2005" rel="noopener noreferrer"&gt;
        Soumasish2005
      &lt;/a&gt; / &lt;a href="https://github.com/Soumasish2005/toneshift" rel="noopener noreferrer"&gt;
        toneshift
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      ToneShift is an AI-powered tool designed to transform the tone of your text to suit various contexts. It ensures your communication is clear, empathetic, and effective.
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/11c2aa67d5ac67715e312f4193586749faaa26163aab54badae4b39be6037e1a/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f64616d697362336e752f696d6167652f75706c6f61642f76313733373330383839392f53637265656e73686f745f323032352d30312d31395f3233303530325f7470796338382e706e67"&gt;&lt;img src="https://camo.githubusercontent.com/11c2aa67d5ac67715e312f4193586749faaa26163aab54badae4b39be6037e1a/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f64616d697362336e752f696d6167652f75706c6f61642f76313733373330383839392f53637265656e73686f745f323032352d30312d31395f3233303530325f7470796338382e706e67" alt="cover-image"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;ToneShift: AI-Powered Tone Transformation&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;Built as a part of the &lt;a href="https://dev.to/challenges/github" rel="nofollow"&gt;GitHub Copilot Challenge &lt;/a&gt;, ToneShift is an AI-powered tool designed to transform the tone of your text to suit various contexts. Whether you need to adjust your message for professional, personal, or cultural purposes, ToneShift ensures your communication is clear, empathetic, and effective.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Key Features&lt;/h2&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Tone Transformation Options&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Predefined tones: Professional, Empathetic, Motivational, Casual, Formal, Neutral.&lt;/li&gt;
&lt;li&gt;Automatic detection of the tone of the text via AI.&lt;/li&gt;
&lt;li&gt;Customizable tones for fine-tuning emotional intensity.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Real-Time Integration&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Works as a web application for transforming text.&lt;/li&gt;
&lt;li&gt;Provides real-time suggestions and edits as you type.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Personalized Recommendations&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Adapts to your preferences with machine learning over time.&lt;/li&gt;
&lt;li&gt;Saves and applies user-defined tone profiles.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Use Cases&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Professional Communication&lt;/strong&gt;: Convert casual messages into formal emails or transform critical feedback into constructive input.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Conflict Resolution&lt;/strong&gt;: Rewrite emotionally charged messages to ensure diplomacy and understanding.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Customer Support&lt;/strong&gt;…&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Soumasish2005/toneshift" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Copilot Experience
&lt;/h2&gt;

&lt;p&gt;Throughout the 4.5 hours of development, GitHub Copilot helped me a lot in :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Prompts&lt;/strong&gt;: Used Copilot to generate boilerplate code for React components and Node.js API routes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Edits&lt;/strong&gt;: Enabled rapid iteration by suggesting improvements to existing code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Chat&lt;/strong&gt;: Consulted Copilot Chat for debugging and resolving specific issues with NLP model integration.
&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%2Ft0p0qr52nwy2d8d8n5bj.png" alt="Inline chat solving common errors" width="800" height="271"&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Autocomplete&lt;/strong&gt;: Accelerated development by leveraging intelligent autocompletion for repetitive tasks.
&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%2Fh1hm6i59dpkzzo2iejvw.png" alt="Using autocomplete feature" width="709" height="240"&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Model Switcher&lt;/strong&gt;: Experimented with different model configurations to optimize tone transformation accuracy.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;generating unit tests&lt;/strong&gt;: Copilot also helped me a lot in generating test cases for testing the backend api via postman.
&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%2Fq571nkvo1739xv10dhj6.png" alt="api-testing" width="800" height="417"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  GitHub Models
&lt;/h2&gt;

&lt;p&gt;Yes, GitHub Models played a significant role in prototyping the LLM capabilities for ToneShift. Here’s how they were utilized:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Sentiment Analysis&lt;/strong&gt;: Prototyped and fine-tuned LLM-based sentiment detection using Models like GPT 4o and Llama.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tone Transformation&lt;/strong&gt;: Leveraged GitHub Models to generate tone-altered versions of input text with high accuracy.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Structuring prompt&lt;/strong&gt;: Made the prompt more concise and refined for improved accuracy of output. Gpt 4o, claude 3.5 sonnet were used in this process.&lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;ToneShift maintains the theme of &lt;strong&gt;Transitions and Transformations&lt;/strong&gt; by re-imagining how communication evolves to meet diverse needs. It transforms written text to align with desired tones, empowering users to navigate shifts in context, from casual to formal or critical to empathetic. &lt;/p&gt;

&lt;p&gt;The potential impact of this project is vast: it can enhance professional relationships, improve conflict resolution, and foster greater understanding across cultural and emotional divides. By making communication more adaptable and empathetic, ToneShift contributes to building connections that are both meaningful and effective.&lt;/p&gt;

&lt;p&gt;This experience has taught me the importance of ethical AI in facilitating human interactions. &lt;/p&gt;

&lt;p&gt;Some future expansions, such as voice integration and creation of a browser extension along with integration to platforms like slack, Gmail, Outlook etc., will further broaden its applicability and societal impact.&lt;/p&gt;

&lt;p&gt;Start transforming the way you communicate today with ToneShift!&lt;/p&gt;

&lt;p&gt;Thank you for considering my submission. Feel free to write anything in the comments...❤️❤️&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>EcoStarter: Empowering Fresh Starts for a Sustainable Future</title>
      <dc:creator>Soumasish Dasgupta</dc:creator>
      <pubDate>Tue, 14 Jan 2025 16:38:52 +0000</pubDate>
      <link>https://dev.to/soumasish2005/ecostarter-empowering-fresh-starts-for-a-sustainable-future-4hhe</link>
      <guid>https://dev.to/soumasish2005/ecostarter-empowering-fresh-starts-for-a-sustainable-future-4hhe</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github"&gt;GitHub Copilot Challenge &lt;/a&gt;: Fresh Starts&lt;/em&gt; and/or &lt;em&gt;New Beginnings&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;EcoStarter is a web app that empowers individuals to begin their journey towards a sustainable lifestyle. It provides tools for lifestyle analysis, personalized eco-friendly challenges, a carbon footprint tracker, and a community space to share ideas and progress. The app focuses on helping users reduce their environmental impact through actionable steps and measurable progress.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Lifestyle Analysis&lt;/em&gt;&lt;/strong&gt;: Understand current habits and receive personalized AI-driven recommendations to adopt eco-friendly practices.&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%2Fbuxn3563h83hsfz6ozdg.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%2Fbuxn3563h83hsfz6ozdg.png" alt="Lifestyle Analysis" width="800" height="365"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Eco Challenges Dashboard&lt;/em&gt;&lt;/strong&gt;: Create and complete challenges which will help you progress towards a more sustainable lifestyle.&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%2F7lzdq1te5lnd0xsjsg48.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%2F7lzdq1te5lnd0xsjsg48.png" alt="personal challenges" width="800" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Carbon Footprint Tracker&lt;/em&gt;&lt;/strong&gt;: Track the environmental impact of your  lifestyle over time using dedicated metrics.&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%2Fagtv9mpmha9fmvmdv3pl.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%2Fagtv9mpmha9fmvmdv3pl.png" alt="Carbon footprint tracker" width="800" height="359"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Community Space&lt;/em&gt;&lt;/strong&gt;: Connect with others, share your journey, and witness people's journey towards a sustainable journey.
&lt;a href="https://drive.google.com/file/d/1KHqDa-UvnEuU9M7nooGqouMjQbxQUa0h/view?usp=sharing" rel="noopener noreferrer"&gt;(See demo)&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Resource Finder&lt;/em&gt;&lt;/strong&gt;: Enhance your knowledge by exploring a curated collection of blogs, books and other resources on adopting sustainable lifestyles. &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%2F5bjjsvny9rzum1c63nmk.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%2F5bjjsvny9rzum1c63nmk.png" alt="resource finder" width="800" height="389"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;You can check out the deployed app here: &lt;a href="https://eco-starter.vercel.app/" rel="noopener noreferrer"&gt;EcoStarter Live Demo&lt;/a&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%2F9e7l9xdxghggn5hroxjn.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%2F9e7l9xdxghggn5hroxjn.png" alt="Landing page" width="800" height="390"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Repo
&lt;/h2&gt;

&lt;p&gt;The source code for the project is available on GitHub: &lt;a href="https://github.com/Th85534/EcoStarter.git" rel="noopener noreferrer"&gt;EcoStarter&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Soumasish2005" rel="noopener noreferrer"&gt;
        Soumasish2005
      &lt;/a&gt; / &lt;a href="https://github.com/Soumasish2005/EcoStarter" rel="noopener noreferrer"&gt;
        EcoStarter
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;EcoStarter&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;EcoStarter is a web application designed to help individuals adopt a more sustainable lifestyle. It provides personalized eco-friendly recommendations, tracks carbon footprints, and connects users with a community of like-minded individuals.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Features&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Personalized Plan&lt;/strong&gt;: Get a customized eco-friendly lifestyle plan based on your habits and goals.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Daily Challenges&lt;/strong&gt;: Complete fun and meaningful eco-challenges to build sustainable habits.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Community Support&lt;/strong&gt;: Join a community of eco-conscious individuals sharing tips and experiences.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Impact Tracking&lt;/strong&gt;: Measure and visualize your environmental impact over time.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Tech Stack&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend&lt;/strong&gt;: React, TypeScript, Tailwind CSS&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Backend&lt;/strong&gt;: Firebase (Firestore, Authentication)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;APIs&lt;/strong&gt;: Cloudinary for image uploads, Google Generative AI for lifestyle analysis&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Getting Started&lt;/h2&gt;

&lt;/div&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Prerequisites&lt;/h3&gt;

&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Node.js&lt;/li&gt;
&lt;li&gt;npm or yarn&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Installation&lt;/h3&gt;

&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Clone the repository:&lt;/p&gt;
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;git clone https://github.com/yourusername/EcoStarter.git
&lt;span class="pl-c1"&gt;cd&lt;/span&gt; EcoStarter&lt;/pre&gt;

&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Install dependencies:&lt;/p&gt;
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;npm install&lt;/pre&gt;

&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Set up environment variables
Create a &lt;code&gt;.env&lt;/code&gt; file in the root directory and add your Firebase and Cloudinary configuration:&lt;/p&gt;
&lt;div class="highlight highlight-source-dotenv notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;&lt;span class="pl-v"&gt;VITE_FIREBASE_API_KEY&lt;/span&gt;&lt;span class="pl-k"&gt;=&lt;/span&gt;&lt;/pre&gt;…
&lt;/div&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Soumasish2005/EcoStarter" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Copilot Experience
&lt;/h2&gt;

&lt;p&gt;Throughout the 8 hours of developing EcoStarter, GitHub Copilot helped me a lot. I used the various features Copilot has to offer so that I could make the project better.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Code Auto-completion&lt;/em&gt;&lt;/strong&gt; :  I used Copilot's code autocompletion to generate boilerplate for the components. This feature also helped me complete code faster as it automatically completed the code as I kept typing, thereby making development faster.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;In-line chat&lt;/em&gt;&lt;/strong&gt;: I used the inline chat feature to fix errors as well as generate Tailwind CSS styling in some areas. &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%2F687rv0vjuow12bj03lom.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%2F687rv0vjuow12bj03lom.png" alt="Editing tailwind styles using inline chat" width="800" height="156"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Generating Tests&lt;/em&gt;&lt;/strong&gt;: Copilot also helped me generate sample resources for testing my code as well as displaying it on the website. This helped me a lot as I didn't have to find resources manually and was able to save time.
&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%2Fpw8rf7uvlcjluosw2kf4.png" alt="Generating unit tests using copilot inline chat" width="800" height="379"&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Bug Fixing &amp;amp; debugging&lt;/em&gt;&lt;/strong&gt;: Copilot suggested fixes for some common coding errors on the go, which made debugging code very easy. I also took Copilot's help to understand and debug various errors which I got in the browser console. I would tell Copilot to explain the error and Copilot gave a detailed explanation of why the error was working along with possible solutions which I could just copy and paste from the chat tab.
&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%2F4a3llw22jw3f1d6bdvn7.png" alt="Bug fixing" width="800" height="150"&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;em&gt;Copilot Chat&lt;/em&gt;&lt;/strong&gt;: Copilot chat helped me code the authStore and userStore hooks with the help of Zustand.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall, using GitHub Copilot was a great experience, as it helped me code faster and with fewer errors.&lt;/p&gt;

&lt;h2&gt;
  
  
  GitHub Models
&lt;/h2&gt;

&lt;p&gt;I used two models in this project:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;GPT 4o&lt;/strong&gt;&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;&lt;strong&gt;o1(Preview)&lt;/strong&gt;&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These models helped me phrase the prompts properly so that I could get a better response from Google generative AI while trying to calculate carbon emissions as well as to suggest sustainable lifestyle to users.&lt;br&gt;
I also checked out other models like Claude 3.5 sonnet (Preview) but as it was giving large code blocks with redundant code in some places, I omitted using it. Overall, this project introduced me to GitHub models, and I'm really amazed to see how good these models are. I look forward to using them with this project in future as well.&lt;/p&gt;

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

&lt;p&gt;Building EcoStarter was a rewarding experience for me, as it taught me how I can combine AI with sustainable practices and user engagement to create an impactful solution.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;strong&gt;primary purpose&lt;/strong&gt; of building this web-app is to enable users to take their first steps towards a more eco-friendly life. This app empowers users to break old habits and make a &lt;em&gt;"fresh start"&lt;/em&gt; with a focus on sustainability.&lt;/li&gt;
&lt;li&gt;This app also plans to reduce the carbon-footprints of users and making them more conscious about the environment. The features like the carbon footprint tracker, personalized challenges, and resource finder actively promote responsible consumption and climate action.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Future Plans&lt;/strong&gt;:&lt;/p&gt;

&lt;p&gt;Even though this contest was of 24 hours, I would still like to continue improving this app by adding the following features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Dedicated section for recycling&lt;/strong&gt;: I would like to add features for locating nearby recycling centers, and eco-friendly vendors.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Improvements to the community section&lt;/strong&gt;: I would like to add some more features to the community section&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Gamification of the website&lt;/strong&gt;: I would like to add experience points(XPs) to each activity which would also be used to redeem some rewards and stuff. In this way, users will feel more engaged.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Adding more challenges&lt;/strong&gt;: I will also add more personalized challenges(daily, weekly, monthly) in the challenges section.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks for giving me an opportunity to work on this beautiful project as part of this hackathon. I really hope people find this website useful. Do share your thoughts in the &lt;strong&gt;&lt;em&gt;Comments section&lt;/em&gt;&lt;/strong&gt;💖💖.....&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
