Following the pattern of the other cards, create a new card:

Fall Prevention for Elders

Provide one free, life-saving 6-week fall prevention class to an elderly person at high risk of falls.

Covers costs like insurance to meet city senior center requirements, and curriculum development and review.

1 class seat for $100

The text is a bit too long compared to the other cards and looks awkward. Cut out parts of it to tighten and strengthen the language so the card looks better.

On https://helpafamily.margaritahumanitarian.org/ these radio buttons would be better as checkboxes, allowing donors to support more than one cause if they wish.

To implement this, use the Form-Checkbox daisyUI Tailwind CSS component: https://daisyui.com/components/form/checkbox

I ran the DeepSource analyzer to find issues with our codebase. The results are at https://deepsource.io/gh/margaritahumanitarian/helpafamily/

We could use PRs to fix any of the issues identified in that report.

To learn more, use this invite to join the new team I created on DeepSource: https://deepsource.io/invitation/u9KI3eiHcWAS8uBvw9Zi0rNhUNQa15/

What should we change and why?

Create a form for people who want to donate electronic devices, with these fields:

• Name
• Email
• City
• State / Province / Region
• Country
• Tell us about each laptop, tablet, and/or smartphone you'd like to donate (textarea)

Link to this form from the Laptops for Families card, as a button replacing the shipping address.

This issue is just for the frontend UI, no backend.

Please list any other issues this may be related to

• #34

What should we change and why?

Implement a new card:

Offer an Electronics Drop-Off Box

Any organization or business around the world can help families get access to technology. Put a donation box in your office for used laptops, tablets, and smartphones. Volunteers will pick up the items periodically, fix them up, and provide them to families in need. You can optionally be involved with refurbishment and placement too if you'd like.

Email hi at mhfcares dot org to learn more.

This would go under a new navbar category called Partner With Us

Card title: Hot Meal Day

Card text: Buy ingredients for 1 hot meal for 60 hungry people. Sample meals include spaghetti with Texas toast and caesar salad, chicken alfredo, enchilada taquitos. Served as take-home meal boxes at Grace Resources in Lancaster, California.

Card button: Feed 60 people for $250

Feel free to revise the text to fit better in a card, or generally to be more considerate/kind/appealing.

Button should go to a Stripe checkout page where the donor completes the $250 payment. See the $250 dropdown item for an example of how to implement it.

Add a $5 and a $25 donation level as options in the main donation form.

Let's make CONTRIBUTING.md more newbie-friendly. This issue involves improving that file with things like:

• What are some lessons you learned while contributing to this project?
• Anything that would help new contributors get started?
• What are common errors newbies face? Perhaps those could go into a Troubleshooting section?
• Are there parts of README.md that would be better in CONTRIBUTING.md, or vice versa?

So far we have photos in media-kit of:

• Food Distribution
• Hot Meal Day

We can get photos for all the other cards soon.

https://daisyui.com/components/card has examples of adding photos to cards. Play with it and see what looks and feels best.

We could use help setting up unit testing in this project.

Everyone, what are your favorite JS unit testing framework(s)?

Card title: Laptop for Families

Card description: Mail us a used or new laptop. We'll set up some donated laptops in our public computer room for families to use for free. Other donated laptops will go to families who don't have home computers, or who don't have enough computers for all their children to use.

(Feel free to revise the text to look better in a card, or to sound better.)

For this card, instead of a button it would show our office mailing address, which you can get from the Hygiene Kit card.

Following the pattern that @Sukhamjot-Singh kindly set up of putting HygieneKitsCard.js in a components/ folder:

• Move HealthWorkshopCard.js and HotMealDayCard.js from pages/ to components/
• Update imports and check that the site still works

Create a new card on the page with this text:

Humanitarian Clinic

Provide a free, anonymous phone or video telehealth consultation for someone afraid to see a doctor, such as a migrant or refugee who lacks identification.

Help 1 Patient for $30

The MHF logo is the globe with the heart, found at https://github.com/margaritahumanitarian

• Add this to the page somewhere.
• Have it link to https://www.margaritahumanitarian.org/

This issue is particularly newbie-friendly and would help us a lot:

• In MainDonationForm.js, add a checkbox called "Anyone in Need"
• Click through to make sure it works

From https://deepsource.io/gh/margaritahumanitarian/helpafamily/history/transforms :

Enable transformers in .deepsource.toml to automatically transform all incoming code with auto code formatters.

This might be a good way to auto-run Prettier @marekrozmus? Unless you have another idea in mind?
See https://deepsource.io/docs/transformer/prettier

Now with the beautiful card images, perhaps we don't need the main background image of the daisy? Thoughts?

To start, send a PR that moves the Hot Meal Day card above the Health Education Workshop card.

After that, think about how we can implement automatic sorting of cards by price. There's zero obligation to work on this beyond that initial PR, but if you're interested, post ideas here. Or email me at [email protected] for an invite to our Slack text chat or Topia video chat.

We could really use help from someone with a passion for coding best practices:

• Read up on React and Next.js component best practices, e.g. https://blog.bitsrc.io/structuring-a-react-project-a-definitive-guide-ac9a754df5eb
• Move HygieneKitsCard.js from pages/ to components/
• Make any other changes needed to follow best practices for that component

DeepSource says we have 5% documentation coverage. I'm actually not sure where that 5% even comes from, to be honest.

For this issue, help us set up documentation for our JS code in a way that documentation coverage numbers can be checked by DeepSource.

You don't have to actually write all the documentation...you or others can pitch in later with PRs for it.

This may involve reading up on best practices for modern JS documentation. What's the best tool for this currently? Is it ESDoc or something else?

Create a card with the text:

Food Distribution Support

Help us cover our staffing costs for providing free food boxes for hungry families, such as paid time to manage volunteers for food distribution events or coordination with community groups.

Support Food Distribution for $150

Doesn't give enough of a thank you for a donation that may change lives.

Eventually there will probably be 9+ cards, each featuring a different way to help families in need.

Putting 2-4 cards in each row would improve readability. We could use help converting the layout from single-column to multi-column.

Here are some ideas on how to get started with this issue:

• Study the 3 side-by-side card example in daisyUI's Card docs
• Perhaps use lg, xl, or 2xl on the main container div in place of md there
• Perhaps remove lg from each card (see this line for an example)

I'm still learning Tailwind CSS myself and am unsure of what I wrote above. Other implementations are certainly possible.

@GrungeKarma if you're interested, this issue builds upon your excellent work in #32 and I'm happy to help however I can.

In #104 @RedFox0x20 suggested exposing the alt text as a property of the Card component.

Perhaps something like backgroundImageAltText could be set for each card?

The cards evolved organically to have some code duplication.

For this issue, find a way to refactor the common code from them.

The Prettier GitHub Action can auto-run Prettier on whatever we want.

I think running it on PRs and pushes to main would be really nice.

There may be other similar Prettier GitHub actions, though...this is just the first one I found.

When running yarn install I currently get the following warnings:

warning "next > styled-jsx > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".

Perhaps something needs an update? I am not familiar with this system.

I am not sure why this is but I know if you remove the divider daisyUI class from the card the sizes all become uniform. Any other ideas to fix the problem would be great too.

Currently at some browser window widths, white bars are added to the left and right of the background image of the margarita daisy.

I'm thinking the image should scale to 100% width with the bottom cropped off, though I'm flexible on that implementation. Generally making the background photo look better is the main objective here.

Card title:

Health Education Workshop

Card text:

Produce 1 free health education workshop for an audience who urgently needs it, particularly for a community who faces major disparities in health conditions and care such as people of color, elders, young mothers including teen mothers, migrant workers, low-income families, foster families, unhoused families, and families of incarcerated parents.

Your donation covers health-themed mini gift bags, raffle prizes to motivate people to attend a workshop, equipment to run the workshop such as trainer simulaids for edema and breast disease, costs to hire public health educators to prepare presentation and take-home materials, and any venue costs if not donated.

Card button: Produce 1 health workshop for $5000

Feel free to revise the text to fit better in a card, or generally to be more considerate/kind/appealing.

Button should go to a Stripe checkout page where the donor completes the $5000 payment. See the $5000 dropdown item for an example of how to implement it.

Here's a screenshot showing the weird "A":

Currently when people select a radio button like "Students in Need", the selection isn't saved in Stripe yet.

This bug blocks us from promoting the site at all: we can't ask people to donate if we're not saving their donation selection.

Requirements:

• The selected radio button must be saved as some sort of metadata in Stripe. Possibly PaymentIntent object metadata? https://stripe.com/docs/api/payment_intents/object#payment_intent_object-metadata

This issue is sort of like a subset of #6.

To improve the health workshop card, it would be nice to make the price per seat rather than per workshop.

DeepSource is a really amazing tool. Working on this issue is an opportunity to learn how to work with it. I'm happy to grant any additional access permissions needed to contributor(s) interested in working on this.

When contributors submit a PR, there is a DeepSource check that appears to fail incorrectly.

The PRs where this occurred are #25 #26 #28 #30 #31 #42.

Some ideas of how to get started:

• Study PR #25 which is where the check first failed
• See if fixing any of the other issues identified by DeepSource causes the DeepSource checks to pass
• If stuck, ask for help in https://discuss.deepsource.io/

In the laptop card, soon we'll have multiple addresses where you can ship your used laptops.

Our plan is to partner with other nonprofit orgs to help them get local donations of laptops, to fix up for their own communities. Volunteers will do fresh operating system installs on the laptops for families.

Sample use case: if you live in India, it makes so much more sense to ship a laptop to an Indian charity than to the US. (By the way, know of any charities who'd like to join in the fun?)

For the first iteration, implementing a simple drop-down box listing 2 addresses is sufficient for this issue. Later as the program grows we can iterate.

While reviewing #18 I realized that I had unintentionally started a pattern in HygieneKitsCard.js of wrapping cards in an empty outer <div>.

Is it best practice in React and/or Next.js to have a clean, class-free div wrapping everything? Or is it extraneous since the subsequent <div className="card lg:card-side bordered"> already wraps everything?

For this issue:

• Comment with your thoughts about keeping vs. removing the outer <div>
• Submit one or more PRs removing them if appropriate

This is an open invitation to everyone to improve the code in any way.

@pydanny and I are relatively new to Next.js and React and still learning best practices, so I'm sure there are things that could be refactored or improved for better maintainability.

Tiny, atomic PRs make it easiest for us to understand code changes and would be so greatly appreciated.

In this card, the button should show the price, e.g. "96 HYGIENE KITS FOR $153"

That would make it more obvious that for as little as $153 you can help 96 people.

It might also help to provide more motivation, e.g. Each hygiene kit allows an unhoused individual to freshen up and feel more confident about their hygiene for work, school, or even just to have a better day.

This issue is a general invitation to anyone to submit pull requests that improve the design of the site in any way.

Tiny incremental improvements are best: find a design tweak that makes the site 1-5% better, and submit a PR for it. That will allow us to review your changes and merge them in quickly.

While we really love Netlify, this is a Next.js project and Vercel could potentially be a better fit for it.

This open-source project and forthcoming ones from Margarita Humanitarian Foundation could potentially grow as big as our other past projects (e.g. Cookiecutter has 15k+ GitHub stars) with many volunteers.

Vercel's $20 per-member pricing is great for for-profits but would cause us a lot of strain, as a charity relying primarily on volunteers and on a tiny handful of donations.

What should we change and why?

It would be cool to promote the [Idea] prefix to an actual GitHub issue label. I know there's the enhancement label, but I feel like idea is somewhat different. I see it as a label that encourages creative brainstorming by everyone in the community. Collective brainstorming has the potential to produce ideas far better than @pydanny or I could independently.

Or do you think it would be better as part of enhancement? I could see that argument too for simplicity and to reduce confusion.

Let me know if this requires added permissions or any action on my part.

Please list any other issues this may be related to

• #109

The problem has been described well by @GrungeKarma in #33:

I am seeing an issue as this project moves forward. I am thinking we need to standardize the card size on a component level. As it sits, when I try to adjust the layout of the cards it looks bad because of the different card heights due to the different lengths of text in each card. It may be better to control the size of the cards directly so we can predict how they will act with flexbox. It would probably be easy to add a description length for each explanation and include a button for more information that brings up the expanded explanation as a popup or a separate page. Let me know if you have any ideas as well. Those are just the ideas going through my head.

Any solution that addresses this would be great, such as:

• Add a description length for each explanation and include a button for more information that brings up the expanded explanation as a popup or a separate page.
• Break up card description into short description and long description, where long description is shown only when you click "more" or similar
• Truncate text after a certain length with "..."
• Manually shorten the text of each card

Don't stress over getting this perfectly right: we can always iterate.

Add text somewhere on the page saying:

Margarita Humanitarian Foundation is a 501(c)(3) nonprofit registered in the US.

It can be anywhere that you think looks good, such as:

• In a footer
• Below the page header somewhere

@audreyfeldroy I see that package-lock.json was added. This might introduce problems as we should have yarn.lock or package-lock.json. Otherwise we will go out of sync on those lock files and they will be useless.

When you click "In-Kind" in the navbar, it should only show the cards that are in-kind donations:

• Laptop for Families
• Hygiene Kits

When you click "Fund" it should show all the cards where the button goes to Stripe checkout.

We don't have any "Give Your Time" cards yet, but we will soon. Those are cards describing how people can volunteer, e.g. doctors can give 1+ hour per week of pro bono service to the humanitarian clinic.

I noticed this error in a PR today:

warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config

When you click buttons in Netlify previews, instead of going to the Stripe checkout there is a 502 error shown in the console:

POST https://deploy-preview-82--helpafamily-margarita-humanitarian.netlify.app/api/create-stripe-session 502

This was mentioned by @RedFox0x20 in a few PRs as a barrier to contributors being able to make sure their PRs function properly. So it would be really good to fix soon.

Fixing this issue probably requires admin rights on Netlify, so @pydanny and I will look into it.

Now that I've updated the site background to white to better accommodate the brightness of the MHF logo, the cards that once looked really amazing as part of a beautiful earlier iteration by @suveshmoza now appear a bit dark.

• Try making the cards lighter: can it be done without sacrificing readability?
• Try putting the card images above the card text, and making the card text dark. Does it help?

This issue is open to anyone who wants to experiment with it: just add yourself under Assignees to claim this.

What should we change and why?

Implement a new card under "Give Your Time":

Doctors, NPs, PAs: Give 1-4 Hours/Week

We are looking for physicians, NPs, and PAs to volunteer for 1-4 hours per week with our Humanitarian Clinic program.

At this stage we particularly need expertise with primary care, although specialties will be very helpful as we grow the program and expand our resources.

Scheduling is flexible and based on your availability.

Requirements:

• Current Medical Board of California license
• Fluency in English or Spanish

If you'd like you can find a public domain medical image to use for the card, or you can give it a blank background if that's easier.