diff --git a/front/.flowconfig b/front/.flowconfig
new file mode 100644
index 0000000..4a58bdc
--- /dev/null
+++ b/front/.flowconfig
@@ -0,0 +1,7 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[options]
diff --git a/front/package.json b/front/package.json
index 53a736a..95574bc 100644
--- a/front/package.json
+++ b/front/package.json
@@ -33,6 +33,7 @@
     "eslint-plugin-react": "6.4.1",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.10.0",
+    "flow-bin": "^0.45.0",
     "fs-extra": "0.30.0",
     "html-webpack-plugin": "2.24.0",
     "http-proxy-middleware": "0.17.3",
@@ -52,7 +53,8 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom"
+    "test": "node scripts/test.js --env=jsdom",
+    "flow": "flow"
   },
   "jest": {
     "collectCoverageFrom": [
diff --git a/front/src/App.js b/front/src/App.js
index db87671..819f88c 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -1,3 +1,5 @@
+// @flow
+
 import React, { Component } from 'react';
 import renderIf from 'render-if';
 import R from 'ramda';
@@ -6,9 +8,7 @@ function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {
     return response;
   } else {
-    var error = new Error(response.statusText);
-    error.response = response;
-    throw error;
+    throw new Error(response.statusText);
   }
 }
 
@@ -16,7 +16,23 @@ function parseJSON(response) {
   return response.json();
 }
 
+type Category = {
+  uid   : string,
+  link  : string,
+  title : string
+  };
+
+type GrandCategoryT = {
+  title    : string,
+  finished : Array<Category>,
+  wip      : Array<Category>,
+  stubs    : Array<Category>
+  }
+
 class GrandCategory extends Component {
+  props: {
+    val: GrandCategoryT
+  };
   render() {
     const renderBigCatLink = cat => {
       return(
@@ -44,27 +60,29 @@ class GrandCategory extends Component {
       );
     };
 
+    const grand = this.props.val;
+
     return(
-      <div className="GrandCategory" key={this.props.title}>
-        <h1>{this.props.title}</h1>
+      <div className="GrandCategory" key={grand.title}>
+        <h1>{grand.title}</h1>
         
         <div className="finished">
-          {this.props.finished.map(renderBigCatLink)}
+          {grand.finished.map(renderBigCatLink)}
         </div>
 
-        {renderIf(!R.isEmpty(this.props.wip))(
+        {renderIf(!R.isEmpty(grand.wip))(
           <div className="wip">
             <h2>In progress</h2>
             <p>{R.intersperse(", ")(
-                  this.props.wip.map(renderSmallCatLink))}</p>
+                  grand.wip.map(renderSmallCatLink))}</p>
           </div>
         )}
 
-        {renderIf(!R.isEmpty(this.props.stubs))(
+        {renderIf(!R.isEmpty(grand.stubs))(
           <div className="stubs">
             <h2>To be written</h2>
             <p>{R.intersperse(", ")(
-                  this.props.stubs.map(renderSmallCatLink))}</p>
+                  grand.stubs.map(renderSmallCatLink))}</p>
           </div>
         )}
 
@@ -97,6 +115,9 @@ class GrandCategory extends Component {
 }
 
 class App extends Component {
+  state: {
+    categories: Array<GrandCategoryT>;
+  };
   componentWillMount() {
     this.setState({ categories: [] });
   }
@@ -114,7 +135,7 @@ class App extends Component {
       <div className="App">
         <Tiles space="1em">
           {this.state.categories.map(grand => {
-             return <GrandCategory {...grand} />;
+             return <GrandCategory val={grand} />;
            })
           }
         </Tiles>