What I Built

GiveSpark is a small tool that turns "I should do something generous this weekend" into an actual plan. You tell it what you're good at, how much time you have, and optionally a cause you care about — and it uses Google's Gemini model to hand back four specific, doable ways to be generous, built around you instead of a generic list.

No "just volunteer somewhere." No "donate to charity." Real, concrete ideas sized to fit the time you actually have — whether that's 15 minutes or the whole weekend.

Demo

Note: since this calls the Gemini API directly from the browser, you'll need to paste your own free Gemini API key (get one in seconds at aistudio.google.com/apikey) to generate ideas. No signup or payment required for the free tier.

[Add your screenshot or short screen recording of the wizard flow here]

Code

atharva-pawar80 / givespark

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Oxc
@vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the Oxlint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and Oxlint's TypeScript related rules in your project.

View on GitHub

How I Built It

I built GiveSpark as a step-by-step wizard instead of a single long form, so it feels like a short conversation rather than filling out paperwork. The screen is split in two: a dark editorial panel on the left that changes its headline as you move through each step, and a light, functional panel on the right where you actually answer.

The centerpiece is a small SVG "spark line" on the left — a thin line with four dots that lights up marigold as you complete each step, doubling as both progress indicator and the one memorable visual detail of the design.

Once you've answered all three questions and pasted a Gemini API key, the app builds a prompt from your answers and asks Gemini to respond with strict JSON (a title and detail for each idea). That gets parsed and rendered as four slightly rotated "note" cards with a torn-paper look, so the output feels personal rather than like a data table.

Stack: React + Vite, the Gemini API (gemini-3.6-flash) called directly from the client, and Lucide for icons. No CSS framework — the whole design system is a small hand-written stylesheet embedded in the component, so it runs anywhere with zero extra setup.

Prize Categories

Best Use of Google AI — the entire core feature depends on Gemini. The app builds a structured prompt from the user's inputs (skills, time, cause), asks Gemini to return strict JSON, and renders the response as personalized "kindness notes." Without the model, this is just a form — the AI is what turns three inputs into something genuinely useful.

DEV Community

GiveSpark — AI-powered ways to be generous this weekend