Develop Wins page

[alecg123]

Overview

Wins Page will document our project successes as well as individual team members 'growth+development+and achievements'; including new hires and skills.

One of our HackForLA Website Update Objectives is to “Present a clear and compelling value proposition for participants in projects.” Essentially what can a volunteer get out of volunteering for Hack for LA?

Action Items

• [x] Product
  • [x] Brainstorming what this Wins Page might look like.
• [x] UI
  • [x] create a page layout that has the following
    • [x] link to "Share your wins" form
    • [x] testimonial layout
      • [x] name
      • [x] linkedin image and link
      • [x] checkboxes
      • [x] quote
• [x] Product
  • [x] Create google form

    ---

• [ ] Redesign the cards to include badges on the bottom. And some way of searching through the cards
• [ ] Create a slack bot that informs the group when there is a new win.
• [ ] Change the order of the info on the card to have the one they type out first.
• [ ] Add more lines of text on each card.

Resources/Instructions

see this comment for details about the type of checkboxes https://github.com/hackforla/website/issues/162#issuecomment-636576691

Secrets issue https://github.com/hackforla/website/issues/98

Important links

• description of slack bot
• google sheet with all the wins
• figma

Mr/Hack-for-LA-Website?node-id=1284%3A102)

[ExperimentsInHonesty]

@alecg123 said: We might advertise on this page:

• volunteers finding new jobs
• the number of people affected by a project win
• new commits added to team members’ GitHub account
• experience in team settings
• project management opportunities, etc.

[ExperimentsInHonesty]

I got a new job I produced something for my portfolio I improved my linkedin I learned how to work better on a team I increase the number of commits on my github profile I learned a new language I became proficient at github I setup 2FA I worked on an enterprise project I worked on a project that will help the people of Los Angeles I worked on two projects I taught or mentored another person on my team I taught or mentored a person on another team My team delivered software to a stakeholder My team launched our MVP Other ___

Tell us about it:

Can we use your linkedin picture next to your story linkedin:

Name:

[ExperimentsInHonesty]

catagories:

Business Analyst PM Content UI/UX Development Ops Data other QA SEO/Marketing

[leestella748]

Figma: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1284%3A102

@ExperimentsInHonesty

1. I didn't fully format the survey page since it'll be an embedded Google form, but let me know if I'm missing anything.

2. For the wins page, I think a 2-column layout works better than a 1-column layout and makes the list look more robust. If we want to add copy up top I can do that as well.

[ExperimentsInHonesty]

more link modal on the full screen accordion on the mobile

adding in soundbite field add github url field if no linkedin url provided dont ask them for linkedin photo usage people can choose either or github/linkedin

[alexandrastubbs]

@leestella748 ETA is EOD 7/5

[leestella748]

@ExperimentsInHonesty @alexandrastubbs Here's the Figma link: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1552%3A3693

[alexandrastubbs]

Add the following teams to the Figma:

• Civic Opportunity Project
• 100 Automations
• The Messaging Project
• Racial Justice

[alexandrastubbs]

@leestella748 as we are building out the google form, we'd like to add an image at the top that corresponds to the image we have on the page. The image size is 1600x400. An example of an existing survey is: https://docs.google.com/forms/u/1/d/e/1FAIpQLSfb8IOV1oHhWCMPedZFJ0cl35Q3haomR8xMNRt2QXCEuVPwtw/viewform

[alexandrastubbs]

Work in progress form can be found here

embed code for show us your wins (for later date): <iframe src=“https://docs.google.com/forms/d/e/1FAIpQLScQPxxJ6lekzqWpi3hyV-yiSMxKagf8lS7zxArKbqbsgb079A/viewform?embedded=true” width=“640" height=“549” frameborder=“0" marginheight=“0” marginwidth=“0">Loading…

[alexandrastubbs]

1. Progress - form not started yet
2. Blocks - none
3. Availability - Mon, Tues, Wed
4. ETA - Tuesday EOD

[leestella748]

[alexandrastubbs]

Google form is complete here. Open to suggestions and/or edits. @ExperimentsInHonesty

[jbubar]

Progress: created the two pages. started styling them. blocks: could not figure out how to style the embedded google form. problems that I think I will run into: I have not figure out how to link the responses to the google form yet. I also have no idea how to make a modal open up when the user clicks on "see more" eta: next week availability: will be working on this all week

[jbubar]

https://drive.google.com/drive/folders/1Yglu0ehQQu2hhjd0Rf6AS1sPlNvPHnay Above is the link to the google drive folder with the google form and google sheet containing the responses.

I do not think I can finish this issue in a timely manner, and it is probably best to pass it on to someone else. :). My apologies for taking two weeks and not having it done yet.

[ExperimentsInHonesty]

Link the form to the page (don't do an iframe for the mvp https://docs.google.com/forms/d/e/1FAIpQLSdF0MgS-M_Soi77qTp-MNfxMGqq85yqsHwvfHDngHAMyDQ8uQ/viewform

[jbubar]

progress: no progress blocks: Efren and I did not find a time to meet, and I was super busy this last week ETA: next week availability: late mornings and early afternoons during the week.

[alexandrastubbs]

@ruben1s to connect with @jbubar on this

[efrenmarin45]

Progress: Coordinated with @jbubar to go over blocks and outcomes. Went over possible workarounds for the API and went over some examples on how to do it. Blocks: Need to find out the most optimal solution to implement google sheets API onto site. Availability: Limited, due to illness. ETA: Ongoing

[ExperimentsInHonesty]

@jbubar Have you read this? https://medium.com/better-programming/make-a-team-roster-with-node-react-and-google-sheets-305b9f9ebbb1 Did you find it of any help?

[jbubar]

But I thought we were trying not to use node.js

[jbubar]

Progress: I got it working with live data!! I have yet to style it and add the github and linkedin api call for the photos. I am working with efren and raudel.

Blocks: A few things that I am still unsure about is showing the api key, the fact that I am using my personal google account, and if it will work on anyone elses machine. But I think raudel and I will work that out today at 12pm.

ETA: our meeting tomorrow, sunday at 10am (fingers crossed) Availability: from now until the meeting tomorrow

[jbubar]

I was also thinking, that maybe we could do something like this for the mvp. Since, I am still figuring out the google sheets api (the photos are of the desktop, tablet, and mobile views)

[ExperimentsInHonesty]

Temporary image to use on the MVP of the wins page:

link for noun project page https://thenounproject.com/search/?=2024954 attribution text: person by amantaka from the Noun Project

I also slacked the SVG in case you needed it.

The images coming from Linked in are going to be 500x500

[jbubar]

Progress: That is how the page looks for now.

Blocks: Still working on the secrets. Need to figure out a system for the secrets. Using my api key. Not sure why Bonnie's api key is not working for me. Have not started with github api for photos.

Availability and eta: I had a pretty bust week this week. I do not know if I will get the secrets thing done in time for the meeting on sunday. But I will put in a 4-5 hours tomorrow

[ExperimentsInHonesty]

This is the setup that Josh Has

---

---

oath screen

---

---

This is the setup I have in the account tied to hackforla-bot@hackforla.org

As you can see, I don't have any

[efrenmarin45]

Progress: Checked in with @jbubar in regards to progress and began working on including the github API to display github photos. Blocks: Working on how to implement my code with the existing code on Josh's branch. Availability: Limited, due to illness. ETA: Ongoing

[ExperimentsInHonesty]

We identified that the data that @efrenmarin45 needs is already in the repository at the following location _data/github-data.json. its just a mater of finding the github handle name and then from there moving up to the id.

[ExperimentsInHonesty]

@jbubar I setup the following email address hflasheetsapi@gmail.com and put the password in 1password. Please accept the invitation and then I can add you to the vault so you can access.

[jbubar]

Progress: Gained an understanding of github actions, and tested it out on my own project. blocks: did not figure out onepassword. signed up but not sure how to get the password for the hflasheetsapi@gmail.com ETA: probably by the end of wednesday (09/16/20) Availability: today, and wednesday

[alexandrastubbs]

@jbubar any updates on this?

[jbubar]

Progress: little progress. Still testing out github actions. I got the curl command working, but i have not figured out how to generate a new file with github actions. I generated the API key from the google account that bonnie gave me and got that working too. Blocks: I do not understand github actions yet ETA: Next week, by next sundays meeting Availability: after 6pm pst every day

[jbubar]

Its working! I got the page working with github actions and github secrets. I am ready to push the MVP.

Things that still need to be completed with future commits:

• github or linkedin avatar photos
• hiding extra text behind "see more" link
• adding in role and team filtering drop down
• embedding the google form within our website

[alexandrastubbs]

@jbubar can you provide an update on the issue and any changes to the mobile? Please share screenshots!

[ExperimentsInHonesty]

@jbubar Please work on the More link next

[ExperimentsInHonesty]

@jbubar let's have a conversation about adding in a column for approval.

[alexandrastubbs]

We need to have a column with the title display added to the spreadsheet and if the column does not have the value 'true' in it, then we do not display. @jbubar @efrenmarin45

[jbubar]

@alex, @ExperimentsInHonesty I can that out, I can add a column with a value of true or false. Thanks for clarifying alex. I am working on the more link this week. I will share my progress tomorrow

[jbubar]

@alexandrastubbs @ExperimentsInHonesty do you want to give the winner (person who fills out the form) the choice to display it or not? or is it more for us to monitor it?

[jbubar]

Progress: I added a column on the google sheet that allows for approval to display cards on the wins page. I also added the logic to exclude pages that do not have "display" in column N.

Blocks: I had some conflicts with git, so I need to work that out before I create a pull request for this. I may just start a new fork and do it over again.

ETA: I will finish this display approval before the meeting tomorrow. And I will add the see more by next week.

availibility: 1.5 hours today, and from 6 - 8 pm on weekdays

[alexandrastubbs]

@jbubar not sure if you discussed in the meeting today, but this is more for us to monitor. By filling out the form, it is sort of assumed that they are opting in to being featured on the page.

[alexandrastubbs]

@jbubar please provide progress?

1. Progress
2. Blocks
3. Availability
4. ETA

[efrenmarin45]

Progress: Met with Kian a while back to discuss how I would go about fleshing out the Github avatar url.
Blocks: I have been away taking care of my Dad and have limited time to work on this. Availability: Friday - Sunday ETA: Ongoing

[alexandrastubbs]

@jbubar please provide an update!

1. Progress
2. Blocks
3. Availability
4. ETA

[alexandrastubbs]

Google form: https://docs.google.com/forms/d/1ZhyJ98nrscV3c09RT_E_sJXrHkKcUt6_a1qoChH5pQ4/edit

Need to limit wins to a single win in order to make sure the styling is consistent and to limit clutter on card. @ExperimentsInHonesty can you confirm you are aligned? This would be for the what do you want to celebrate question in google form.

[alexandrastubbs]

@jbubar has limited time so we are handing off remaining work to @ruben1s . @jbubar will provide an update on what he has completed and what is left to do.

[jbubar]

@ruben1s for the MVP we need to create the 'see more' functionality, and add github avatar photos.

see more:

Different for mobile(expands downwards) and desktop(modal popup) as you can see in the figma. Raudel was able to build out the modal functionality for desktop view, here is his branch.

github photos:

@efrenmarin45 is working on the github avatar photos.

Thanks for taking this on Ruben, happy to clarify anything else.

[ruben1s]

Update: Haven't made any significant progress on the mobile layout. I need to get with devs and @jbubar to go over his logic/code.

[ExperimentsInHonesty]

@efrenmarin45 @rblaz001 - heard you all are going to bring this across the finishline. Please provide an update

1. Progress
2. Blockers
3. Availability
4. ETA

[jbubar]

Changed the data type of the card data for readability and to make it easier to change, including Raudel's additions

And put the "see more" inside the text.