DonateMyClub – React Web App

This app allows users to browse student clubs, learn more about them, and make donations to clubs using Stripe for payment processing. Instead of relying on awkward fundraising methods—like asking family and friends to go eat at a specific restaurant—students can now raise support in a simple, transparent, and modern way.

Features

• Browse and search student clubs
• View club details and donation history
• Donate to clubs using Stripe payments
• Responsive design with Tailwind CSS

Search with Debounce

The club search input on the Home page uses a debounce technique to optimize API requests.
When a user types in the search box, the app waits 500 milliseconds after the last keystroke before sending a request to the backend.
This prevents unnecessary network calls and ensures smooth user experience, especially during rapid typing.

Debounce is implemented using a useRef to store the timeout and useEffect to trigger the search only after the user pauses typing.

Live Demo

The app is hosted on Netlify and available at:
https://donateclubs.netlify.app

Components

• Navbar:

  Displays the app title and links to the homepage.

• ClubCard:

  Shows club name, description, and buttons for "Donate" and "View Details".

Pages

• Home:

  Fetches and displays a list of clubs from the API. Users can search clubs, view details, or donate.

  Uses ClubCard for each club.

• AboutClub:

  Shows details about a specific club, including a summary of donations and a table of donors.

  Fetches club info and donation data from the API.

• DonationForm:

  Lets users enter donation details and pay via Stripe.

  Interacts with the API to create a payment intent and confirms payment using Stripe Elements.

• TestCardInfo:

  Provides instructions and test card details for development/testing payments.

• NotFound:

  Displays a 404 page for unknown routes.

App:

Sets up routing for the app using React Router. It includes a navbar and routes for Home, Donation, Club Details, Test Card Info, and a 404 Not Found page.

Routing

• Handled by React Router in App.jsx.
• Main routes:
  • /: Home
  • /donate/:clubId: Donation form
  • /about/:clubId: Club details
  • /test-cards: Test card info
  • *: Not found

API Usage

• Base URL: https://donatemyclub.onrender.com (from .env as VITE_API_BASE_URL).

• Endpoints:

  • GET /api/clubs — List clubs
  • GET /api/clubs/search?query=... — Search clubs
  • GET /api/clubs/:clubId — Club details
  • GET /api/clubs/:clubId/donations — Club donation history
  • POST /api/clubs/:clubId/donate — Create Stripe payment intent

• API Key:

  Requests include an API key from .env as VITE_API_KEY in the Authorization header.

Stripe Integration

• Uses Stripe Elements for secure card input.
• On donation, the app:
  • Sends donor info and amount to the API.
  • Receives a Stripe clientSecret.
  • Confirms payment using Stripe Elements.

Styling

• Uses Tailwind CSS for styling.
• Custom styles in App.css.

Technologies

• React
• Vite
• Tailwind CSS
• Stripe (for payments)
• Fetch API (for HTTP requests)
• React Router
• React Data Table Component

Author

Developed by Suresh Shrestha — feel free to reach out at [email protected]