diff --git a/.env b/.env
deleted file mode 100644
index 1e2371c..0000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-PORT=3003
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index d30f40e..c0d9809 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,9 @@
 # dependencies
 /node_modules
 
+# IDE
+/.idea
+
 # testing
 /coverage
 
@@ -19,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json
diff --git a/README.md b/README.md
index 2f631e8..2b0a088 100644
--- a/README.md
+++ b/README.md
@@ -1,43 +1,94 @@
-# Frontend Setup
-> Instructions to install dependencies and run frontend development environment.
+## Project Files 
+This is our basic file structure, including `build/`, `public/` and `src/`. 
+```
+/   
+├── build
+│   └── ...generated static resources: css, js, media
+│
+├── public
+│   └── ...favicon.ico, index.html, manifest.json
+│
+├── src
+│   └── ...development files
+│
+├── .gitignore
+├── package.json (dependencies, scripts, configuration)
+└── README.md
+```
+## Development
+For development, `src/` contains the main assets. There are `components/`, `resources/`, redux-based `actions/`, `constants/`, `reducers/` and `services/`.
 
-### Directory
-    .
-    ├── create-react-app        # For installing dependencies, you can delete after install
-    └── frontend                # Actual development environment
-         ├── other files...     # Stores App.js, components/, etc..
-         └── (to be updated)
+**Note**: each folder contains a file called `index.js`. This helps to shorten import statements, and the decision to include these is for convenience.
 
-### Install Create-React-App (only for dependencies)
-Link: https://github.com/IS3106-T07/create-react-app  
+```
+/ ...
+└── src
+    ├── actions
+    │   ├── ...actions.js
+    │   └── index.js
+    ├── components
+    │   ├── css
+    │   │   └── ...example.module.css
+    │   ├── App.js
+    │   ├── PrivateRoute.js
+    │   └── ...PageComponents.js
+    ├── constants
+    │   ├── ...constants.js
+    │   └── index.js
+    ├── reducers
+    │   ├── ...reducer.js
+    │   └── index.js
+    ├── resources
+    │   └── (images)
+    ├── services
+    │   ├── ...service.js
+    │   └── index.js
+    └ ...
+```
 
-    git clone https://github.com/IS3106-T07/create-react-app  
-    cd create-react-app  
-    npm install  
+And `helpers/`, `index.html` and `index.js`. 
+```
+    ...
+    ├── helpers
+    │   ├── auth-header.js
+    │   ├── fake-backend.js
+    │   ├── history.js
+    │   ├── index.js
+    │   ├── serviceWorker.js
+    │   └── store.js
+    ├── index.html
+    └── index.js
+```
 
-### Install Frontend
-Link: Current Page
+## Using this project
+The development server runs on `PORT 8000`.  See *scripts* in `package.json` to change.  
+Configure *apiUrl* at `src/index.js`. Default value: http://localhost:3000.  
 
-    cd ..
-    git clone https://github.com/IS3106-T07/frontend
-    cd frontend
-    npm install
+**Note**: `HTTPS` is required for service workers.  
+  
+Run in **development**
+```
+npm install 
+npm start
+HTTPS=true npm start                    // Linux, macOS (bash)
+set HTTPS=true&&npm start               // Windows (cmd.exe)
+($env:HTTPS = $true) -and (npm start)   // Windows (powershell)
+```
+Run in **production**
+```
+npm install
+npm run build
+serve -s build
+```
+Run **tests**
+```
+npm build
+npm run test
+```
 
-### Testing
-    npm test
+## Creating a component
+```
+// todo Guide
+```
 
-### Run
-    npm start
-
-Running at http://localhost:3003 (and at specified IP network address, e.g. 192.168.1.40:3003)
-
-# FAQ
-> Frequently asked questions.
-
-### Q. I'm stuck at registry config, on install. How to proceed?
-Set config manually.
-
-    npm config set registry="http://registry.npmjs.org"
-
-### Q. Where is the PWA Setup Guide?
-See MANUAL.md.
\ No newline at end of file
+This brings us to the end of project-specific documentation.
\ No newline at end of file
diff --git a/package.json b/package.json
index 1db069f..691a2af 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,44 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
-  "devDependencies": {
-    "react-router-dom": "^4.4.0-alpha.1",
-    "react-scripts": "1.1.5"
+  "license": "MIT",
+  "scripts": {
+    "start": "PORT=8000 react-scripts start export",
+    "build": "react-scripts build",
+    "test": "react-scripts test"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
   },
   "dependencies": {
-    "react": "^16.5.1",
-    "react-dom": "^16.5.1"
+    "config": "^2.0.1",
+    "history": "^4.6.3",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-redux": "^5.0.5",
+    "react-router-dom": "^4.1.2",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
+  "devDependencies": {
+    "babel-core": "^6.21.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "css-loader": "^1.0.0",
+    "html-webpack-plugin": "^2.26.0",
+    "path": "^0.12.7",
+    "react-scripts": "2.0.5",
+    "style-loader": "^0.23.0",
+    "url-loader": "^1.1.1",
+    "webpack-cli": "^3.1.2"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "homepage": "./"
 }
diff --git a/public/index.html b/public/index.html
index ed0ebaf..e74dd1d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Public</title>
   </head>
   <body>
     <noscript>
diff --git a/src/actions/alert.actions.js b/src/actions/alert.actions.js
new file mode 100644
index 0000000..94a6901
--- /dev/null
+++ b/src/actions/alert.actions.js
@@ -0,0 +1,19 @@
+import { alertConstants } from '../constants';
+
+export const alertActions = {
+    success,
+    error,
+    clear
+};
+
+function success(message) {
+    return { type: alertConstants.SUCCESS, message };
+}
+
+function error(message) {
+    return { type: alertConstants.ERROR, message };
+}
+
+function clear() {
+    return { type: alertConstants.CLEAR };
+}
\ No newline at end of file
diff --git a/src/actions/index.js b/src/actions/index.js
new file mode 100644
index 0000000..dc91c7c
--- /dev/null
+++ b/src/actions/index.js
@@ -0,0 +1,2 @@
+export * from './alert.actions';
+export * from './user.actions';
diff --git a/src/actions/user.actions.js b/src/actions/user.actions.js
new file mode 100644
index 0000000..007518e
--- /dev/null
+++ b/src/actions/user.actions.js
@@ -0,0 +1,94 @@
+import { userConstants } from '../constants';
+import { userService, history } from '../helpers';
+import { alertActions } from './';
+
+export const userActions = {
+    login,
+    logout,
+    register,
+    getAll,
+    delete: _delete
+};
+
+function login(email, password) {
+    return dispatch => {
+        dispatch(request({ email }));
+        userService.login(email, password)
+            .then(
+                user => {
+                    dispatch(success(user));
+                    history.push('/');
+                },
+                error => {
+                    dispatch(failure(error.toString()));
+                    console.log(error);
+                    dispatch(alertActions.error(error.toString()));
+                }
+            );
+    };
+
+    function request(user) { return { type: userConstants.LOGIN_REQUEST, user } }
+    function success(user) { return { type: userConstants.LOGIN_SUCCESS, user } }
+    function failure(error) { return { type: userConstants.LOGIN_FAILURE, error } }
+}
+
+function logout() {
+    userService.logout();
+    return { type: userConstants.LOGOUT };
+}
+
+function register(user) {
+    return dispatch => {
+        dispatch(request(user));
+
+        userService.register(user)
+            .then(
+                user => {
+                    dispatch(success());
+                    history.push('/login');
+                    dispatch(alertActions.success('Registration successful'));
+                },
+                error => {
+                    dispatch(failure(error.toString()));
+                    dispatch(alertActions.error(error.toString()));
+                }
+            );
+    };
+
+    function request(user) { return { type: userConstants.REGISTER_REQUEST, user } }
+    function success(user) { return { type: userConstants.REGISTER_SUCCESS, user } }
+    function failure(error) { return { type: userConstants.REGISTER_FAILURE, error } }
+}
+
+function getAll() {
+    return dispatch => {
+        dispatch(request());
+
+        userService.getAll()
+            .then(
+                users => dispatch(success(users)),
+                error => dispatch(failure(error.toString()))
+            );
+    };
+
+    function request() { return { type: userConstants.GETALL_REQUEST } }
+    function success(users) { return { type: userConstants.GETALL_SUCCESS, users } }
+    function failure(error) { return { type: userConstants.GETALL_FAILURE, error } }
+}
+
+// prefixed function name with underscore because delete is a reserved word in javascript
+function _delete(id) {
+    return dispatch => {
+        dispatch(request(id));
+
+        userService.delete(id)
+            .then(
+                user => dispatch(success(id)),
+                error => dispatch(failure(id, error.toString()))
+            );
+    };
+
+    function request(id) { return { type: userConstants.DELETE_REQUEST, id } }
+    function success(id) { return { type: userConstants.DELETE_SUCCESS, id } }
+    function failure(id, error) { return { type: userConstants.DELETE_FAILURE, id, error } }
+}
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
new file mode 100644
index 0000000..2531f61
--- /dev/null
+++ b/src/components/App.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Router, Route } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import { history } from '../helpers';
+import { alertActions } from '../actions';
+import { PrivateRoute } from './PrivateRoute';
+import { HomePage } from './HomePage';
+import { LoginPage } from './LoginPage';
+import { RegisterPage } from './RegisterPage';
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+
+        const { dispatch } = this.props;
+        history.listen((location, action) => {
+            // clear alert on location change
+            dispatch(alertActions.clear());
+        });
+    }
+
+    render() {
+        const { alert } = this.props;
+        return (
+            <div className="jumbotron">
+                <div className="container">
+                    <div className="col-sm-8 col-sm-offset-2">
+                        {alert.message &&
+                        <div className={`alert ${alert.type}`}>{alert.message}</div>
+                        }
+                        <Router history={history}>
+                            <div>
+                                <PrivateRoute exact path="/" component={HomePage} />
+                                <Route path="/login" component={LoginPage} />
+                                <Route path="/register" component={RegisterPage} />
+                            </div>
+                        </Router>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    const { alert } = state;
+    return {
+        alert
+    };
+}
+
+const connectedApp = connect(mapStateToProps)(App);
+export { connectedApp as App };
\ No newline at end of file
diff --git a/src/components/HomePage.js b/src/components/HomePage.js
new file mode 100644
index 0000000..37775b8
--- /dev/null
+++ b/src/components/HomePage.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import { userActions } from '../actions';
+
+class HomePage extends React.Component {
+    componentDidMount() {
+        this.props.dispatch(userActions.getAll());
+    }
+
+    handleDeleteUser(id) {
+        return (e) => this.props.dispatch(userActions.delete(id));
+    }
+
+    render() {
+        const { user, users } = this.props;
+        return (
+            <div className="col-md-6 col-md-offset-3">
+                <h1>Hi {user.name}!</h1>
+                <p>You're logged in with React!!</p>
+                <h3>All registered users:</h3>
+                {users.loading && <em>Loading users...</em>}
+                {users.error && <span className="text-danger">ERROR: {users.error}</span>}
+                {users.items &&
+                    <ul>
+                        {users.items.map((user, index) =>
+                            <li key={user.id}>
+                                {user.name + ' ' + user.email+ ' ' + user.phone + ' '+user.password}
+                                {
+                                    user.deleting ? <em> - Deleting...</em>
+                                    : user.deleteError ? <span className="text-danger"> - ERROR: {user.deleteError}</span>
+                                    : <span> - <button onClick={this.handleDeleteUser(user.id)}>Delete</button></span>
+                                }
+                            </li>
+                        )}
+                    </ul>
+                }
+                <p>
+                    <Link to="/login">Logout</Link>
+                </p>
+            </div>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    const { users, authentication } = state;
+    const { user } = authentication;
+    return {
+        user,
+        users
+    };
+}
+
+const connectedHomePage = connect(mapStateToProps)(HomePage);
+export { connectedHomePage as HomePage };
\ No newline at end of file
diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js
new file mode 100644
index 0000000..421cfb4
--- /dev/null
+++ b/src/components/LoginPage.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import { userActions } from '../actions';
+
+import './css/login.module.css';
+import logo from '../resources/logo_background.png';
+
+class LoginPage extends React.Component {
+    constructor(props) {
+        super(props);
+
+        // reset login status
+        this.props.dispatch(userActions.logout());
+
+        this.state = {
+            email: '',
+            password: '',
+            submitted: false
+        };
+
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(e) {
+        const { name, value } = e.target;
+        this.setState({ [name]: value });
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        this.setState({ submitted: true });
+        const { email, password } = this.state;
+        const { dispatch } = this.props;
+        if (email && password) {
+            dispatch(userActions.login(email, password));
+        }
+    }
+
+    render() {
+        const { loggingIn } = this.props;
+        const { email, password, submitted } = this.state;
+        return ( //TODO: resize the logo
+            <div className="col-md-6 col-md-offset-3" align='center'>
+
+                <p >Welcome To Qoodie</p>
+                        <img src={logo} alt="Qoodie logo" className="img-responsive" />
+                <h2>Login</h2>
+
+                <form name="form" onSubmit={this.handleSubmit}>
+                    <div className={'form-group' + (submitted && !email ? ' has-error' : '')}>
+                        {/* <label htmlFor="email">Email</label> */}
+                        <input type="text" className="form-control" name="email" value={email} onChange={this.handleChange} placeholder="Email" />
+                        {submitted && !email &&
+                            <div className="help-block">Email is required</div>
+                        }
+                    </div>
+                    <div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
+                        {/* <label htmlFor="password">Password</label> */}
+                        <input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} placeholder="Password" />
+                        {submitted && !password &&
+                        <div className="help-block">Password is required</div>
+                        }
+                    </div>
+                    <div className="form-group">
+                        <button className="btn btn-primary">Login</button>
+                        {loggingIn &&
+                            <img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" 
+                            alt='Login button' />
+                        }
+                        <Link to="/register" className="btn btn-link">Register</Link>
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    const { loggingIn } = state.authentication;
+    return {
+        loggingIn
+    };
+}
+
+const connectedLoginPage = connect(mapStateToProps)(LoginPage);
+export { connectedLoginPage as LoginPage };
\ No newline at end of file
diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js
new file mode 100644
index 0000000..e105dd4
--- /dev/null
+++ b/src/components/PrivateRoute.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+
+export const PrivateRoute = ({ component: Component, ...rest }) => (
+    <Route {...rest} render={props => (
+        localStorage.getItem('user')
+            ? <Component {...props} />
+            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
+    )} />
+)
\ No newline at end of file
diff --git a/src/components/RegisterPage.js b/src/components/RegisterPage.js
new file mode 100644
index 0000000..07de9dc
--- /dev/null
+++ b/src/components/RegisterPage.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import { userActions } from '../actions';
+
+class RegisterPage extends React.Component {
+    //TODO: add middle page for registering: student, vendor; add registration page for vendor
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            user: {
+                name: '',
+                email:'',
+                password:'',
+                phone:''
+                // role:'student', //TODO: commented while waiting for backend to change incoming json format
+            },
+            submitted: false
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(event) {
+        const { name, value } = event.target;
+        const { user } = this.state;
+        this.setState({
+            user: {
+                ...user,
+                [name]: value
+            }
+        });
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+
+        this.setState({ submitted: true });
+        const { user } = this.state;
+        const { dispatch } = this.props;
+        if (user.name && user.email && user.password && user.phone) {
+            dispatch(userActions.register(user));
+        }
+    }
+
+    render() {
+        const { registering  } = this.props;
+        const { user, submitted } = this.state;
+        return (
+            <div className="col-md-6 col-md-offset-3">
+                <h2>Register</h2>
+                <form name="form" onSubmit={this.handleSubmit}>
+                    <div className={'form-group' + (submitted && !user.name ? ' has-error' : '')}>
+                        <label htmlFor="name">Name</label>
+                        <input type="text" className="form-control" name="name" value={user.name} onChange={this.handleChange} />
+                        {submitted && !user.name &&
+                            <div className="help-block">Name is required</div>
+                        }
+                    </div>
+                    <div className={'form-group' + (submitted && !user.phone ? ' has-error' : '')}>
+                        <label htmlFor="phone">Phone Number</label>
+                        <input type="text" className="form-control" name="phone" value={user.phone} onChange={this.handleChange} />
+                        {submitted && !user.phone &&
+                            <div className="help-block">Phone number is required</div>
+                        }
+                    </div>
+                    <div className={'form-group' + (submitted && !user.email ? ' has-error' : '')}>
+                        <label htmlFor="email">Email</label>
+                        <input type="text" className="form-control" name="email" value={user.email} onChange={this.handleChange} />
+                        {submitted && !user.email &&
+                            <div className="help-block">Email is required</div>
+                        }
+                    </div>
+                    <div className={'form-group' + (submitted && !user.password ? ' has-error' : '')}>
+                        <label htmlFor="password">Password</label>
+                        <input type="password" className="form-control" name="password" value={user.password} onChange={this.handleChange} />
+                        {submitted && !user.password &&
+                        <div className="help-block">Password is required</div>
+                        }
+                    </div>
+                    <div className="form-group">
+                        <button className="btn btn-primary">Register</button>
+                        {registering &&
+                            <img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" 
+                            alt='Register logo' />
+                        }
+                        <Link to="/login" className="btn btn-link">Cancel</Link>
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    const { registering } = state.registration;
+    return {
+        registering
+    };
+}
+
+const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
+export { connectedRegisterPage as RegisterPage };
\ No newline at end of file
diff --git a/src/components/css/login.module.css b/src/components/css/login.module.css
new file mode 100644
index 0000000..30476cf
--- /dev/null
+++ b/src/components/css/login.module.css
@@ -0,0 +1,30 @@
+@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
+
+p {
+    color: #cb9d1e;
+}
+button {
+    margin: 5px;
+    color: #cb9d1e;
+}
+
+input.details {
+    border: 0;
+    outline: 0;
+    border-color : #fdfcf7;
+    background: transparent;
+    border-bottom: 2px solid #cb9d1e ;
+}
+input.submit{
+    background: #E8E8E8;
+    padding: 0.7em;
+    width: 30%;
+    border: 0;
+    color: #cb9d1e;
+    border-radius: 25px;
+}
+::placeholder {
+    color: #cb9d1e;
+    opacity: 1;
+
+}
diff --git a/src/constants/alert.constants.js b/src/constants/alert.constants.js
new file mode 100644
index 0000000..fcf2790
--- /dev/null
+++ b/src/constants/alert.constants.js
@@ -0,0 +1,5 @@
+export const alertConstants = {
+    SUCCESS: 'ALERT_SUCCESS',
+    ERROR: 'ALERT_ERROR',
+    CLEAR: 'ALERT_CLEAR'
+};
\ No newline at end of file
diff --git a/src/constants/index.js b/src/constants/index.js
new file mode 100644
index 0000000..1d55902
--- /dev/null
+++ b/src/constants/index.js
@@ -0,0 +1,2 @@
+export * from './alert.constants';
+export * from './user.constants';
\ No newline at end of file
diff --git a/src/constants/user.constants.js b/src/constants/user.constants.js
new file mode 100644
index 0000000..a41ec32
--- /dev/null
+++ b/src/constants/user.constants.js
@@ -0,0 +1,19 @@
+export const userConstants = {
+    REGISTER_REQUEST: 'USERS_REGISTER_REQUEST',
+    REGISTER_SUCCESS: 'USERS_REGISTER_SUCCESS',
+    REGISTER_FAILURE: 'USERS_REGISTER_FAILURE',
+
+    LOGIN_REQUEST: 'USERS_LOGIN_REQUEST',
+    LOGIN_SUCCESS: 'USERS_LOGIN_SUCCESS',
+    LOGIN_FAILURE: 'USERS_LOGIN_FAILURE',
+
+    LOGOUT: 'USERS_LOGOUT',
+
+    GETALL_REQUEST: 'USERS_GETALL_REQUEST',
+    GETALL_SUCCESS: 'USERS_GETALL_SUCCESS',
+    GETALL_FAILURE: 'USERS_GETALL_FAILURE',
+
+    DELETE_REQUEST: 'USERS_DELETE_REQUEST',
+    DELETE_SUCCESS: 'USERS_DELETE_SUCCESS',
+    DELETE_FAILURE: 'USERS_DELETE_FAILURE'
+};
\ No newline at end of file
diff --git a/src/helpers/authHeader.js b/src/helpers/authHeader.js
new file mode 100644
index 0000000..a8fe5f5
--- /dev/null
+++ b/src/helpers/authHeader.js
@@ -0,0 +1,10 @@
+export function authHeader() {
+    // return authorization header with jwt token
+    let user = JSON.parse(localStorage.getItem('user'));
+
+    if (user && user.token) {
+        return { 'Authorization': 'Bearer ' + user.token };
+    } else {
+        return {};
+    }
+}
\ No newline at end of file
diff --git a/src/helpers/fakeBackend.js b/src/helpers/fakeBackend.js
new file mode 100644
index 0000000..913e855
--- /dev/null
+++ b/src/helpers/fakeBackend.js
@@ -0,0 +1,129 @@
+// array in local storage for registered users
+let users = JSON.parse(localStorage.getItem('users')) || [];
+
+export function configureFakeBackend() {
+    let realFetch = window.fetch;
+    window.fetch = function (url, opts) {
+        return new Promise((resolve, reject) => {
+            // wrap in timeout to simulate server api call
+            setTimeout(() => {
+
+                // authenticate
+                if (url.endsWith('/users/authenticate') && opts.method === 'POST') {
+                    // get parameters from post request
+                    let params = JSON.parse(opts.body);
+
+                    // find if any user matches login credentials
+                    let filteredUsers = users.filter(user => {
+                        return user.username === params.username && user.password === params.password;
+                    });
+
+                    if (filteredUsers.length) {
+                        // if login details are valid return user details and fake jwt token
+                        let user = filteredUsers[0];
+                        let responseJson = {
+                            id: user.id,
+                            username: user.username,
+                            firstName: user.firstName,
+                            lastName: user.lastName,
+                            token: 'fake-jwt-token'
+                        };
+                        resolve({ ok: true, text: () => Promise.resolve(JSON.stringify(responseJson)) });
+                    } else {
+                        // else return error
+                        reject('Username or password is incorrect');
+                    }
+
+                    return;
+                }
+
+                // get users
+                if (url.endsWith('/users') && opts.method === 'GET') {
+                    // check for fake auth token in header and return users if valid, this security is implemented server side in a real application
+                    if (opts.headers && opts.headers.Authorization === 'Bearer fake-jwt-token') {
+                        resolve({ ok: true, text: () => Promise.resolve(JSON.stringify(users))});
+                    } else {
+                        // return 401 not authorised if token is null or invalid
+                        reject('Unauthorised');
+                    }
+
+                    return;
+                }
+
+                // get user by id
+                if (url.match(/\/users\/\d+$/) && opts.method === 'GET') {
+                    // check for fake auth token in header and return user if valid, this security is implemented server side in a real application
+                    if (opts.headers && opts.headers.Authorization === 'Bearer fake-jwt-token') {
+                        // find user by id in users array
+                        let urlParts = url.split('/');
+                        let id = parseInt(urlParts[urlParts.length - 1]);
+                        let matchedUsers = users.filter(user => { return user.id === id; });
+                        let user = matchedUsers.length ? matchedUsers[0] : null;
+
+                        // respond 200 OK with user
+                        resolve({ ok: true, text: () => JSON.stringify(user)});
+                    } else {
+                        // return 401 not authorised if token is null or invalid
+                        reject('Unauthorised');
+                    }
+
+                    return;
+                }
+
+                // register user
+                if (url.endsWith('/users/register') && opts.method === 'POST') {
+                    // get new user object from post body
+                    let newUser = JSON.parse(opts.body);
+
+                    // validation
+                    let duplicateUser = users.filter(user => { return user.username === newUser.username; }).length;
+                    if (duplicateUser) {
+                        reject('Username "' + newUser.username + '" is already taken');
+                        return;
+                    }
+
+                    // save new user
+                    newUser.id = users.length ? Math.max(...users.map(user => user.id)) + 1 : 1;
+                    users.push(newUser);
+                    localStorage.setItem('users', JSON.stringify(users));
+
+                    // respond 200 OK
+                    resolve({ ok: true, text: () => Promise.resolve() });
+
+                    return;
+                }
+
+                // delete user
+                if (url.match(/\/users\/\d+$/) && opts.method === 'DELETE') {
+                    // check for fake auth token in header and return user if valid, this security is implemented server side in a real application
+                    if (opts.headers && opts.headers.Authorization === 'Bearer fake-jwt-token') {
+                        // find user by id in users array
+                        let urlParts = url.split('/');
+                        let id = parseInt(urlParts[urlParts.length - 1]);
+                        for (let i = 0; i < users.length; i++) {
+                            let user = users[i];
+                            if (user.id === id) {
+                                // delete user
+                                users.splice(i, 1);
+                                localStorage.setItem('users', JSON.stringify(users));
+                                break;
+                            }
+                        }
+
+                        // respond 200 OK
+                        resolve({ ok: true, text: () => Promise.resolve() });
+                    } else {
+                        // return 401 not authorised if token is null or invalid
+                        reject('Unauthorised');
+                    }
+
+                    return;
+                }
+
+                // pass through any requests not handled above
+                realFetch(url, opts).then(response => resolve(response));
+
+            }, 500);
+        });
+    }
+}
\ No newline at end of file
diff --git a/src/helpers/history.js b/src/helpers/history.js
new file mode 100644
index 0000000..629039e
--- /dev/null
+++ b/src/helpers/history.js
@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export const history = createBrowserHistory();
\ No newline at end of file
diff --git a/src/helpers/index.js b/src/helpers/index.js
new file mode 100644
index 0000000..7171891
--- /dev/null
+++ b/src/helpers/index.js
@@ -0,0 +1,6 @@
+export * from './fakeBackend';
+export * from './history';
+export * from './store';
+export * from './userLogin'
+export * from './authHeader';
+export * from './serviceWorker';
\ No newline at end of file
diff --git a/src/registerServiceWorker.js b/src/helpers/serviceWorker.js
similarity index 65%
rename from src/registerServiceWorker.js
rename to src/helpers/serviceWorker.js
index a3e6c0c..012c322 100644
--- a/src/registerServiceWorker.js
+++ b/src/helpers/serviceWorker.js
@@ -1,12 +1,14 @@
-// In production, we register a service worker to serve assets from local cache.
+// This optional code is used to register a service worker.
+// register() is not called by default.
 
 // This lets the app load faster on subsequent visits in production, and gives
 // it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
 
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read http://bit.ly/CRA-PWA.
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
@@ -18,14 +20,14 @@ const isLocalhost = Boolean(
     )
 );
 
-export default function register() {
+export function register(config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
       return;
     }
 
@@ -33,26 +35,26 @@ export default function register() {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
-        // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl);
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+              'worker. To learn more, visit http://bit.ly/CRA-PWA'
           );
         });
       } else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl);
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
       }
     });
   }
 }
 
-function registerValidSW(swUrl) {
+function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
@@ -61,16 +63,28 @@ function registerValidSW(swUrl) {
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
             if (navigator.serviceWorker.controller) {
-              // At this point, the old content will have been purged and
-              // the fresh content will have been added to the cache.
-              // It's the perfect time to display a "New content is
-              // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.');
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
               console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
             }
           }
         };
@@ -81,7 +95,7 @@ function registerValidSW(swUrl) {
     });
 }
 
-function checkValidServiceWorker(swUrl) {
+function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
     .then(response => {
@@ -98,7 +112,7 @@ function checkValidServiceWorker(swUrl) {
         });
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl);
+        registerValidSW(swUrl, config);
       }
     })
     .catch(() => {
diff --git a/src/helpers/store.js b/src/helpers/store.js
new file mode 100644
index 0000000..971b1e8
--- /dev/null
+++ b/src/helpers/store.js
@@ -0,0 +1,17 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import { createLogger } from 'redux-logger';
+import rootReducer from '../reducers';
+
+const loggerMiddleware = createLogger();
+
+export const store = createStore(
+    rootReducer,
+    compose(
+        applyMiddleware(
+            thunkMiddleware,
+            loggerMiddleware
+        ),
+        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+    )
+);
\ No newline at end of file
diff --git a/src/helpers/userLogin.js b/src/helpers/userLogin.js
new file mode 100644
index 0000000..28e27e2
--- /dev/null
+++ b/src/helpers/userLogin.js
@@ -0,0 +1,109 @@
+// process.env.NODE_CONFIG_DIR = './'
+// import config from 'config';
+import { authHeader } from '.';
+import { apiUrl } from '../index';
+
+export const userService = {
+    login,
+    logout,
+    register,
+    getAll,
+    getById,
+    update,
+    delete: _delete
+};
+
+function login(email, password) {
+    const requestOptions = {
+        "Access-Control-Allow-Origin": "*",
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password })
+    };
+
+    return fetch(`${apiUrl}/signin`, requestOptions)
+        .then(handleResponse)
+        .then(user => {
+            // login successful if there's a jwt token in the response
+            if (user.token) {
+                // store user details and jwt token in local storage to keep user logged in between page refreshes
+                localStorage.setItem('user', JSON.stringify(user));
+            }
+
+            return user;
+        });
+}
+
+function logout() {
+    // remove user from local storage to log user out
+    localStorage.removeItem('user');
+}
+
+function getAll() {
+    const requestOptions = {
+        method: 'GET',
+        headers: authHeader()
+    };
+
+    return fetch(`${apiUrl}/users`, requestOptions).then(handleResponse);
+}
+
+function getById(id) {
+    const requestOptions = {
+        method: 'GET',
+        headers: authHeader()
+    };
+
+    return fetch(`${apiUrl}/users/${id}`, requestOptions).then(handleResponse);
+}
+
+function register(user) {
+    const requestOptions = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(user)
+    };
+
+    return fetch(`${apiUrl}/signup`, requestOptions).then(handleResponse);
+}
+
+function update(user) {
+    const requestOptions = {
+        method: 'PUT',
+        headers: { ...authHeader(), 'Content-Type': 'application/json' },
+        body: JSON.stringify(user)
+    };
+
+    return fetch(`${apiUrl}/users/${user.id}`, requestOptions).then(handleResponse);
+}
+
+// prefixed function name with underscore because delete is a reserved word in javascript
+function _delete(id) {
+    const requestOptions = {
+        method: 'DELETE',
+        headers: authHeader()
+    };
+
+    return fetch(`${apiUrl}/users/${id}`, requestOptions).then(handleResponse);
+}
+
+function handleResponse(response) {
+    return response.text().then(text => {
+        const text_formated ='{ "message": "'+ text + '"}';
+        const data = text && JSON.parse(text_formated);
+        console.log( '{ "message": "'+ text +
+            '"}');
+        if (!response.ok) {
+            if (response.status === 401) {
+                // auto logout if 401 response returned from api
+                logout();
+                window.location.reload(true);
+            }
+
+            const error = (data && data.message) || response.statusText;
+            return Promise.reject(error);
+        }
+
+        return data;
+    });
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..255f4fe
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Index</title>
+    <style>
+        a { cursor: pointer; }
+        .help-block { font-size: 12px; }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <div class="text-center">
+        Text-center
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 917d651..87ac9bb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,23 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { store } from './helpers';
+import { App } from './components/App';
+import * as serviceWorker from './helpers';
+// setup fake backend
+import { configureFakeBackend } from './helpers';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+export const apiUrl = 'http://localhost:3000';
+
+configureFakeBackend();
+
+render(
+    <div>
+        <Provider store={store}>
+            <App />
+        </Provider>
+    </div>,
+    document.getElementById('root')
+)
+
+serviceWorker.register();   
diff --git a/src/reducers/alert.reducer.js b/src/reducers/alert.reducer.js
new file mode 100644
index 0000000..09bdff3
--- /dev/null
+++ b/src/reducers/alert.reducer.js
@@ -0,0 +1,20 @@
+import { alertConstants } from '../constants';
+
+export function alert(state = {}, action) {
+    switch (action.type) {
+        case alertConstants.SUCCESS:
+            return {
+                type: 'alert-success',
+                message: action.message
+            };
+        case alertConstants.ERROR:
+            return {
+                type: 'alert-danger',
+                message: action.message
+            };
+        case alertConstants.CLEAR:
+            return {};
+        default:
+            return state
+    }
+}
\ No newline at end of file
diff --git a/src/reducers/authentication.reducer.js b/src/reducers/authentication.reducer.js
new file mode 100644
index 0000000..debb0a1
--- /dev/null
+++ b/src/reducers/authentication.reducer.js
@@ -0,0 +1,25 @@
+import { userConstants } from '../constants';
+
+let user = JSON.parse(localStorage.getItem('user'));
+const initialState = user ? { loggedIn: true, user } : {};
+
+export function authentication(state = initialState, action) {
+    switch (action.type) {
+        case userConstants.LOGIN_REQUEST:
+            return {
+                loggingIn: true,
+                user: action.user
+            };
+        case userConstants.LOGIN_SUCCESS:
+            return {
+                loggedIn: true,
+                user: action.user
+            };
+        case userConstants.LOGIN_FAILURE:
+            return {};
+        case userConstants.LOGOUT:
+            return {};
+        default:
+            return state
+    }
+}
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
new file mode 100644
index 0000000..3e6430d
--- /dev/null
+++ b/src/reducers/index.js
@@ -0,0 +1,15 @@
+import { combineReducers } from 'redux';
+
+import { authentication } from './authentication.reducer';
+import { registration } from './registration.reducer';
+import { users } from './users.reducer';
+import { alert } from './alert.reducer';
+
+const rootReducer = combineReducers({
+  authentication,
+  registration,
+  users,
+  alert
+});
+
+export default rootReducer;
\ No newline at end of file
diff --git a/src/reducers/registration.reducer.js b/src/reducers/registration.reducer.js
new file mode 100644
index 0000000..c84a522
--- /dev/null
+++ b/src/reducers/registration.reducer.js
@@ -0,0 +1,14 @@
+import { userConstants } from '../constants';
+
+export function registration(state = {}, action) {
+    switch (action.type) {
+        case userConstants.REGISTER_REQUEST:
+            return { registering: true };
+        case userConstants.REGISTER_SUCCESS:
+            return {};
+        case userConstants.REGISTER_FAILURE:
+            return {};
+        default:
+            return state
+    }
+}
\ No newline at end of file
diff --git a/src/reducers/users.reducer.js b/src/reducers/users.reducer.js
new file mode 100644
index 0000000..5720626
--- /dev/null
+++ b/src/reducers/users.reducer.js
@@ -0,0 +1,50 @@
+import { userConstants } from '../constants';
+
+export function users(state = {}, action) {
+    switch (action.type) {
+        case userConstants.GETALL_REQUEST:
+            return {
+                loading: true
+            };
+        case userConstants.GETALL_SUCCESS:
+            return {
+                items: action.users
+            };
+        case userConstants.GETALL_FAILURE:
+            return {
+                error: action.error
+            };
+        case userConstants.DELETE_REQUEST:
+            // add 'deleting:true' property to user being deleted
+            return {
+                ...state,
+                items: state.items.map(user =>
+                    user.id === action.id
+                        ? { ...user, deleting: true }
+                        : user
+                )
+            };
+        case userConstants.DELETE_SUCCESS:
+            // remove deleted user from state
+            return {
+                items: state.items.filter(user => user.id !== action.id)
+            };
+        case userConstants.DELETE_FAILURE:
+            // remove 'deleting:true' property and add 'deleteError:[error]' property to user
+            return {
+                ...state,
+                items: state.items.map(user => {
+                    if (user.id === action.id) {
+                        // make copy of user without 'deleting:true' property
+                        const { deleting, ...userCopy } = user;
+                        // return copy of user with 'deleteError:[error]' property
+                        return { ...userCopy, deleteError: action.error };
+                    }
+
+                    return user;
+                })
+            };
+        default:
+            return state
+    }
+}
\ No newline at end of file
diff --git a/src/resources/logo_background.png b/src/resources/logo_background.png
new file mode 100644
index 0000000..4fabfdd
Binary files /dev/null and b/src/resources/logo_background.png differ
diff --git a/src/service/README.md b/src/service/README.md
new file mode 100644
index 0000000..0dc18df
--- /dev/null
+++ b/src/service/README.md
@@ -0,0 +1,6 @@
+##React + Redux Services Folder
+#####Path: /src/_services
+The _services layer handles all http communication with backend apis for the application, each service encapsulates the api calls for a content type (e.g. users) and exposes methods for performing various operations (e.g. CRUD operations). Services can also have methods that don't wrap http calls, for example the userService.logout() method just removes an item from local storage.
+
+I like wrapping http calls and implementation details in a services layer, it provides a clean separation of concerns and simplifies the redux actions (and other modules) that use the services.
+(source: http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example#services-folder) 
\ No newline at end of file
diff --git a/src/service/user.service.js b/src/service/user.service.js
new file mode 100644
index 0000000..150feb7
--- /dev/null
+++ b/src/service/user.service.js
@@ -0,0 +1,110 @@
+// process.env.NODE_CONFIG_DIR = './'
+// import config from 'config';
+import { authHeader } from '../helpers';
+
+export const userService = {
+    login,
+    logout,
+    register,
+    getAll,
+    getById,
+    update,
+    delete: _delete
+};
+
+const apiUrl = 'http://localhost:3000';
+
+function login(email, password) {
+    const requestOptions = {
+        "Access-Control-Allow-Origin": "*",
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password })
+    };
+
+    return fetch(`${apiUrl}/signin`, requestOptions)
+        .then(handleResponse)
+        .then(user => {
+            // login successful if there's a jwt token in the response
+            if (user.token) {
+                // store user details and jwt token in local storage to keep user logged in between page refreshes
+                localStorage.setItem('user', JSON.stringify(user));
+            }
+
+            return user;
+        });
+}
+
+function logout() {
+    // remove user from local storage to log user out
+    localStorage.removeItem('user');
+}
+
+function getAll() {
+    const requestOptions = {
+        method: 'GET',
+        headers: authHeader()
+    };
+
+    return fetch(`${apiUrl}/users`, requestOptions).then(handleResponse);
+}
+
+function getById(id) {
+    const requestOptions = {
+        method: 'GET',
+        headers: authHeader()
+    };
+
+    return fetch(`${apiUrl}/users/${id}`, requestOptions).then(handleResponse);
+}
+
+function register(user) {
+    const requestOptions = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(user)
+    };
+
+    return fetch(`${apiUrl}/signup`, requestOptions).then(handleResponse);
+}
+
+function update(user) {
+    const requestOptions = {
+        method: 'PUT',
+        headers: { ...authHeader(), 'Content-Type': 'application/json' },
+        body: JSON.stringify(user)
+    };
+
+    return fetch(`${apiUrl}/users/${user.id}`, requestOptions).then(handleResponse);
+}
+
+// prefixed function name with underscore because delete is a reserved word in javascript
+function _delete(id) {
+    const requestOptions = {
+        method: 'DELETE',
+        headers: authHeader()
+    };
+
+    return fetch(`${apiUrl}/users/${id}`, requestOptions).then(handleResponse);
+}
+
+function handleResponse(response) {
+    return response.text().then(text => {
+        const text_formated ='{ "message": "'+ text + '"}';
+        const data = text && JSON.parse(text_formated);
+        console.log( '{ "message": "'+ text +
+            '"}');
+        if (!response.ok) {
+            if (response.status === 401) {
+                // auto logout if 401 response returned from api
+                logout();
+                window.location.reload(true);
+            }
+
+            const error = (data && data.message) || response.statusText;
+            return Promise.reject(error);
+        }
+
+        return data;
+    });
+}
\ No newline at end of file