☀️👯‍♀️ Make Sponsorship Sizzle

[gregv]

We need to entice people to want to bring their company to support Opportunity Hack for our fall hackathon (hack.ohack.dev). This means that we need to improve our sponsorship page to make it easier for people to donate to support us and also provide clear and crisp details on what we can provide back to them for their donation.

Our current sponsor page looks like this: https://www.ohack.dev/hack/2024_fall/sponsor The frontend code for this is here: https://github.com/opportunity-hack/frontend-ohack.dev/blob/develop/src/components/Hackathon/SponsorIndex.js

1/ We want to update this page to look more professional like we’ve seen on other hackathon pages.

• https://tribehacks.com/sponsor/
  • A good overall UI that we’d love to port over to OHack.dev
• https://www.hackthehub.com/partners/
• https://bit.camp/sponsor/
• https://www.losaltoshacks.com/sponsors
  • Another 501c3 that has some good callouts to that on this page, we want to make it clear that we’re a nonprofit and that all donations are tax deductible

2/ We want to be able to take donations direction from our website without redirecting people to PayPal.

• Setup a sandbox/test account on any payments system of your choice like PayPal, Stripe, etc.
• Add a flow from our sponsor page that collects donations without leaving the website
• Add any API key information for the payment provider (PayPal, Stripe, etc.) as environment variables so we can switch them to use ours after you’ve completed this.

Team Member 1: Frontend Developer (React)

Tasks:

Update Sponsor Page UI

• [ ] Familiarize with the current Sponsor page codebase.
• [x] Review example sponsor pages for design inspiration:
  • [x] https://tribehacks.com/sponsor/
  • [x] https://www.hackthehub.com/partners/
  • [ ] https://bit.camp/sponsor/
  • [x] https://www.losaltoshacks.com/sponsors
• [ ] Design a more professional and appealing UI for the sponsor page.
• [ ] Implement the new design in the codebase (update components, CSS, etc.).
• [ ] Ensure the design highlights our 501c3 status and tax-deductible donations.

Improve Sponsorship Details

• [ ] Identify key information to highlight for sponsors (benefits, sponsorship levels, etc.).
• [ ] Update the content on the sponsor page to clearly convey this information.
• [ ] Ensure the details are concise and easy to understand.

Team Member 2: Backend Developer (Python/Node.js)

Tasks:

Set Up Payment System

• [ ] Research and choose a suitable payment system (PayPal, Stripe, etc.).
• [ ] Set up a sandbox/test account for the chosen payment system.
• [ ] Integrate the payment system's API with our website backend:
  • [ ] Create endpoints for processing donations.
  • [ ] Ensure the payment process is secure and handles errors gracefully.
• [ ] Add any API key information as environment variables for easy configuration.

Donation Flow Integration

• [ ] Develop the frontend flow for collecting donations without leaving the website.
• [ ] Ensure seamless interaction between the frontend and backend during the donation process.
• [ ] Test the entire donation flow thoroughly to ensure reliability.

Team Member 3: DevOps Engineer

Tasks:

Environment Setup

• [ ] Ensure the development and production environments are properly configured.
• [ ] Set up environment variables for API keys and other sensitive information.
• [ ] Ensure secure storage and access of these environment variables.

Deployment and Testing

• [ ] Deploy the updated sponsor page to a staging environment for testing.
• [ ] Perform end-to-end testing of the new UI and donation flow.
• [ ] Deploy the final changes to the production environment once testing is complete.
• [ ] Monitor the deployed application for any issues post-deployment.

[Sharvika0504]

Hi @gregv, I am interested to work on the backend development side. Could you please assign me this task?

[gregv]

Sure thing @Sharvika0504 🎉

[Mandy678-code]

Hi @gregv, I am interested on working on the frontend, can you assign me to this task? Thanks!

[gregv]

Hi @gregv, I am interested on working on the frontend, can you assign me to this task? Thanks!

@Mandy678-code - will do, but have 2 questions for you: 1/ are you in slack? What is your slack user name? 2/ which section of tasks are you going to be working on?

[Mandy678-code]

Hi @gregv, I am interested on working on the frontend, can you assign me to this task? Thanks!

@Mandy678-code - will do, but have 2 questions for you: 1/ are you in slack? What is your slack user name? 2/ which section of tasks are you going to be working on?

I am in slack. My name on there is Zhenwen (Mandy) Li. As for which section of tasks, are you referring to which section of the frontend? I think the two parts (Update Sponsor Page UI and Improve Sponsorship Details) kind of go hand in hand, so I think working on them together might be the best.

[gregv]

I am in slack. My name on there is Zhenwen (Mandy) Li. As for which section of tasks, are you referring to which section of the frontend? I think the two parts (Update Sponsor Page UI and Improve Sponsorship Details) kind of go hand in hand, so I think working on them together might be the best.

👏 Sounds good @Mandy678-code

[ishaankalbhor]

Hi @gregv I can work on the front-end and the back-end part.

[gregv]

Sounds good @ishaankalbhor

[gregv]

Speaking with @nemathew in office hours, we definitely want a single Sponsor page unlike today where each hackathon has a separate one - we think having a single sponsorship page allows for us to always be taking on sponsors outside of hackathons, and it should be more central and easy to get to as well

[Mandy678-code]

Speaking with @nemathew in office hours, we definitely want a single Sponsor page unlike today where each hackathon has a separate one - we think having a single sponsorship page allows for us to always be taking on sponsors outside of hackathons, and it should be more central and easy to get to as well

Yes, that is my intention as well, to have a single sponsor page. I designed the "Our Goal" section so that any goal of Opportunity Hack can be on there. As I don't exactly know our fundraising needs, I used the hackathon as an example. I just thought listing where each budget goes to will allow for transparency and thus giving sponsors more insight to what we do. Though the caveat to this is that sponsors might be too specific to the project. What if I still keep the progress wheel but instead of for each event, we can do it as a progress wheel for the whole organization. And then we can list which amount of money is for which reason. Another option is that we don't have the progress wheel, and just have people donate and we can maybe list out our current projects/needs.

[gregv]

What if I still keep the progress wheel but instead of for each event, we can do it as a progress wheel for the whole organization. And then we can list which amount of money is for which reason.

I like this option - this makes it flexible so that we can ask for specific fundraising areas which is a good practice to give any donors a specific thing they are donating for.

need to get the list of info that should be on the page, like mission statement (right now, I only put on what I was able to find, I am not sure if this is what you want on it) and Q&A.

Both of these are great @Mandy678-code !

There is also an impact section that displays past projects, do you want it? Yes! This is a great idea to build more trust in us - I think we'd want to show any "Live" project from

This is the filter

Here are some examples - these show the nonprofits, and if you click through it shows the projects - we could show either the nonprofit like you have or the project, but I think showing the nonprofit is more well received by people.