First-contributions: Add tweet button to web app

[Roshanjossey]

Add a twitter share button to web app https://roshanjossey.github.io/first-contributions

🐞 Problem

We're missing out on reaching out to a lot of users because we're not leveraging the complete potential of social media marketing.

🎯 Goal

Reach out to more people.

💡 Possible solutions

Add a tweet button to web app. Add a link to web app so that users can go there and share their first contribution.

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request
• Celebrate your contribution to this project 🎉, Don't forget to tweet 😉

Here's some materials to get you started

• https://dev.twitter.com/web/tweet-button
• https://publish.twitter.com/#

[digaant333]

I am working on it

[ad-dan]

I am also working on it 😄

[Roshanjossey]

@ad-dan, @digaant333 Called it first. I'll wait for him to build the feature. Meanwhile, do you wanna pick up something else?

[TheRealDarkCoder]

Working, should be done in few minutes, design is also prioritized

[Roshanjossey]

@TheZZGamer, I'm sorry but I've already given @digaant333 a go-ahead. He must have started working on it. Can you help me review that pull request? or would you like to do any other social media share?

[ad-dan]

@Roshanjossey No problem. Best of luck to @digaant333 ! ❤️

[TheRealDarkCoder]

Alright, np, reviewing the request

[Roshanjossey]

@TheZZGamer, pull request hasn't been submitted yet.

How did you have the design of tweet button in your mind? I was a little unsure on where to put it.

[TheRealDarkCoder]

i was thinking of it in the top left/top right but as a fixed position so that its always there when you scroll down

[Roshanjossey]

I'm not sure how that goes along with user flow. Users won't tweet about their first contribution everytime they visit web app

User flow is like

User makes first pull request > Looks at next steps there we'll have a link to web app pointing to share section > User tweets

We're putting tweet button in web app because we can't put it in GitHub readme.
I was thinking about a share section at the bottom with Id so that we can take to that part of web app.

[digaant333]

@Roshanjossey you can let others work on it as I am not versed with React. I thought that it is an angular app

[Roshanjossey]

@TheZZGamer: @digaant333 is not working on this. Can you pick this up?

[TheRealDarkCoder]

alright where do u want the tweeter button to be?

[Roshanjossey]

@TheZZGamer, I'm thinking at the bottom we'll have a social share section. We'll add other platforms later.

How about this?

Instead of follow, we can have share for now. No need for such extravagant animation. It can just have a simple box shadow change like project cards. Link from tutorial should go to that part of web page
LIke
https://roshanjossey.github.io/first-contributions#social-share or something.

We should also talk about wording for link and tweet. Do share your thoughts.

[digaant333]

@Roshanjossey if u have anything related to angular then do let me know

[Roshanjossey]

@TheZZGamer, any update on this? Are you stuck somewhere? Do you need any help?

[Thirdoptics]

If @TheZZGamer doesn't have time, can I pick this one up?

[Roshanjossey]

@Thirdoptics, Yes. We'll wait for half a day for @TheZZGamer to respond. If that doesn't happen, go ahead and build it.

[Thirdoptics]

Guess I'll go ahead on this one...Any ideas on what the tweet should say?

This seems well worded:

Learn how to make your first open source contribution or solve a beginner issue

[Roshanjossey]

@Thirdoptics: Yes go ahead.
The tweet is done by somebody who just made their first pull request. So how about something like

Yay! I just made my first open source contribution with @1stContribution.
You can too. Head over to https://github.com/Roshanjossey/first-contributions/blob/master/README.md and follow the simple tutorial there.

[Thirdoptics]

@Roshanjossey: That's a lot better considering the user flow, and pointing to the readme. I like it.

Do you want to implement something like react-share or keep the app dependency free and do something more self contained like the project cards with just css/svg?

[Roshanjossey]

@Thirdoptics: Let's go with something like project cards. Refer the Gif above. We don't want such animations. Let's keep it simple as project cards

[Thirdoptics]

@Roshanjossey sounds good, I'll get something cooked up in the morning and send over a pull request.

[Thirdoptics]

@Roshanjossey sorry for the slight delay, very close, just need to finish up getting some css to display nicely, should have something posted later today.

[Roshanjossey]

@Thirdoptics: This is deployed to web app now. Do give it a try.

Closing this issue as this feature is completed.

[Roshanjossey]

@Thirdoptics, I just realized that I didn't invite you to our slack group
You can join the team by going to https://firstcontributions.herokuapp.com