Giter VIP home page Giter VIP logo

linkedinreactionpollgenerator's Introduction

LinkedIn and Facebook Reaction Poll Generator(Beta)

Reactions increase the reach of a post on LinkedIn similar to what happens on every other social media platform. Because of this, something I call "reaction polls" have become really popular as a growth hack. Instead of running a regular LinkedIn poll, which is frankly pretty jank and constrained to 4 options, you can have users react to your post to vote on the option they want, creating a much richer experience that also nets you the poster a bunch of free engagement. If you don't know what I'm talking about, here's an example of one of these reaction polls:

LinkedIn Reaction Image example

This project is an implementation to the idea here by Alex Chiou.

LinkedIn Reaction Poll Generator (Beta)

Using the app will output an image that is 540px wide for Linkedin feed:

Generated Image

Running it Locally:

Clone this project to your computer and cd into the project. Run yarn install (you can also do npm install, but yarn seems to download everything quickly, since we already have a lock file).

Run this project by typing yarn start and visiting localhost:3000 on your computer.

Edit the App.js file, it's a single file with all the HTML and JS for the time being.

Edit the App.css file to style the app.

MVP Requirements (implemented)

  • Show an initially blank image with the 5 LinkedIn reactions. This will be the "canvas" that lets users know what their reaction poll currently looks like.
  • User can type in what question they want to poll to ask. The "canvas" should update in real-time.
  • User can type in the text they want to show up for each of the reactions. The "canvas" should update in real-time.
  • User can click a button and download the filled in template image when they are done.

How it is done?

Using <canvas> API it's possible to draw text over images like we see meme generators. But implementing the raw API is cumbersome. Fortunately there a are bunch of open source tools that let us make it easily. I used the Dom To Image package to handle the image generation. I was surprised it created the image without any visible inconsistancies.

I created a preview or demo area where we will put all the text and icons. When we click download domtoimage will take that entire element by the class and offer to save. The save function is achieved using another package called File Saver

The main interactivity is done using ReactJS with local state.

linkedinreactionpollgenerator's People

Contributors

tamalchowdhury avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

linkedinreactionpollgenerator's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.