HopeBucket

A simple React app for building a daily "hope bucket" of three positive reflections.

HopeBucket helps users capture small moments of gratitude, encouragement, and progress each day. The app includes animated bucket fill states, optional quote tracking, and screenshot sharing when the bucket is full.

Features

• Add up to 3 daily hope items
• Visual bucket animation that fills as items are added
• Confetti celebration when the bucket is full
• View and manage the current list in a modal
• Share your completed list as a screenshot (native share sheet or download)
• Add and manage up to 3 personal inspiration quotes
• Daily reset flow for starting a new list
• Welcome guide for first-time users
• Install-to-home-screen prompt (PWA)
• In-app Privacy Policy page rendered from markdown
• Privacy policy acknowledgment when the policy version changes

Built With

• React
• React Router
• React Bootstrap + Bootstrap Icons
• Lottie (lottie-react) for animation
• canvas-confetti for celebration effects
• html-to-image for list screenshots

Getting Started

Prerequisites

• Node.js (LTS recommended)
• npm

Installation

npm install

Run Locally

npm start

The app runs in development mode at http://localhost:3000.

Available Scripts

• npm start - Runs the app in development mode
• npm test - Launches the test runner
• npm run build - Builds the app for production
• npm run eject - Ejects Create React App configuration

Project Structure

src/
  components/      # UI components (Bucket, Nav, List, Quote modal, etc.)
  contexts/        # Shared state providers
  hooks/           # Animation/control hooks
  styles/          # App styling
public/
  PRIVACY_POLICY.md
  privacy-meta.json

Privacy Policy

The app includes a dedicated /privacy-policy route that renders the markdown file located at public/PRIVACY_POLICY.md.

When you change privacy-related behavior or legal text, update both files and bump the version in public/privacy-meta.json (for example "version": "2026-05-22"). Users who have not acknowledged that version will see an acknowledgment modal on their next visit (after the welcome guide, if shown). Match the effectiveDate and the "Last updated" line in the policy.

Contributing

1. Create a feature branch
2. Make your changes
3. Run tests/build checks
4. Open a pull request