MyPlanet x Girl Guides Canada Twitter Watson Tone Analyzer App

Team Members

• Dong Hu
• Harrison Meinert-Rita
• Chang Liu
• Shwetha Sivakumar

Problem statement

GirlGuidesCanada is embarking on a massive change which will impact all of its members in some way, shape or form (~100k). Girls, parents, Guiders or other Sr. volunteers have no centralized way to share what they feel/think about the change and we have no way to hear, analyze and consolidate 'the pulse' of the field. We need a better way to get at this information to help us make decisions in real time!

Our solution

• Created an application that allows the client to gather data from social media
• Currently using Twitter API but scalable to other social media APIs
• We gathered data from these five hashtags: #GirlGuides, #GirlGuidesCanada, #GirlGuidesCookies, #GirlScouts, #MyPlanet
• We want the client to be able to hear people's thoughts and opinions on this change, therefore allowed filtering of tweets based on key words, hashtags or twitter handle.
• Analyzed the sentiment (joy, fear, sadness, disguist, anger) of each tweet body using Watson Tone Analyzer API

Screenshot

Requirements

• Mac OS X, Windows, or Linux
• Yarn package + Node.js v6.5 or newer
• Text editor or IDE pre-configured with React/JSX/Flow/ESlint (learn more)

Directory Layout

Before you start, take a moment to see how the project structure looks like:

.
├── /build/                     # The folder for compiled output
├── /docs/                      # Documentation files for the project
├── /node_modules/              # 3rd-party libraries and utilities
├── /public/                    # Static files which are copied into the /build/public folder
├── /src/                       # The source code of the application
│   ├── /components/            # React components
│   ├── /data/                  # GraphQL server schema and data models
│   ├── /routes/                # Page/screen components along with the routing information
│   ├── /client.js              # Client-side startup script
│   ├── /config.js              # Global application settings
│   ├── /server.js              # Server-side startup script
│   └── ...                     # Other core framework modules
├── /test/                      # Unit and end-to-end tests
├── /tools/                     # Build automation scripts and utilities
│   ├── /lib/                   # Library for utility snippets
│   ├── /build.js               # Builds the project from source to output (build) folder
│   ├── /bundle.js              # Bundles the web resources into package(s) through Webpack
│   ├── /clean.js               # Cleans up the output (build) folder
│   ├── /copy.js                # Copies static files to output (build) folder
│   ├── /deploy.js              # Deploys your web application
│   ├── /postcss.config.js      # Configuration for transforming styles with PostCSS plugins
│   ├── /run.js                 # Helper function for running build automation tasks
│   ├── /runServer.js           # Launches (or restarts) Node.js server
│   ├── /start.js               # Launches the development web server with "live reload"
│   └── /webpack.config.js      # Configurations for client-side and server-side bundles
├── Dockerfile                  # Commands for building a Docker image for production
├── package.json                # The list of 3rd party libraries and utilities
└── yarn.lock                   # Fixed versions of all the dependencies

Quick Start

1. Get the latest version

You can start by cloning the latest version of this project on your local machine by running:

$ git clone \
      git@github.com:hmeinertrita/MyPlanetGirlGuides.git
$ cd MyPlanetGirlGuides

2. Run yarn install

This will install both run-time project dependencies and developer tools listed in package.json file.

3. Set up MongoDB database to store tweets react-tweets

1. Install MongoDB
2. use react-tweets to create database named react-tweets
3. Start mongo service brew start mongodb and mongo

4. Run yarn start

This command will build the app from the source files (/src) into the output /build folder. As soon as the initial build completes, it will start the Node.js server (node build/server.js) and Browsersync with HMR on top of it.

http://localhost:3000/ — Node.js server (build/server.js) with Browsersync and HMR enabled
http://localhost:3000/graphql — GraphQL server and IDE
http://localhost:3001/ — Browsersync control panel (UI)

Now you can open your web app in a browser, on mobile devices and start hacking away. Whenever you modify any of the source files inside the /src folder, the module bundler (Webpack) will recompile the app on the fly and refresh all the connected browsers.

Note that the yarn start command launches the app in development mode, the compiled output files are not optimized and minimized in this case.

Additional Resources

• Getting Started with React.js
• Getting Started Redux.js
• About Universal-Router
• React.js Questions on StackOverflow
• React.js Discussion Board
• Flow — A static type checker for JavaScript
• The Future of React
• Learn ES6, ES6 Features

---

Based off of the react-starter-kit

[rsk]: https://www.reactstarterkit.com
[demo]: http://demo.reactstarterkit.com