Tag: react

Congress, who is? – A Civic Tech project

Congress, who is? – A Civic Tech project

A while ago I had this idea for a project: To show how representatives voted, either for or against, on bills.

People elect representatives but often forget to follow what they are up to. I asked around: who is your representative? The most common response: I don’t know. If people don’t even know who their representatives are, when it comes to being listened to, how they are going to contact the House or Senate member?

That’s when Congress, who is? was born out of a 2 week project where I poured myself into and worked with the ProPublica Congress API, Twilio API and a bit of the Twitter API (those pictures must come from somewhere!).

People are able to search through their zipcode to find their representative or filter by State/Territory, Party, House or Name. Once into the member profile you can do a call directly from your browser to the member’s office.

Some images from https://www.congresswhois.com

The USA map is rendered showing a simple majority of the representation of the House. On click the listing of representatives is shown on the right.

It’s possible to also compare statistics from one politician to another. See how they vote with the party and in common between themselves.

Screenshot-2017-11-28 Congress, who is (3)

Features to come

  • Show beyond current Congress, at this moment the congress number is 115, and the API can show me members since 102-115 for House and 80-115 for Senate.
  • Show bills and votes
  • Add full text search
  • More to be defined

Code

Code will be released under MIT license. There is a few cleaning up to do, and I want to open source it with a few issues already opened and documented. As I said, the app was developed in two weeks, but it grew on me and I want to take a step further.

Stack

Backend:

  • Ruby on Rails
  • PostgreSQL

Frontend:

  • React
  • Redux
  • Semantic UI

Contributions

Right now the code is running in a “closed” beta, if you can’t wait and want to help, DM me on Twitter (no need to follow back, DMs are open on my end), or use this website contact form, or simply mail me at gabriela.io.

Thank you

I want to give a special thanks to Twilio. During this year PHPWorld they hosted a competition to showcase your project using Twilio. I showcased this project and they awarded the project with some awesome amount of credits for us to run for a while on it. So thank you for the support!

Disclaimers

Calls only works on Chrome, Firefox and Safari for Desktop. The client call doesn’t work on mobile, Internet Explorer or Opera. It’s more of a technical limitation on how each browser implement their JavaScript than application level development.

The data displayed may be incorrect. That is because it is synced daily with the ProPublica API, whatever they have on record, it is what I am showing.

react-usa-map: A package for customizing the USA map without D3

react-usa-map: A package for customizing the USA map without D3

TL;DR;

  • I created a React package called react-usa-map
  • It displays the USA map with the states including DC / Hawaii / Alaska
  • It’s MIT license
  • Install instructions on The package section of this post.

Package origins

I am working on a project which may or may not go much further. I am building a Rails back-end and playing with React + Redux for the front-end.

This project requires me to have a map of US States and for it to be possible to customize the colors and add an “onClick” event for each state.

I decided to create a React component because said map will be used in more than one place in my project. I tried D3. It’s good, really good, but I needed something simpler. I have three weeks to do this project and between programming back-end and front-end alone I don’t have the time to do the perfect Chropleth map as much as I want to. It is a “nice to have” in my project, not a “must have”. Maybe after the end of the project I will open source it. I do need to check if I can legally open source the project since I am getting the data from a 3rd party with tight licensing requirements.

After finding this map on Wikimedia through the react-us-state-map package on npmjs.org I thought: this is a cool idea, to have the map as an SVG and then change the filling as I want it.

The first step for the package

I extracted the dimensions out of the <svg> and put in a JSON to be read by the component.

The second step

Facebook created this really cool thing for React: create-react-app. It allows you to have a boilerplate code for your react application without actually have to worry how to transpile your code for ECMAScript 2015 and configure webpack.

However they don’t have a create-react-package or create-react-component. Since I am just now going in this front-end adventure, I did what other developer would do in my place: I googled and found this repo.

The third step

I did some modifications on the package.json removing packages I wasn’t using and other necessary actions such as adding tags, scripts, etc.

The final step

Publishing to NPM is actually simple:

Once logged in the terminal run:

$ npm version 1.0.0 # your version number here
$ npm publish

After this I created a demo project to see if my map would work as intended.

The package

You can install using:

yarn add react-usa-map

or

npm install react-usa-map --save

Compatibility

It uses React 15.4.2 as minimum requirement and it is compatible with React 16.0.0.

More information

react-usa-map started with only me as a contributor, and since the release people contributed adding tests, continuous integration and new features.