jamman-cdn / dashboard

Weather and Google calendar dashboard built with React & Flux

Dashboard

Weather and Google calendar dashboard built with React & Flux

Screenshot:

To build, make sure you have the latest version of Node installed. Node is just used for package management and to ease local development. If you've never used Node before, it's a quick install and there are installers for multiple platforms, including Windows, Linux and OSX.

Quick Start

Yarn is used for dependency management. Webpack is used for bundling and workflow. If you don't have these installed, just run:

npm install -g yarnpkg webpack

After cloning the repo, run the following commands in the project directory to get the required Javascript package dependencies and build the bundle.js file:

yarn
webpack -w

This will also watch your local system for any changes. If you make changes to any referenced components, the bundle.js file will automatically be rebuilt.

For a production-use minified bundle.js, run the following command:

webpack --optimize-minimize

How do I hack on this locally?

Install your editor

I recommend getting Sublime Text (with the ReactJS plugins) to edit your source code locally. Sublime does a great job with lots of different formats and with the React plugins it does a great job of formatting your components.

Install a simple web server

You can get away with just opening local files in a browser for simple prototypes, but once you start calling external API's, running a local web server is a requirement. I recommend http-server. Setting it up is a snap once you have node installed. Just run the following from a command line:

npm install http-server -g

To start the server, navigate to the root of the project directory and type:

http-server

This will start a server at http://localhost:8080 that serves content from your project directory.

Rebuild your source automagically

When making changes locally, I recommend you have another command line window open automatically building bundle.js for you when you make changes.

Navigate to the project directory and type:

yarn
webpack -w

The dime tour

The app is constructed using ReactJS and the Flux architecture.

ReactJS

ReactJS is a new way of designing user interfaces on the web, written by the Facebook Engineering team. React lets you compose your UI with a collection of components. If you're new to React, the thinking in React tutorial is a good place to start.

Flux

Flux is a way of passing data around a web app. In our case, we use Flux on the client side -- since this is a single page app.

Flux is best illustrated with this diagram:

A unidirectional data flow is central to the Flux pattern, and the above diagram should be the primary mental model for the Flux programmer. The dispatcher, stores and views are independent nodes with distinct inputs and outputs. The actions are simple objects containing the new data and an identifying type property.

How do you use React and Flux in the app?

Basically React = UI and Flux = data flow. Following the diagram, above ...

Piece	Found in these source files
API utils	Found in js\utils. These fetch data using an Ajax call and pass it to an Action.
Actions	Found in js\actions. Actions are the entry point for data in the system.
Dispatcher	Found in js\dispatcher\AppDispatcher Taken verbatim from the Flux repo. Take a look at it. It's pretty simple. It the app it just works as the 'spine' -- sending data from actions to stores that have asked for it.
Stores	Found in js\stores. Stores manage the state of one type of data. When that data is updated, they let any interested parties know about it. Stores also provide helper methods to get to their data.
Views	Pretty much everything under js\components. These are all React comopnents. The app is DashboardApp.react. The two main pages are DashboardHome and DashboardSettings. Everything else in that directory is a UI component that makes up the main dashboard screen.

Where is the data coming from?

There are 2 major data sources for the app: Forecast.io and Google calendar. To make things a bit more straightforward to access, I have created 2 microservices that the app calls. These microservices then fetch (and cache) data as needed:

Service	Description	Found here
forecast-service	Gets weather and pollen information	https://github.com/danesparza/forecast-service
calendar-service	Gets Google calendar information	https://github.com/danesparza/calendar-service