Charity Awareness Site Powered by Google AI (Gemini)

This is a submission for Weekend Challenge: Generosity Edition

What I Built

I built a simple, responsive charity awareness website that uses Google AI (Gemini) to generate and curate content about charitable causes, impact stories, and concrete ways people can help.

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

Demo

• Live site: https://mujtaba666.github.io/charity-awareness-site/ working:

The site presents cause descriptions, impact summaries, and personalized “ways to help” sections, all powered by Gemini.

Code

• GitHub repo: https://github.com/mujtaba666/charity-awareness-site.git

The core logic for calling the Gemini API lives in index.html with basic HTML/CSS for the UI.

How I Built It

• Frontend: Plain HTML, CSS, and vanilla JavaScript in a single-page layout for simplicity and fast deployment.
• AI integration: Used the Google AI (Gemini) API to:
  • Generate clear, engaging descriptions of different charitable causes.
  • Create short impact stories and key statistics.
  • Suggest actionable ways users can contribute based on interests or location.

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.

For this challenge, I prioritized:

• A clean, focused UI that drives awareness and action.
• A straightforward integration with Gemini to show how AI can support charity work without heavy infrastructure.

Prize Categories

• Best Use of Google AI

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.