🏆 Enable Other Volunteer Opportunities

[gregv]

Slack Channel: #ohack-dev-enable-other-volunteer-opportunities

Tell us you want to help by logging in and clicking "I want to help" here

Summary

This one is slightly more open-ended. The current system only allows for Hackers and Mentors, where both of these positions are software engineering focused. We still want to encourage all people, regardless of their background to volunteer their time to help us. We need you to build something into our ohack.dev platform that would allow for us to engage with volunteers who are looking to support us. The ultimate goal is to collect some information about what they are looking for, onboard them into Slack, and give them autonomy to accomplish goals as discussed below.

These are the high-level areas where someone who isn't a software engineer can help us:

1. Source projects from nonprofits: reach out to nonprofits, explain OHack, funnel them into our (to be built in #10) nonprofit form and get them to join Slack.
2. Follow-up with nonprofits: We would like to have a pretty continual connection between OHack and the nonprofits we've worked with in the past, but we can't currently scale to do this effectively - ideally every month. Volunteers here would reach out to nonprofits to see how their delivered solution is working for them, collect feedback, record demo videos of the product working for social media promotion, etc.
3. Recruit sponsors to fund projects: Once #5 is built, we will need help in recruiting sponsors who are interested in OHack to either run their own hackathons with nonprofits/runbooks we provide, or we'll run the entire thing for them. We'll need volunteers who can use SalesForce to reach out to potential sponsors on a continual basis and help with marketing.
4. Engage with previous hackers and mentors to get them to join: Volunteers can help us stay connected to our hacker, mentor, and judge community by keeping lines of communication open over the entire year. As we plan to have more continual development on ohack.dev, we'll need to stay engaged with these groups of people and let them know when we need assistance - we'll also want to get their feedback to make OHack a better place.
5. Social media engagement: We don't have much effort on this side as of today, a volunteer in this area can help us improve our social footprint and help with content and marketing/ads.
6. Send newsletter to Women in Tech, Out in Tech, etc.: We need to both create a list of the various groups/clubs we want to target as hackers and mentors, and also actively engage with these communities to build our brand.
7. Slack engagement: A volunteer here can help to engage our Slack user community of over 1,000 people, to keep them engaged and involved within Slack.
8. Day Of Hackathon Volunteer: if a person just wants to volunteer for a specific hackathon and they can help with logistics, helping answer any questions from hackers + mentors and do comms (i.e lunch in 20mins, 30mins until hackathon is over, general announcements, etc) during the event via slack.

Code Pointers

This would likely be another button on the main index.js and another page, likely /volunteer

[jotpowers]

Also just "Coordinator". Someone to handle the logistics of food/snacks/volunteer schedules.

[ShallyBanh]

Just an idea, but it might be nice to add a "day of volunteer" if a person just wants to volunteer for a specific hackathon and they can help with logistics, helping answer any questions from hackers + mentors and do comms (i.e lunch in 20mins, 30mins until hackathon is over, general announcements, etc) during the event via slack.

[gregv]

Love that idea @ShallyBanh - I'll update this Issue to talk more about that

[leonkoech]

In regards to Newsletters for change the following issues need to be addressed. The list is still [WIP⚠️]

1. Some front-end components need to be created. These components should be the contents of the header and the footer. My idea of the two would be having a logo at the top center the message and a footer with grey texts with the details about opportunity hack and an unsubscrbe button(The functionalities are complete already, it's now the front end)

   ISSUE 1:

   The UI for this has to be drawn and presented to the group. Attention to detail is key :)

1 a) Because of this we need some components, in html and css (bonus if you can play around with responsiveness). The two components would be;

ISSUE 2:

the header component that houses the icon

ISSUE 3:

footer component that houses details about opportunity hack and the unsubscribe button

[leonkoech]

Concept Image as to how a template should look :)

[leonkoech]

Unsubscribe will be added at the bottom

For scalability, the texts at the bottom, and the image src should be static variables which can be edited later :)

Return boolean on whether the user has been unsubscribed or not Listen for results on the front end, display the message accordingly :)

newsletters/unsubscribe/<UserID>

When the routes listen for this on the front end and make an API request with the data then once a result is received, display appropriate text! Make a page for this, simple minimalistic. Can even be an alert on top of an empty page. Like l;iterally alert("you have successfully unsibscribed"):)

[leonkoech]

ISSUE 4.

Naming conventions are off. This more so has to do with the class names for the front end

As you can see in the screenshot, the classnames are very random and do not represent the right components. Some conventions are as far as very concerning: testing in one of the screenshots.

The naming conventions should be short, snake-case, and self explanatory

Think of putting classes inside others in the scss, for containerization etc for example

main.html

<div class="main">
   <div class="main_child">
       // OUR CONENT
   </div>
 </div>

main.scss

.main{
    display: flex;
    // and more styles
    // but now the trick is to call our child

    &_child{
       // main_child styles
    }

    // you can also do hover effects
    &::hover{
    cursor: pointer;
    }
}

Hope this sheds some light

this will help everything be more controlled

Also, look at mixins which is a special scss feature

these are the variables; $var: blue;

now with scss you can assign styles to variables. If you have so many repetitive calls, consider creating a variable and referencing the style. You can also overide it

for example;

color: $var;
color: red;

color will be red :)

[leonkoech]

ISSUE 5.

we need a better front end for the newsletters page. You can play around with css on this one

We need better-looking input boxes, background buttons etc.

Start by wireframing how it should look and create a figma, invite the rest of us to the Figma

ISSUE 5A

We need better-looking buttons

[leonkoech]

ISSUE 6:

Backend: Separate email template styles from the template file. Instead, think of creating an scss/CSS file and scanning it through python. OR better yet, have an API that posts the scss/css file contents from the front end, thereby fully separating the front end and the backend logic

[leonkoech]

ISSUE 7

Front End When API hasn't received a boolean as to whether all emails were sent, show a loading screen

[leonkoech]

FEATURE 1

To cover issue 7 above the following component will be created

A loading page

or a component with a loading gif/rotating circle in the middle.

     <CircleSpinningComponent></CircleSpinningComponent>
     </div>

then in scss something like;

       width: 100vw;
       height: 100vw;
       position: fixed;
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 10;
       // you'll have to confirm the highest z-index based on component arrangement when testing or searching for it in vs code)
       }

then make the component render on condition. The boolean should be a prop.

[leonkoech]

FEATURE 2

this will be a bit heavy but manageable + I can help along the way Creating a form to make adding a button and or image be straightfoward. Prompting the user after they click on an 'add custom ohack component' button, to select a text, a link and type of button or image.

[leonkoech]

FRONT-END FINAL MOCKUP

In my head, this is how the final design for the newsletter editing page should be. The higher the number the closer it is to "nice to haves", the lesser the number the either least amount of time and/or effort required to complete it.