The latest articles on DEV Community by Mujtaba (@mujtabacloud). https://dev.to/mujtabacloud 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%2F4105415%2F481d3d65-8b0b-4f72-ba84-394d4d56fb4a.jpg https://dev.to/mujtabacloud en Mujtaba Fri, 04 Sep 2026 08:00:32 +0000 https://dev.to/mujtabacloud/charity-awareness-site-powered-by-google-ai-gemini-5167 https://dev.to/mujtabacloud/charity-awareness-site-powered-by-google-ai-gemini-5167 <p><em>This is a submission for <a href="https://dev.to/challenges/weekend-2026-09-03">Weekend Challenge: Generosity Edition</a></em></p> <h2> What I Built </h2> <p>I built a simple, responsive <strong>charity awareness website</strong> that uses <strong>Google AI (Gemini)</strong> to generate and curate content about charitable causes, impact stories, and concrete ways people can help.</p> <p>The goal was to explore how generative AI can lower the barrier for small nonprofits and campaigns to create compelling, up-to-date content, making it easier for visitors to learn about causes and take action (donate, volunteer, share, etc.).</p> <h2> Demo </h2> <ul> <li> <strong>Live site:</strong> <a href="https://mujtaba666.github.io/charity-awareness-site/" rel="noopener noreferrer">https://mujtaba666.github.io/charity-awareness-site/</a> working:</li> </ul> <p><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%2F28tkww1pyrslil5lii6f.png" class="article-body-image-wrapper"><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%2F28tkww1pyrslil5lii6f.png" alt=" " width="800" height="395"></a></p> <p>The site presents cause descriptions, impact summaries, and personalized “ways to help” sections, all powered by Gemini.</p> <h2> Code </h2> <ul> <li> <strong>GitHub repo:</strong> <a href="https://github.com/mujtaba666/charity-awareness-site.git" rel="noopener noreferrer">https://github.com/mujtaba666/charity-awareness-site.git</a> </li> </ul> <p>The core logic for calling the Gemini API lives in <code>index.html</code> with basic HTML/CSS for the UI.</p> <h2> How I Built It </h2> <ul> <li> <strong>Frontend:</strong> Plain HTML, CSS, and vanilla JavaScript in a single-page layout for simplicity and fast deployment. </li> <li> <strong>AI integration:</strong> Used the <strong>Google AI (Gemini) API</strong> to: <ul> <li>Generate clear, engaging descriptions of different charitable causes.</li> <li>Create short impact stories and key statistics.</li> <li>Suggest actionable ways users can contribute based on interests or location.</li> </ul> </li> </ul> <p>I kept the stack minimal so the project is easy to host (e.g., GitHub Pages/Netlify/Vercel) and extend. The Gemini prompts are templated to ensure consistent tone and structure across all AI-generated content.</p> <p>For this challenge, I prioritized:</p> <ul> <li>A clean, focused UI that drives awareness and action.</li> <li>A straightforward integration with Gemini to show how AI can support charity work without heavy infrastructure.</li> </ul> <h2> Prize Categories </h2> <ul> <li><strong>Best Use of Google AI</strong></li> </ul> <p>This project uses Gemini to dynamically generate all core content about causes and ways to help, making it a central part of the user experience rather than just an add-on.</p> devchallenge weekendchallenge