Medito Fundraising

I have 4 days to develop a Web App for the Medito foundation.

Medito Foundation is a nonprofit dedicated to improving mental wellbeing and helping people cope better with depression, stress, anxiety, and any other negative states of mind.

Develop a versatile single web page that can be adapted for various fundraising initiatives, such as hiring personnel, creating ad campaigns, or developing new features. The page should be designed to engage visitors and encourage donations with an interactive and user-friendly interface.

✨ Demo

👉 On Cloudflare : https://medito-fundraising.pages.dev/

🚨 Prerequisites

You will need:

• NodeJS
• Git
• A terminal to run commands

🛠️ Installation

git clone git@github.com:jeromeabel/medito-fundraising.git
cd medito-fundraising
npm install

🚀 Utilisation

npm run dev

Open the browser at the address: http://localhost:4321/

🧱 Features & Why I Choose This Stack

• Astro is an agnostic framework, it offers a great choice for build a versatile website. Some pages might be static, server side or client side. You can use all great UI libs as React, Svelte or Vue.
• Tailwind CSS: All design is made with Tailwind. It provides great features and it is very popular.
• Static Blog Posts With Astro: Some pages are static built by astro from .md files.
• Campaigns Data With Supabase: I choose Supabase to host fake data into three tables: campaigns, donors, questions
• API endpoints With Astro: I create 6 API endpoints in Astro thanks to the cloudflare adapter :
  • /api/campaigns: Get all campaigns
  • /api/campaign/:id: Get one campaign with its id
  • /api/campaign/:id/donors: Get all donors for the campaign
  • /api/campaign/:id/questions: Get all questions for the campaign
  • /api/campaign/:id/donate: Send a request to Stripe
  • /api/session/:id/: Get the session data from the validated Stripe session
• 💳 Payment With Stripe Checkout Form: You have to fill "4242 4242 4242 4242" as a test card number to test the transaction. You would be redirected to the "thanks" page when the transaction is fullfilled.
• React: It is used for some more interactive components, CampaignProgress, Dropdown, CampaignDonors. The data are updated every 30s.

📝 Documentation

• User Stories: Kanban

⏳ Future Improvements

• Rewards animations (confetti)
• Responsive menu
• Add some Toast feedbacks
• Update donors data with the transaction
• Update blog content with a headless CMS
• Handle progress bar when the goal is reached : 100%
• Clean code: error boundaries, refactoring API calls
• Optimization: loading states, suspense

Credits & Thanks

• Thanks to Florian Lefebvre for this help with the responsive layout of the campaign page: tailwindplay
• The Hero image from unplash/Ashley Batz
• The 404 image from unplash/Tim Goedhart
• All images from unsplash.com