Helping Hands is a responsive, interactive landing page application for a fictional charity gallery. Built with Next.js and TypeScript, it allows users to browse and manage charities, make donations, and view live donor progress per charity.
This project showcases reusable component architecture, responsive design, local data persistence, and dark/light theme support. Ideal for recruiters and clients looking to see practical, clean, modern React-based development.
- Add, edit, and delete charities
- Donate to individual charities
- View donation progress with animated progress bars
- View donor history per charity
- Fully responsive design across devices
- Dark and light mode toggle
- Modular, reusable React component design using Tailwind CSS
- Framework: Next.js with TypeScript
- Styling: Tailwind CSS
- State Management: React
useState/useEffect+local - Deployment: Vercel (placeholder link for now)
src/
├── app/ # App Router structure (layout.tsx, page.tsx, etc.)
├── components/ # Reusable UI components (buttons, modals, cards, etc.)
├── utils/ # Utility functions (e.g. localStorage helpers)
bashCopyEdit# Clone the repo
git clone https://github.com/blindeenlightz/HelpingHands.git
cd HelpingHands
# Install dependencies
npm install
# Run in development
npm run dev
# Build for production
npm run build
npm start
Dark/light mode can be toggled in the UI.
- Emphasize reusable, composable components
- Responsive-first UI with Tailwind CSS utilities
- Clear state updates and user feedback for donations
Created by Jamie Braaksma Feel free to reach out on LinkedIn or explore more on GitHub