DEV Community

Cover image for Doneehub - Weekenchallenge Submission
Maisam Abbas
Maisam Abbas

Posted on

Doneehub - Weekenchallenge Submission

Turn what you have into what someone needs.

What I Built

Doneehub is a people-first generosity platform built around a simple idea:

You already have something that can help. Doneehub helps you figure out what that something could become.

Generosity is often presented as if it starts with money. In reality, people have many other resources: time, technical skills, knowledge, transportation, food, unused items, professional experience, or simply the willingness to help.

Doneehub brings those resources together and turns them into practical possibilities.

The heart of the project is the Generosity Compiler. A user can describe what they have—for example, an old laptop and technical skills, a few free hours and transportation, or a small amount of money and limited time. Doneehub then interprets that combination and helps turn it into realistic action ideas, requirements, and next steps.

The project also includes GoogleHelp, a general-purpose Gemini workspace that can help with questions, explanations, writing, rewriting, planning, learning, brainstorming, analysis, and problem solving.

The goal was not to build another social feed filled with invented activity or impressive-looking numbers. I wanted to build something quieter and more useful: a tool that helps a person move from intention to action.


Demo

Live Demo:

https://doneehub.vercel.app/

Code

GitHub Repository:

https://github.com/maisamabbas0323/doneehub

Doneehub is built as a local-first web application. The repository contains the frontend, Gemini integration, UI components, reusable services, and project configuration.


How I Built It

I wanted the technical architecture to stay simple enough that the product itself could remain the focus.

Doneehub does not require authentication and does not use a database. User preferences and configuration are kept locally in the browser.

The application follows a simple flow:

Doneehub
   |
   +-- GoogleHelp
   |      |
   |      +-- User's Gemini API Key
   |                   |
   |                   v
   |             Google Gemini API
   |
   +-- Local Browser State
Enter fullscreen mode Exit fullscreen mode

One Gemini Configuration

Rather than asking users to configure an API key separately for every feature, Doneehub uses one centralized Gemini configuration.

The user enters their Gemini API key through GoogleHelp. The key is stored locally, masked after saving, and can be tested, replaced, or removed.

A shared Gemini client/service is responsible for the communication layer so that Gemini-powered features behave consistently throughout the application.

Generosity Compiler

The Generosity Compiler was the main product idea I wanted to explore.

Instead of starting with:

“What should I donate?”

it starts with:

“What do I already have?”

The user can combine different resources and constraints. Gemini interprets the combination and produces practical possibilities rather than simply returning a generic list of charities.

For example:

Resources:
- Old laptop
- Web development skills
- 4 hours available each weekend

Goal:
- Help someone learn technology
Enter fullscreen mode Exit fullscreen mode

The result can become a structured set of possible directions, action steps, things to verify, and practical considerations.

The important distinction is that generated ideas are not presented as verified real-world opportunities unless supporting information actually exists.

GoogleHelp

GoogleHelp is the broader Gemini workspace inside Doneehub.

It supports normal conversation and useful everyday tasks such as:

  • Explaining difficult concepts
  • Rewriting text
  • Summarizing user-provided material
  • Brainstorming ideas
  • Planning projects
  • Learning assistance
  • Coding questions
  • Problem solving
  • Writing and editing

I wanted it to feel like a workspace rather than a stereotypical chatbot screen.

Proper Markdown Rendering

One small but important detail was the presentation of Gemini responses.

Instead of showing raw text such as:

# Heading
**important text**
- first item
Enter fullscreen mode Exit fullscreen mode

Doneehub renders the Markdown into readable interface content.

The renderer supports headings, emphasis, lists, links, blockquotes, code, tables, and other common Markdown structures while sanitizing unsafe content.

This makes generated information much easier to scan and actually use.

Real Information, Not Fake Data

A major design decision was to avoid fabricating the world around the user.

Doneehub does not create fake:

  • Organizations
  • Beneficiaries
  • Donation totals
  • Testimonials
  • Events
  • Opportunities
  • Locations
  • Impact statistics
  • Verification claims
  • Live prices
  • Availability

When current information is needed, it should come from a trustworthy public source or API. Gemini can then help interpret or organize that information, but generated text is not treated as proof that something exists.

That distinction became one of the most important principles of the project.


Prize Categories

Best Use of Google AI

Doneehub is submitted for Best Use of Google AI.

Google Gemini is not used as a decorative chatbot added to the application. It is part of the core interaction model.

The Generosity Compiler depends on Gemini to interpret combinations of resources and turn them into practical contribution ideas.

GoogleHelp provides a broader Gemini workspace for reasoning, explanation, writing, planning, learning, and problem solving.

The application also uses structured responses where predictable application data benefits from them, while normal conversational responses can remain natural Markdown.

The important part is that Gemini is used to solve an actual product problem:

How can we help someone understand how their existing resources could become useful to another person?


What Makes Doneehub Different

There are many platforms that tell people where to donate.

Doneehub starts one step earlier.

It asks:

What do you have?

Maybe the answer is:

  • Two free hours.
  • A working laptop you no longer use.
  • A car.
  • Knowledge about accounting.
  • A kitchen that can prepare extra food.
  • Programming skills.
  • A willingness to teach.
  • A small amount of money.
  • Professional experience.

Those things can have value even when they do not look like traditional donations.

Doneehub is designed to help users discover that value and turn it into an actionable next step.


Design Direction

The visual design deliberately avoids the familiar “AI product” aesthetic.

Instead, Doneehub uses a calm editorial direction:

  • Near-black backgrounds
  • Warm off-white typography
  • Muted gray supporting text
  • Restrained warm accent color
  • Strong typography and hierarchy
  • Compact navigation
  • Subtle borders
  • Purposeful whitespace
  • Minimal motion
  • Responsive layouts

There are no unnecessary AI badges, glowing gradients, robots, holograms, neon effects, fake dashboards, or invented social activity.

The intention is for Doneehub to feel like a real product made for people—not a collection of AI-generated screens.


Challenges I Ran Into

The hardest part was not making Gemini return text.

The harder question was deciding what the application could honestly claim.

A generosity product can easily become misleading if generated suggestions are presented as verified opportunities. It can also become superficial if it fills the interface with fake impact statistics, fictional beneficiaries, or invented success stories.

I therefore treated the boundary between generated assistance and verified information as a product requirement rather than an afterthought.

Another challenge was making the Gemini integration useful without turning every screen into a chatbot.

That led to the Generosity Compiler: a focused workflow where Gemini has a clear job and the output is directly connected to something the user can act on.


What I Learned

The project reinforced a simple lesson:

Good AI product design is often less about generating more and more about helping users make better decisions with what is generated.

The useful part of Gemini is not simply that it can produce an answer. The useful part is that it can help connect pieces of information that a person already has and turn them into a clearer plan.

That became the guiding idea behind Doneehub.


What's Next

There is a lot more that could be built on top of this foundation.

Some possible next steps are:

  • More resource combinations
  • Better structured generosity plans
  • More trustworthy public-source integrations
  • Stronger source traceability
  • More localized opportunities
  • Better planning workflows
  • Additional accessibility improvements
  • Stronger validation for structured Gemini responses
  • More offline-friendly functionality

The architecture is intentionally simple so these capabilities can be added without turning the product into an unnecessarily complicated platform.


Built With

  • TypeScript
  • React
  • Tailwind CSS
  • Google Gemini API
  • Browser-local storage/state

The exact package versions and available scripts are defined in the repository's package.json.


Running Locally

Clone the repository:

git clone https://github.com/maisamabbas0323/doneehub.git
cd doneehub
Enter fullscreen mode Exit fullscreen mode

Install dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

Start the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Build the project:

npm run build
Enter fullscreen mode Exit fullscreen mode

If the repository's configured scripts differ, package.json is the authoritative source.


Gemini Configuration

Open GoogleHelp inside Doneehub and configure a Gemini API key.

The application is designed around a user-provided key rather than a project-owned secret.

For security:

  • Never commit API keys.
  • Never hardcode secrets.
  • Never place keys in URLs.
  • Never log keys.
  • Never include keys in screenshots or documentation.

Because the key is used client-side, it should be treated accordingly and managed by the user.


Privacy and Architecture

Doneehub intentionally has:

  • No authentication
  • No user accounts
  • No application database
  • No Supabase
  • No project-owned secret API key

The product is local-first wherever practical.

This keeps the architecture lightweight and makes the core experience understandable: the user brings their resources, their intentions, and their Gemini configuration; Doneehub helps turn those inputs into useful possibilities.


License

Doneehub is released under the MIT License.

See LICENSE for the complete license text.


Repository

https://github.com/maisamabbas0323/doneehub


Submission Note

This project was built for the Weekend Challenge: Generosity Edition.

The central idea is simple:

Turn what you have into what someone needs.

Top comments (0)