A simple React + Redux application bootstrap template

I often find myself wasting time setting up a base for frontend projects involving both React and Redux. Instead of doing it from scratch every single time, thought I’d just commit a brain dump here on my blog.

The sample application that’s built here is a simple random number generator. This application uses ES6 syntax. Before starting to read this post, I’d recommend you to familiarize yourself with the folder structure and source code of this little application, here.

Folder Structure:

  • All React components go into the components folder
  • app.js is the main starting point for the whole application
  • store.js combines all middlewares and reducers together into one redux store.

App.js

The starting point. This file is pretty self-explanatory, the motivation behind each middleware has been added as comments to the source code:

Actions:

Actions are where the main magic happens, all GET,POST,DELETE requests can be placed here. Each action is defined and exported as a function (since we’re using redux-thunk) in this file. In this simple example the action is simply generating a random number and returning it as a string.

Reducers:

Reducers simply change the state of our React Application from one state to the next one. The state for this simple application is simply a JSON object with two keys, one for data and a boolean for error: {data:””, error:false}. Whenever an action is performed, the reducer gets the output of the performed action in the form of the action.payload object. Since we set the data key in our action previously, this is what we’ll get here and simply load it into the new state.

We can have multiple reducers and combine them all in the index.js file in the reducers folder.

Not familiar with ES6? Check out an explanation for the three dots here.

Our Main React Component:

If we want our component to perform an action, we simply import the file that contains our action here. The @connect is used to transfer the store and anything defined inside the callback passed to it into the props of the react object created here. Next, we’re obtaining our application’s state data from our store and displaying it up here. Each of our reducers can be easily referenced as a key of the store object, once you have accessed that, you have access to all your reducer’s state data.

For hooking up actions to components, simply call a store.dispatch function from their respective handlers. In this case, since we’re tying the DO_SOMETHING action to the click of a button. We can create a handler function called doSomethingMore and add it as a member function to this class. Then simply call the dispatch function (which was hooked to our class’s props by @connect) and pass it the action we want to perform as the first parameter.

doSomethingMore() {
this.props.dispatch(doSomething())
}

Then simply call it on the Click event of the button:

<button onClick={this.doSomethingMore.bind(this)}>Randomize</button>

And, finally here’s our complete class:

and here’s our little application:

 

 

 

 

 

GateSentry : A newer version is finally here!

Since last year’s release, I decided to do a complete rewrite of GateSentry in Golang. I decided to ditch both Squid and Dansguardian (which are both extremely awesome) because they make it a little difficult to package and ship GateSentry as a single cross platform binary.

So as of this release GateSentry has its own self contained proxy server and a parental control suite packaged together in a single binary. Aside from good old filtering features I’ve added a few more requested features to it as well, check out the whole thing here.

Releasing GateSentry Beta v.10

UPDATE : March 2017 – I’ve released a newer version that works on Windows/Mac/Linux too! Check it out here.

 

I built GateSentry back in 2014 as a single appliance based solution to filter my home’s internet traffic; block advertisements and obscene content and also have a nice User Interface which anyone could manage. For the overall community’s benefit I also decided to share my efforts as a nice easy to install image. I had no idea it would get so popular. Since then, I have received countless emails from people around the world thanking me for GateSentry.

In the past 2 years the Raspberry Pi boards have improved both in their performance and features, to make sure GateSentry is able to take advantage of these improvements I spent the last 3 months updating GS, ironing out bugs, adding a few features and overall just making sure it runs on the awesome new Pi2 and Pi3 boards. So, here it is,  months of hard work culminated into a 3 Gigabyte image.

What is GateSentry?

GateSentry is a free and Opensource Raspberry Pi based web filtering/Parental Controls Solution. It features:

  • SSL Filtering
  • File Download restriction based upon MIME types
  • Phrase based content restriction
  • Individual Site blocking
  • Ad Blocking
  • Switch Internet access off
  • Its Free!
What’s new in v1.0?
  • Updated Squid
  • Support for all Raspberry Pi boards upto Raspberry Pi 3
  • Built in Wifi Access point for the Pi3
  • Sets up proxy automatically on clients, works out of the Box on the Pi3 and Pi2 (if your Wifi Device is supported)
  • Support for disabling internet access.
  • Support for OTA updates
  • Raspbian GNU/Linux 8 (jessie) , kernel verison: Linux raspberrypi 4.1.19+ #853 Wed Mar 9 18:04:48 GMT 2016 armv6l GNU/Linux
Screenshots

Main screen

main

Change built-in Wifi name and password

wifipass

Disable Internet access for Wifi Clients

internetswitch

After the intstall

SSH into the PI using the default raspbian login credentials.

username: pi

password: raspberry

and run the following.

  • sudo apt-get install raspi-config
  • sudo raspi-config
    • Expand file system
  • Change `pi` user’s password
  • [Optional] Disable logging for Squid
Getting Started

Connecting to the Pi.

If you have a Pi-3 or a Pi-2 (with a Wifi adapter) GateSentry would automatically try to start a Wifi Access Point with the following details:

SSID: GateSentry-AP

Password: letmein8977

 

Logging in into the administration area

If you’re using GateSentry’s AP . The administration area is accessible at http://172.24.1.1:897/ . If you’re not using GateSentry’s AP. Simply obtain your Raspberry Pi’s IP from your Router and connect to port 897 on it.

Login credentials:

user: [email protected]

password: letmein

 

Filtering Traffic:

If you’re using GateSentry’s built in Wifi access point, then simply connecting to the access point would give you filtered internet access.

If you’re connecting to GateSentry without using the wifi access point then simply set your browser’s http/s proxy to http://RaspberryPiIp:8080/

 

Download the Certificate for https traffic:

Download it here

 

Download Gatesentry

This is not a final release, I just wanted the community out there to try it out and let me know of any other bugs or issues they run into.  Try at your own risk and please be sure to report bugs here so they may be removed in further updates.

Download now

Download now

Tracking iPhones through iCloud

If you’re like me; someone whose parents get super-worried if you miss their phone calls when it gets late and you’re on a night out with your friends. You have a smartphone and want to keep them updated with your live location even when you somehow miss their calls. And you want to do that without spending 15 bucks a month, installing some spy app or jail-breaking your phone. Then, this simple free solution might be exactly what you’re looking for.

iDeviceTracker is a simple web-app that I coded over the weekend, that allows you to track any iCloud activated iphone/ipod/ipad using just a web browser. The code is freely available here.

Just follow the instructions here and upload it to Heroku (they have a free plan), then access the application via a web browser, add up your device’s iCloud credentials there and you’re good to go. You can give this web address to your parents where they can check up on your location in case they’re unable to reach you.

IMPORTANT: Be sure to enable the Find-My-iPhone feature along with Wifi/3g on your device before you test everything out.

BTW, Here’s how it looks.

iphone-tracker

 

PS: If you’re installing it on a host other than Heroku, make sure they have curl installed and the following file permissions added.

chmod 777 devices.php

In case cURL isn’t installed, here are the instructions to install it on ubuntu:

sudo apt-get install curl

sudo apt-get install php5-curl

 

🙂

Downloading tweets using Twitter’s Streaming API for Big Data Analysis

I recently wrote a simple PHP web app for creating Twitter data collection campaigns. It allows you to download hundreds of thousands of tweets [tested upto 1.2 million tweets on an Amazon EC2 instance] based on a specific set of keywords. The data it produces is stored in a MySQL database which can further be converted to a CSV or any other format of your choice.

The data collected is properly formatted and stored in a MySQL database, here are the fields that are recorded:

Fields per Tweet

scraper-dataset

 

Fields per Twitter User

scraper-dataset2

The source code/app can be downloaded from here.

The instructions for its usage are detailed in this blog post.

Step 1: Create a database

step1-scraper

Step 2: Create a new Twitter App [link]. Get your apps credentials from Twitter and add them up in db/140dev_config.php.step0-scraper

Step 3: Edit db/db_config.php to match your own MySQL database server settings

step2-scraper

 

Step 4: Go to your MySQL database and import the database structure [mysql_database_schema.sql] inside the db folder into your database.step3-scraper

Before proceeding forward make sure that you have libssh2 installed on your server, if you haven’t you’ll have to install it now since the script requires the ssh2 library to create a new ssh session to its host machine and run the data collector script in a new screen session.

Ubuntu: sudo apt-get install libssh2-php

OPTIONAL: If you don’t want the script to SSH into your machine you’ll have to run your campaign yourself by running the following commands via a terminal on your host machine:

php get_tweets.php <campaign-name> &
php parse_tweets.php <campaign-name> & 

Replace <campaign-name> with the name you chose while creating the campaign. 

Important : Don’t forget to restart your webserver once the installation is complete.

step5-scraper

Update SSH credentials to match those of your server in the file NiceSSH.class.php

step6-scraper

 

Step 5 [the last step!]: Open up your Webserver to the directory of the TFDC project, and click on create a new campaign.

step4-scraper