diff --git a/client/actions/NotesActions.js b/client/actions/NotesActions.js
new file mode 100644
index 0000000..e15bc45
--- /dev/null
+++ b/client/actions/NotesActions.js
@@ -0,0 +1,37 @@
+import AppDispatcher from '../dispatcher/AppDispatcher';
+import Constants from '../constants/AppConstants';
+
+import api from '../api';
+
+const NoteActions = {
+    loadNotes() {
+        AppDispatcher.dispatch({
+            type: Constants.LOAD_NOTES_REQUEST
+        });
+
+        api.listNote()
+            .then(({data}) =>
+                AppDispatcher.dispatch({
+                    type: Constants.LOAD_NOTES_SUCCESS,
+                    notes: data
+                }))
+            .catch(err => AppDispatcher.dispatch({
+                type: Constants.LOAD_NOTES_FAIL,
+                error: err
+            }))
+    },
+
+    createNote(note) {
+        api.createNote(note)
+            .then(() => this.loadNotes())
+            .catch(err => console.log(err));
+    },
+
+    deleteNotes(noteID) {
+        api.deleteNotes(noteID)
+            .then(() => this.loadNotes())
+            .catch((err) => console.log(err));
+    }
+};
+
+export default NoteActions;
\ No newline at end of file
diff --git a/client/api/index.js b/client/api/index.js
new file mode 100644
index 0000000..93759a1
--- /dev/null
+++ b/client/api/index.js
@@ -0,0 +1,17 @@
+import request from 'superagent';
+
+import { apiPrefix } from '../../etc/config.json';
+
+
+//super agent instead of axis
+export default {
+    listNote () {
+        return request.get(`${apiPrefix}/notes`);
+    },
+    createNote (data) {
+        return request.post(`${apiPrefix}/notes`).send(data);
+    },
+    deleteNotes (noteId) {
+        return request.del(`${apiPrefix}/notes/${noteId}`);
+    }
+};
\ No newline at end of file
diff --git a/client/components/App.jsx b/client/components/App.jsx
index 4f6b4e7..73237f6 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -5,11 +5,20 @@ import {NotesGrid} from "./NotesGrid.jsx";
 import './App.less';
 
 export class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleNoteAdd = this.handleNoteAdd.bind(this);
+    }
+    //this handler to add note
+    handleNoteAdd() {
+        console.log(this.props);
+    }
+
     render() {
         return (
             <div className="App">
                 <h2 className="App_header">Notes App</h2>
-                <NotesGrid />
+                <NotesGrid/>
                 <NotesEditor onNoteAdd={this.handleNoteAdd}/>
             </div>
         );
diff --git a/client/components/App.less b/client/components/App.less
index 0a8312f..2110466 100644
--- a/client/components/App.less
+++ b/client/components/App.less
@@ -1,12 +1,12 @@
-.App {
-  max-width: 1200px;
-  width: 100%;
-}
-
-.App__header {
-  text-align: center;
-  font-weight: 500;
-  color: grey;
-  text-shadow: 0px 2px 3px rbga(255,255,255,0.5);
-}
-
+.App {
+  max-width: 1200px;
+  width: 100%;
+}
+
+.App__header {
+  text-align: center;
+  font-weight: 500;
+  color: grey;
+  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
+}
+
diff --git a/client/components/Note.jsx b/client/components/Note.jsx
index dbfbdc4..3e0d597 100644
--- a/client/components/Note.jsx
+++ b/client/components/Note.jsx
@@ -1,7 +1,7 @@
-import React from 'react';
-
-export class Note extends React.Component {
-    render() {
-        return <h1>Note</h1>;
-    }
+import React from 'react';
+
+export class Note extends React.Component {
+    render() {
+        return <h1>Note</h1>;
+    }
 }
\ No newline at end of file
diff --git a/client/components/NoteEditor.less b/client/components/NoteEditor.less
index 24f256e..1079215 100644
--- a/client/components/NoteEditor.less
+++ b/client/components/NoteEditor.less
@@ -1,79 +1,79 @@
-.NoteEditor {
-  width: 100%;
-  max-width: 600px;
-  padding: 16px;
-  margin: 16px auto;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  border-radius: 2px;
-  display: flex;
-  flex-direction: column;
-}
-
-.NoteEditor__text {
-  width: 100%;
-  resize: none;
-  margin: 5px;
-  font-size: 14px;
-  border: none;
-  font-weight: 300;
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.NoteEditor__title {
-  font-size: 14px;
-  width: 100%;
-  resize: none;
-  margin: 5px;
-  border: none;
-  font-weight: 500;
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.NoteEditor__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.NoteEditor__button {
-  border: 0 none;
-  border-radius: 24px;
-  padding: 10px 15px;
-  margin: 10px;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 160px;
-  text-align: center;
-  line-height: 1.3;
-  font-size: 15px;
-  color: #fff;
-  text-transform: uppercase;
-  font-weight: 500;
-  transition: all 100ms ease-in-out;
-  background: #3ac569;
-  color: white;
-
-  &:hover {
-    opacity: .9;
-    transition: all 100ms ease;
-  }
-
-  &:active {
-    opacity: .75;
-    transform: scale(.97);
-    transition: all 100ms ease;
-  }
-
-  &:focus {
-    outline: 0;
-  }
+.NoteEditor {
+  width: 100%;
+  max-width: 600px;
+  padding: 16px;
+  margin: 16px auto;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+}
+
+.NoteEditor__text {
+  width: 100%;
+  resize: none;
+  margin: 5px;
+  font-size: 14px;
+  border: none;
+  font-weight: 300;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.NoteEditor__title {
+  font-size: 14px;
+  width: 100%;
+  resize: none;
+  margin: 5px;
+  border: none;
+  font-weight: 500;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.NoteEditor__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.NoteEditor__button {
+  border: 0 none;
+  border-radius: 24px;
+  padding: 10px 15px;
+  margin: 10px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 160px;
+  text-align: center;
+  line-height: 1.3;
+  font-size: 15px;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 500;
+  transition: all 100ms ease-in-out;
+  background: #3ac569;
+  color: white;
+
+  &:hover {
+    opacity: .9;
+    transition: all 100ms ease;
+  }
+
+  &:active {
+    opacity: .75;
+    transform: scale(.97);
+    transition: all 100ms ease;
+  }
+
+  &:focus {
+    outline: 0;
+  }
 }
\ No newline at end of file
diff --git a/client/components/NotesEditor.jsx b/client/components/NotesEditor.jsx
index 5f3674f..207900e 100644
--- a/client/components/NotesEditor.jsx
+++ b/client/components/NotesEditor.jsx
@@ -1,70 +1,70 @@
-import React from 'react';
-
-import './NoteEditor.less';
-
-export class NotesEditor extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            title: '',
-            text: '',
-            color: '#FFFFFF'
-        };
-        this.handleTextChange = this.handleTextChange.bind(this);
-        this.handleTitleChange = this.handleTitleChange.bind(this);
-        this.handleNoteAdd = this.handleNoteAdd.bind(this);
-    }
-
-    handleTextChange(e) {
-        this.setState({text: e.target.value});
-    }
-
-    handleTitleChange(e) {
-        this.setState({title: e.target.value});
-    }
-
-    handleNoteAdd() {
-        const newNote = {
-            title: this.state.title,
-            text: this.state.text,
-            color: this.state.color
-        };
-
-        this.props.onNoteAdd(newNote);
-        this.setState({
-            title: '',
-            text: '',
-            color: '#FFFFFF'
-        });
-    }
-
-    render() {
-        return (
-            <div className="NoteEditor">
-                <input
-                    type="text"
-                    className="NoteEditor___title"
-                    placeholder="Enter title"
-                    value={this.state.title}
-                    onChange={this.handleTitleChange}
-                />
-                <textarea
-                    placeholder="Enter note text"
-                    rows="5"
-                    className="NoteEditor__text"
-                    value={this.state.text}
-                    onChange={this.handleTextChange}
-                />
-                <div>
-                    <button
-                        className="NoteEditor__button"
-                        disabled={!this.state.text}
-                        onClick={this.handleNoteAdd}
-                    >
-                        Add
-                    </button>
-                </div>
-            </div>
-        );
-    }
+import React from 'react';
+
+import './NoteEditor.less';
+
+export class NotesEditor extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            title: '',
+            text: '',
+            color: '#FFFFFF'
+        };
+        this.handleTextChange = this.handleTextChange.bind(this);
+        this.handleTitleChange = this.handleTitleChange.bind(this);
+        this.handleNoteAdd = this.handleNoteAdd.bind(this);
+    }
+
+    handleTextChange(e) {
+        this.setState({text: e.target.value});
+    }
+
+    handleTitleChange(e) {
+        this.setState({title: e.target.value});
+    }
+
+    handleNoteAdd() {
+        const newNote = {
+            title: this.state.title,
+            text: this.state.text,
+            color: this.state.color
+        };
+
+        this.props.onNoteAdd(newNote);
+        this.setState({
+            title: '',
+            text: '',
+            color: '#FFFFFF'
+        });
+    }
+
+    render() {
+        return (
+            <div className="NoteEditor">
+                <input
+                    type="text"
+                    className="NoteEditor__title"
+                    placeholder="Enter title"
+                    value={this.state.title}
+                    onChange={this.handleTitleChange}
+                />
+                <textarea
+                    placeholder="Enter note text"
+                    rows="5"
+                    className="NoteEditor__text"
+                    value={this.state.text}
+                    onChange={this.handleTextChange}
+                />
+                <div>
+                    <button
+                        className="NoteEditor__button"
+                        disabled={!this.state.text}
+                        onClick={this.handleNoteAdd}
+                    >
+                        Add
+                    </button>
+                </div>
+            </div>
+        );
+    }
 }
\ No newline at end of file
diff --git a/client/components/NotesGrid.jsx b/client/components/NotesGrid.jsx
index af9ed5d..1048d46 100644
--- a/client/components/NotesGrid.jsx
+++ b/client/components/NotesGrid.jsx
@@ -1,7 +1,7 @@
-import React from 'react';
-
-export class NotesGrid extends React.Component {
-    render() {
-        return <h1>NotesGrid</h1>;
-    }
+import React from 'react';
+
+export class NotesGrid extends React.Component {
+    render() {
+        return <h1>NotesGrid</h1>;
+    }
 }
\ No newline at end of file
diff --git a/client/constants/AppConstants.js b/client/constants/AppConstants.js
new file mode 100644
index 0000000..6af80b9
--- /dev/null
+++ b/client/constants/AppConstants.js
@@ -0,0 +1,7 @@
+import keyMirror from 'keymirror';
+
+export default keyMirror({
+    LOAD_NOTES_REQUEST: null,
+    LOAD_NOTES_SUCCESS: null,
+    LOAD_NOTES_FAIL: null
+});
\ No newline at end of file
diff --git a/client/dispatcher/AppDispatcher.js b/client/dispatcher/AppDispatcher.js
new file mode 100644
index 0000000..9329f4d
--- /dev/null
+++ b/client/dispatcher/AppDispatcher.js
@@ -0,0 +1,3 @@
+import {Dispatcher} from 'flux';
+
+export default new Dispatcher();
\ No newline at end of file
diff --git a/client/main.js b/client/main.js
index 27862b7..48d2774 100644
--- a/client/main.js
+++ b/client/main.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {App} from "./components/app.jsx";
+import {App} from "./components/App.jsx";
 
 ReactDOM.render(
     <App />,
diff --git a/package.json b/package.json
index 59b5c07..be34cfb 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,15 @@
   },
   "dependencies": {
     "body-parser": "^1.17.2",
+    "events": "^1.1.1",
     "express": "^4.15.4",
+    "flux": "^3.1.3",
+    "keymirror": "^0.1.1",
     "less": "^2.7.2",
     "mongoose": "^4.11.7",
     "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "superagent": "^3.6.0"
   },
   "devDependencies": {
     "autoprefixer-loader": "^3.2.0",
@@ -31,5 +35,7 @@
     "url-loader": "^0.5.9",
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1"
-  }
+  },
+  "repository": "https://github.com/Ashhm/notes.git",
+  "author": "Bulah Sergey"
 }