The site is live here.

This is a fundraiser single page application for Medito Foundation created by Poxen.
The goal with this site is to provide a customizable and flexible experience, allowing for any type of campaign.

Use these credentials to test the Stripe integration and the success callback after payment:

• Card number: 4242 4242 4242 4242
• MM/YY: 12/26
• CVV: 222

All text content on the site can be configured in the /assets/data/ directory. In here, different sections of the site can be changed, like the campaign info, rewards, frequently asked questions, etc.

• Title and description of the current fundraiser campaign: /assets/data/campaign/index.json.
• Reward tiers and their associated rewards: /assets/data/tiers/index.json.
• Frequently asked questions: /assets/data/faq/index.json.

Metadata like title and description, as well as opengraph and twitter metadata, can all easily be configured in /assets/data/metadata/index.json.

• Changing the title and description properties will change the title and description of the metadata for the site, duh..
• All opengraph metatags are available. You can just add it to the openGraph property, even if it's not currently in the file. It will be automatically added.
• Same goes for the twitter property. All twitter metatags can be added. Just add them to the twitter object as a new property.

Yes. All colors, widths, and heights of elements are variables and can be customized in /app/globals.css.

• All colors on the site can be adjusted here.
• Widths and heights of the site, donation sections, modals, etc, can be adjusted here.

There are a few things that have to be changed and replaced with an actual API. Those can all be found in the /utils/requests.ts file.

• The getDonationProgress function.
  • This function is used to get the current amount donated and the current goal.
  • It takes no arguments.
  • It should return a DonationProgress object.
• The getDonators function.
  • This function is used to get the initial list of recent donators.
  • It takes no arguments.
  • It should return an array of Donator.
• The sendMessage function.
  • This function is used to send a message from the contact form.
  • It takes a MessageProps object as an argument.
  • It should return the raw http response object.

Now for the Stripe functions I have implemented that are fully integrated with the Stripe API. These functions currently make fetch requests to Next13's app directory route handlers, which intereact with the Stripe API.

• The getStripeLink function.
  • This function is used in /components/donate-form/index.tsx when the donate button is clicked.
  • It takes an amount of type string or number as an argument.
  • It returns a Stripe checkout URL.
• The getDonationSession function.
  • This function is used in /modals/success/index.tsx after the user has been redirected back to the site to confirm the donation.
  • It takes a sessionId of type string as an argument.
  • It should return a Donator object.

Currently, a random person is fetched from an API every 12 seconds, and added to the recent donation list. This happens in /components/donators/DonationList.tsx. This needs to be replaced with some sort of Webhook/WebSockets implementation to listen for Stripe payments.

Environment variables have to be declared in order for the application to work properly. Variables should be in a file called .env.production, or for development purposes .env.development, and located in the root directory.

• STRIPE_SECRET_KEY: Your Stripe API key.
• STRIPE_PRODUCT_ID: The Product ID of the 'product' used to send payments in Stripe.
• STRIPE_SUCCESS_URL (not necessary if deployed to Cloudflare): The URL Stripe should redirect to upon a successful payment (should just be the domain of the site).
• STRIPE_CANCEL_URL (not necessary if deployed to Cloudflare): The URL Stripe should redirect to upon a canceled payment (should just be the domain of the site).
• CF_PAGES_URL (not necessary if not used with Cloudflare): DO NOT ADD THIS MANUALLY. CLOUDFLARE AUTOMATICALLY ADDS THIS.

• An optional campaign image to give the site a little more life.
• Auto-selecting rewards if a user manually enters an amount that is greater than the reward threshold.

If there is anything that is unclear, or not properly covered, don't hesitate to reach out and I will happily give a better explanation. I have had a lot of fun with this site, and I would gladly work with you to integrate the above.

• Figma design