Merge pull request #48 from sensebox/backend-connection

Backend connection
2020-12-15 15:22:23 +01:00 · 2020-12-15 15:22:23 +01:00 · 307607191e
commit 307607191e
parent 3d2a18c1db 0239ae28aa
59 changed files with 1793 additions and 683 deletions
--- a/.env
+++ b/.env
@ -3,6 +3,7 @@ REACT_APP_BOARD=sensebox-mcu
 REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de

 REACT_APP_MYBADGES=https://mybadges.org
+REACT_APP_MYBADGES_API=https://mybadges.org/api/v1

 # in days
 REACT_APP_SHARE_LINK_EXPIRES=30
--- a/package.json
+++ b/package.json
@ -32,7 +32,7 @@
  },
  "scripts": {
    "start": "react-scripts start",
-    "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && npm start",
+    "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && set \"REACT_APP_MYBADGES_API=http://localhost:3001/api/v1\"&& npm start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
--- a/src/App.js
+++ b/src/App.js
@ -11,10 +11,7 @@ import './App.css';

 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';

-import Navbar from './components/Navbar';
-import Footer from './components/Footer';
-import Routes from './components/Route/Routes';
-import Cookies from './components/Cookies';
+import Content from './components/Content';

 const theme = createMuiTheme({
  palette: {
@ -43,12 +40,7 @@ class App extends Component {
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <Router history={customHistory}>
-            <div className="wrapper">
-              <Navbar />
-              <Routes />
-              <Cookies />
-              <Footer />
-            </div>
+            <Content />
          </Router>
        </Provider>
      </ThemeProvider>
--- a/src/actions/authActions.js
+++ b/src/actions/authActions.js
@ -1,8 +1,8 @@
-import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types';
+import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, GET_STATUS, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types';

 import axios from 'axios';
-import { returnErrors, returnSuccess } from './messageActions'
-
+import { returnErrors, returnSuccess } from './messageActions';
+import { setLanguage } from './generalActions';

 // Check token & load user
 export const loadUser = () => (dispatch) => {
@ -12,6 +12,11 @@ export const loadUser = () => (dispatch) => {
  });
  const config = {
    success: res => {
+      dispatch({
+        type: GET_STATUS,
+        payload: res.data.user.status
+      });
+      dispatch(setLanguage(res.data.user.language));
      dispatch({
        type: USER_LOADED,
        payload: res.data.user
@ -21,6 +26,14 @@ export const loadUser = () => (dispatch) => {
      if(err.response){
        dispatch(returnErrors(err.response.data.message, err.response.status));
      }
+      var status = [];
+      if (window.localStorage.getItem('status')) {
+        status = JSON.parse(window.localStorage.getItem('status'));
+      }
+      dispatch({
+        type: GET_STATUS,
+        payload: status
+      });
      dispatch({
        type: AUTH_ERROR
      });
@ -41,6 +54,9 @@ const timeToLogout = 14.9*60*1000; // nearly 15 minutes corresponding to the API

 // Login user
 export const login = ({ email, password }) => (dispatch) => {
+  dispatch({
+    type: USER_LOADING
+  });
  // Headers
  const config = {
    headers: {
@ -57,10 +73,15 @@ export const login = ({ email, password }) => (dispatch) => {
      timeToLogout
    );
    logoutTimerId = logoutTimer();
+    dispatch(setLanguage(res.data.user.language));
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });
+    dispatch({
+      type: GET_STATUS,
+      payload: res.data.user.status
+    });
    dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS'));
  })
  .catch(err => {
@ -68,57 +89,73 @@ export const login = ({ email, password }) => (dispatch) => {
    dispatch({
      type: LOGIN_FAIL
    });
+    var status = [];
+    if (window.localStorage.getItem('status')) {
+      status = JSON.parse(window.localStorage.getItem('status'));
+    }
+    dispatch({
+      type: GET_STATUS,
+      payload: status
+    });
  });
 };


 // Connect to MyBadges-Account
 export const connectMyBadges = ({ username, password }) => (dispatch, getState) => {
-  // Headers
  const config = {
-    headers: {
-      'Content-Type': 'application/json'
+    success: res => {
+      var user = getState().auth.user;
+      user.badge = res.data.account;
+      user.badges = res.data.badges;
+      dispatch({
+        type: MYBADGES_CONNECT,
+        payload: user
+      });
+      dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_CONNECT_SUCCESS'));
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_CONNECT_FAIL'));
    }
  };
  // Request Body
  const body = JSON.stringify({ username, password });
  axios.post(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, body, config)
  .then(res => {
-    var user = getState().auth.user;
-    user.badge = res.data.account;
-    user.badges = res.data.badges;
-    dispatch({
-      type: MYBADGES_CONNECT,
-      payload: user
-    });
-    dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_CONNECT_SUCCESS'));
+    res.config.success(res);
  })
  .catch(err => {
-    dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_CONNECT_FAIL'));
+    if(err.response && err.response.status !== 401){
+      err.config.error(err);
+    }
  });
 };

 // Disconnect MyBadges-Account
 export const disconnectMyBadges = () => (dispatch, getState) => {
-  // Headers
  const config = {
-    headers: {
-      'Content-Type': 'application/json'
+    success: res => {
+      var user = getState().auth.user;
+      user.badge = null;
+      user.badges = null;
+      dispatch({
+        type: MYBADGES_DISCONNECT,
+        payload: user
+      });
+      dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_DISCONNECT_SUCCESS'));
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_DISCONNECT_FAIL'));
    }
  };
-  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, config)
+  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, {}, config)
  .then(res => {
-    var user = getState().auth.user;
-    user.badge = null;
-    user.badges = null;
-    dispatch({
-      type: MYBADGES_DISCONNECT,
-      payload: user
-    });
-    dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_DISCONNECT_SUCCESS'));
+    res.config.success(res);
  })
  .catch(err => {
-    dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_DISCONNECT_FAIL'));
+    if(err.response && err.response.status !== 401){
+      err.config.error(err);
+    }
  });
 };

@ -130,6 +167,22 @@ export const logout = () => (dispatch) => {
      dispatch({
        type: LOGOUT_SUCCESS
      });
+      var status = [];
+      if (window.localStorage.getItem('status')) {
+        status = JSON.parse(window.localStorage.getItem('status'));
+      }
+      dispatch({
+        type: GET_STATUS,
+        payload: status
+      });
+      var locale = 'en_US';
+      if (window.localStorage.getItem('locale')) {
+        locale = window.localStorage.getItem('locale');
+      }
+      else if (navigator.language === 'de-DE'){
+        locale = 'de_DE';
+      }
+      dispatch(setLanguage(locale));
      dispatch(returnSuccess(res.data.message, res.status, 'LOGOUT_SUCCESS'));
      clearTimeout(logoutTimerId);
    },
@ -138,6 +191,14 @@ export const logout = () => (dispatch) => {
      dispatch({
        type: LOGOUT_FAIL
      });
+      var status = [];
+      if (window.localStorage.getItem('status')) {
+        status = JSON.parse(window.localStorage.getItem('status'));
+      }
+      dispatch({
+        type: GET_STATUS,
+        payload: status
+      });
      clearTimeout(logoutTimerId);
    }
  };
@ -146,7 +207,7 @@ export const logout = () => (dispatch) => {
    res.config.success(res);
  })
  .catch(err => {
-    if(err.response.status !== 401){
+    if(err.response && err.response.status !== 401){
      err.config.error(err);
    }
  });
--- a/src/actions/generalActions.js
+++ b/src/actions/generalActions.js
@ -1,4 +1,4 @@
-import { VISIT } from './types';
+import { VISIT, LANGUAGE, RENDERER, STATISTICS } from './types';


 export const visitPage = () => (dispatch) => {
@ -6,3 +6,27 @@ export const visitPage = () => (dispatch) => {
    type: VISIT
  });
 };
+
+export const setLanguage = (language) => (dispatch, getState) => {
+  if(!getState().auth.progress && !getState().auth.isAuthenticated){
+    window.localStorage.setItem('locale', language);
+  }
+  dispatch({
+    type: LANGUAGE,
+    payload: language
+  });
+};
+
+export const setRenderer = (renderer) => (dispatch) => {
+  dispatch({
+    type: RENDERER,
+    payload: renderer
+  });
+};
+
+export const setStatistics = (showStatistics) => (dispatch) => {
+  dispatch({
+    type: STATISTICS,
+    payload: showStatistics
+  });
+};
--- a/src/actions/projectActions.js
+++ b/src/actions/projectActions.js
@ -1,7 +1,6 @@
 import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from './types';

 import axios from 'axios';
-import { workspaceName } from './workspaceActions';
 import { returnErrors, returnSuccess } from './messageActions';

 export const setType = (type) => (dispatch) => {
@ -19,13 +18,13 @@ export const setDescription = (description) => (dispatch) => {
 };

 export const getProject = (type, id) => (dispatch) => {
-  dispatch({type: PROJECT_PROGRESS});
+  dispatch({ type: PROJECT_PROGRESS });
  dispatch(setType(type));
-  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`)
-    .then(res => {
+  const config = {
+    success: res => {
      var data = type === 'share' ? 'content' : type;
      var project = res.data[data];
-      if(project){
+      if (project) {
        dispatch({
          type: GET_PROJECT,
          payload: project
@ -34,40 +33,56 @@ export const getProject = (type, id) => (dispatch) => {
          type: PROJECT_DESCRIPTION,
          payload: project.description
        });
-        dispatch({type: PROJECT_PROGRESS});
+        dispatch({ type: PROJECT_PROGRESS });
        dispatch(returnSuccess(res.data.message, res.status, 'GET_PROJECT_SUCCESS'));
      }
-      else{
-        dispatch({type: PROJECT_PROGRESS});
+      else {
+        dispatch({ type: PROJECT_PROGRESS });
        dispatch(returnErrors(res.data.message, res.status, 'PROJECT_EMPTY'));
      }
-    })
-    .catch(err => {
+    },
+    error: err => {
      if(err.response){
        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECT_FAIL'));
      }
      dispatch({type: PROJECT_PROGRESS});
+    }
+  };
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, config)
+    .then(res => {
+      res.config.success(res);
+    })
+    .catch(err => {
+      err.config.error(err);
    });
 };

 export const getProjects = (type) => (dispatch) => {
  dispatch({type: PROJECT_PROGRESS});
-  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}`)
-    .then(res => {
+  const config = {
+    success: res => {
      var data = type === 'project' ? 'projects' : 'galleries';
      var projects = res.data[data];
      dispatch({
        type: GET_PROJECTS,
        payload: projects
      });
-      dispatch({type: PROJECT_PROGRESS});
+      dispatch({ type: PROJECT_PROGRESS });
      dispatch(returnSuccess(res.data.message, res.status));
-    })
-    .catch(err => {
+    },
+    error: err => {
      if(err.response){
        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECTS_FAIL'));
      }
      dispatch({type: PROJECT_PROGRESS});
+    }
+  };
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}`, config)
+    .then(res => {
+      res.config.success(res);
+    })
+    .catch(err => {
+      err.config.error(err);
    });
 };

@ -78,11 +93,11 @@ export const updateProject = (type, id) => (dispatch, getState) => {
    title: workspace.name
  };
  var project = getState().project;
-  if(type==='gallery'){
+  if (type === 'gallery') {
    body.description = project.description;
  }
-  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body)
-    .then(res => {
+  const config = {
+    success: res => {
      var project = res.data[type];
      var projects = getState().project.projects;
      var index = projects.findIndex(res => res._id === project._id);
@ -91,13 +106,13 @@ export const updateProject = (type, id) => (dispatch, getState) => {
        type: GET_PROJECTS,
        payload: projects
      });
-      if(type === 'project'){
+      if (type === 'project') {
        dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS'));
      } else {
        dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS'));
      }
-    })
-    .catch(err => {
+    },
+    error: err => {
      if(err.response){
        if(type === 'project'){
          dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_UPDATE_FAIL'));
@ -105,13 +120,21 @@ export const updateProject = (type, id) => (dispatch, getState) => {
          dispatch(returnErrors(err.response.data.message, err.response.status, 'GALLERY_UPDATE_FAIL'));
        }
      }
+    }
+  };
+  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body, config)
+    .then(res => {
+      res.config.success(res);
+    })
+    .catch(err => {
+      err.config.error(err);
    });
 };

 export const deleteProject = (type, id) => (dispatch, getState) => {
  var project = getState().project;
-  axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`)
-    .then(res => {
+  const config = {
+    success: res => {
      var projects = getState().project.projects;
      var index = projects.findIndex(res => res._id === id);
      projects.splice(index, 1)
@ -119,15 +142,23 @@ export const deleteProject = (type, id) => (dispatch, getState) => {
        type: GET_PROJECTS,
        payload: projects
      });
-      if(type === 'project'){
+      if (type === 'project') {
        dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_DELETE_SUCCESS'));
      } else {
        dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_DELETE_SUCCESS'));
      }
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL'));
+    }
+  };
+  axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, config)
+    .then(res => {
+      res.config.success(res);
    })
    .catch(err => {
-      if(err.response){
-        dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL'));
+      if(err.response && err.response.status !== 401){
+        err.config.error(err);
      }
    });
 };
@ -137,7 +168,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => {
  var body = {
    title: title
  };
-  if(type === 'project'){
+  if (type === 'project') {
    body.projectId = id;
  } else {
    body.xml = getState().workspace.code.xml;
@ -145,7 +176,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => {
  axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body)
    .then(res => {
      var shareContent = res.data.content;
-      if(body.projectId){
+      if (body.projectId) {
        var projects = getState().project.projects;
        var index = projects.findIndex(res => res._id === id);
        projects[index].shared = shareContent.expiresAt;
@ -157,7 +188,7 @@ export const shareProject = (title, type, id) => (dispatch, getState) => {
      dispatch(returnSuccess(res.data.message, shareContent._id, 'SHARE_SUCCESS'));
    })
    .catch(err => {
-      if(err.response){
+      if (err.response) {
        dispatch(returnErrors(err.response.data.message, err.response.status, 'SHARE_FAIL'));
      }
    });
--- a/src/actions/tutorialActions.js
+++ b/src/actions/tutorialActions.js
@ -1,10 +1,14 @@
-import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types';
+import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_STEP } from './types';

 import axios from 'axios';
 import { returnErrors, returnSuccess } from './messageActions';

-export const getTutorial = (id) => (dispatch, getState) => {
+export const tutorialProgress = () => (dispatch) => {
  dispatch({type: TUTORIAL_PROGRESS});
+};
+
+
+export const getTutorial = (id) => (dispatch, getState) => {
  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
    .then(res => {
      var tutorial = res.data.tutorial;
@ -13,24 +17,24 @@ export const getTutorial = (id) => (dispatch, getState) => {
          type: TUTORIAL_SUCCESS,
          payload: status
        });
-        dispatch({type: TUTORIAL_PROGRESS});
+        dispatch(updateStatus(status));
        dispatch({
          type: GET_TUTORIAL,
          payload: tutorial
        });
+        dispatch({type: TUTORIAL_PROGRESS});
        dispatch(returnSuccess(res.data.message, res.status));
      });
    })
    .catch(err => {
-      if(err.response){
+      if (err.response) {
        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL'));
      }
-      dispatch({type: TUTORIAL_PROGRESS});
+      dispatch({ type: TUTORIAL_PROGRESS });
    });
 };

 export const getTutorials = () => (dispatch, getState) => {
-  dispatch({type: TUTORIAL_PROGRESS});
  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
    .then(res => {
      var tutorials = res.data.tutorials;
@ -40,25 +44,27 @@ export const getTutorials = () => (dispatch, getState) => {
          type: TUTORIAL_SUCCESS,
          payload: status
        });
+        console.log('zwei');
+        dispatch(updateStatus(status));
        dispatch({
          type: GET_TUTORIALS,
          payload: tutorials
        });
-        dispatch({type: TUTORIAL_PROGRESS});
+        dispatch({ type: TUTORIAL_PROGRESS });
        dispatch(returnSuccess(res.data.message, res.status));
      });
    })
    .catch(err => {
-      if(err.response){
+      if (err.response) {
        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL'));
      }
-      dispatch({type: TUTORIAL_PROGRESS});
+      dispatch({ type: TUTORIAL_PROGRESS });
    });
 };

 export const assigneBadge = (id) => (dispatch, getState) => {
-  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge/${id}`)
-    .then(res => {
+  const config = {
+    success: res => {
      var badge = res.data.badge;
      var user = getState().auth.user;
      user.badges.push(badge._id);
@ -67,19 +73,45 @@ export const assigneBadge = (id) => (dispatch, getState) => {
        payload: user
      });
      dispatch(returnSuccess(badge, res.status, 'ASSIGNE_BADGE_SUCCESS'));
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL'));
+    }
+  };
+  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge/${id}`, {}, config)
+    .then(res => {
+      res.config.success(res);
    })
    .catch(err => {
-      if(err.response){
-        dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL'));
+      if(err.response && err.response.status !== 401){
+        err.config.error(err);
      }
    });
 };

+export const updateStatus = (status) => (dispatch, getState) => {
+  if(getState().auth.isAuthenticated){
+    // update user account in database - sync with redux store
+    axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {status: status})
+      .then(res => {
+        // dispatch(returnSuccess(badge, res.status, 'UPDATE_STATUS_SUCCESS'));
+      })
+      .catch(err => {
+        if(err.response){
+          // dispatch(returnErrors(err.response.data.message, err.response.status, 'UPDATE_STATUS_FAIL'));
+        }
+      });
+  } else {
+    // update locale storage - sync with redux store
+    window.localStorage.setItem('status', JSON.stringify(status));
+  }
+};
+
 export const deleteTutorial = (id) => (dispatch, getState) => {
  var tutorial = getState().tutorial;
  var id = getState().builder.id;
-  axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
-    .then(res => {
+  const config = {
+    success: res => {
      var tutorials = tutorial.tutorials;
      var index = tutorials.findIndex(res => res._id === id);
      tutorials.splice(index, 1)
@ -88,10 +120,18 @@ export const deleteTutorial = (id) => (dispatch, getState) => {
        payload: tutorials
      });
      dispatch(returnSuccess(res.data.message, res.status, 'TUTORIAL_DELETE_SUCCESS'));
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'TUTORIAL_DELETE_FAIL'));
+    }
+  };
+  axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config)
+    .then(res => {
+      res.config.success(res);
    })
    .catch(err => {
-      if(err.response){
-        dispatch(returnErrors(err.response.data.message, err.response.status, 'TUTORIAL_DELETE_FAIL'));
+      if(err.response && err.response.status !== 401){
+        err.config.error(err);
      }
    });
 };
@ -127,8 +167,10 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => {
    type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
    payload: tutorialsStatus
  });
+  console.log('drei');
+  dispatch(updateStatus(tutorialsStatus));
  dispatch(tutorialChange());
-  dispatch(returnSuccess('','','TUTORIAL_CHECK_SUCCESS'));
+  dispatch(returnSuccess('', '', 'TUTORIAL_CHECK_SUCCESS'));
 };

 export const storeTutorialXml = (code) => (dispatch, getState) => {
@ -149,6 +191,7 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
        type: TUTORIAL_XML,
        payload: tutorialsStatus
      });
+      dispatch(updateStatus(tutorialsStatus));
    }
  }
 };
@ -161,9 +204,9 @@ export const tutorialStep = (step) => (dispatch) => {
 };


-const existingTutorials = (tutorials, status) => new Promise(function(resolve, reject){
+const existingTutorials = (tutorials, status) => new Promise(function (resolve, reject) {
  var newstatus;
-  new Promise(function(resolve, reject){
+  new Promise(function (resolve, reject) {
    var existingTutorialIds = tutorials.map((tutorial, i) => {
      existingTutorial(tutorial, status).then(status => {
        newstatus = status;
--- a/src/actions/tutorialBuilderActions.js
+++ b/src/actions/tutorialBuilderActions.js
@ -191,6 +191,9 @@ export const setSubmitError = () => (dispatch, getState) => {
  if (builder.title === '') {
    dispatch(setError(undefined, 'title'));
  }
+  if (builder.title === null) {
+    dispatch(setError(undefined, 'badge'));
+  }
  var type = builder.steps.map((step, i) => {
    // media and xml are directly checked for errors in their components and
    // therefore do not have to be checked again
@ -230,7 +233,7 @@ export const setSubmitError = () => (dispatch, getState) => {
 export const checkError = () => (dispatch, getState) => {
  dispatch(setSubmitError());
  var error = getState().builder.error;
-  if (error.id || error.title || error.type) {
+  if (error.id || error.title || error.badge ||error.type) {
    return true;
  }
  for (var i = 0; i < error.steps.length; i++) {
@ -251,10 +254,9 @@ export const progress = (inProgress) => (dispatch) => {
 export const resetTutorial = () => (dispatch, getState) => {
  dispatch(jsonString(''));
  dispatch(tutorialTitle(''));
-  dispatch(tutorialBadge(''));
+  dispatch(tutorialBadge(undefined));
  var steps = [
    {
-      id: 1,
      type: 'instruction',
      headline: '',
      text: '',
@ -282,7 +284,7 @@ export const readJSON = (json) => (dispatch, getState) => {
  // accept only valid attributes
  var steps = json.steps.map((step, i) => {
    var object = {
-      // id: step.id,
+      _id: step._id,
      type: step.type,
      headline: step.headline,
      text: step.text
--- a/src/actions/types.js
+++ b/src/actions/types.js
@ -23,6 +23,7 @@ export const NAME = 'NAME';
 export const TUTORIAL_PROGRESS = 'TUTORIAL_PROGRESS';
 export const GET_TUTORIAL = 'GET_TUTORIAL';
 export const GET_TUTORIALS = 'GET_TUTORIALS';
+export const GET_STATUS = 'GET_STATUS';
 export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS';
 export const TUTORIAL_ERROR = 'TUTORIAL_ERROR';
 export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE';
@ -46,6 +47,9 @@ export const PROGRESS = 'PROGRESS';


 export const VISIT = 'VISIT';
+export const LANGUAGE = 'LANGUAGE';
+export const RENDERER = 'RENDERER';
+export const STATISTICS = 'STATISTICS';

 // messages
 export const GET_ERRORS = 'GET_ERRORS';
--- a/src/components/Blockly/BlocklyWindow.js
+++ b/src/components/Blockly/BlocklyWindow.js
@ -2,15 +2,15 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { onChangeWorkspace, clearStats } from '../../actions/workspaceActions';
-import { De } from './msg/de';
-import { En } from './msg/en';
+
 import BlocklyComponent from './BlocklyComponent';
 import BlocklySvg from './BlocklySvg';
+
 import * as Blockly from 'blockly/core';
 import './blocks/index';
 import './generator/index';
-import { initialXml } from './initialXml.js';

+import { initialXml } from './initialXml.js';


 class BlocklyWindow extends Component {
@ -18,26 +18,9 @@ class BlocklyWindow extends Component {
  constructor(props) {
    super(props);
    this.simpleWorkspace = React.createRef();
-    var locale = window.localStorage.getItem('locale');
-    this.state = {
-      renderer: window.localStorage.getItem('renderer'),
-    };
-    if (locale === null) {
-      if (navigator.language === 'de-DE') {
-        locale = 'de';
-      } else {
-        locale = 'en';
-      }
-    }
-    if (locale === 'de') {
-      Blockly.setLocale(De);
-    } else if (locale === 'en') {
-      Blockly.setLocale(En);
-    }
  }

  componentDidMount() {
-
    const workspace = Blockly.getMainWorkspace();
    this.props.onChangeWorkspace({});
    this.props.clearStats();
@ -62,6 +45,15 @@ class BlocklyWindow extends Component {
      if (!xml) xml = initialXml;
      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
    }
+    if(props.language !== this.props.language){
+      // change language
+      if (!xml) xml = initialXml;
+      var xmlDom = Blockly.Xml.textToDom(xml);
+      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
+      // var toolbox = workspace.getToolbox();
+      // console.log(toolbox);
+      // workspace.updateToolbox(toolbox.toolboxDef_);
+    }
    Blockly.svgResize(workspace);
  }

@ -72,7 +64,7 @@ class BlocklyWindow extends Component {
          style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
          readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
          trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
-          renderer={this.state.renderer}
+          renderer={this.props.renderer}
          zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
            controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
            wheel: false,
@ -106,8 +98,14 @@ class BlocklyWindow extends Component {

 BlocklyWindow.propTypes = {
  onChangeWorkspace: PropTypes.func.isRequired,
-  clearStats: PropTypes.func.isRequired
+  clearStats: PropTypes.func.isRequired,
+  renderer: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired
 };

+const mapStateToProps = state => ({
+  renderer: state.general.renderer,
+  language: state.general.language
+});

-export default connect(null, { onChangeWorkspace, clearStats })(BlocklyWindow);
+export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow);
--- a/src/components/Blockly/msg/de.js
+++ b/src/components/Blockly/msg/de.js
@ -800,4 +800,228 @@ Blockly.Msg.senseBox_mqtt_password = "Passwort";
 Blockly.Msg.sensebox_mqtt_subscribe = "Subscribe to Feed"
 Blockly.Msg.senseBox_mqtt_publish = "Sende an Feed/Topic";

+
+
+/**
+ * Typed Variable Modal
+ *
+ */
+
+
+Blockly.Msg.TYPED_VAR_MODAL_CONFIRM_BUTTON = "Ok";
+Blockly.Msg.TYPED_VAR_MODAL_VARIABLE_NAME_LABEL = "Variablen Name: ";
+Blockly.Msg.TYPED_VAR_MODAL_TYPES_LABEL = "Variable Typen";
+Blockly.Msg.TYPED_VAR_MODAL_CANCEL_BUTTON = "Abbrechen";
+Blockly.Msg.TYPED_VAR_MODAL_TITLE = "Erstelle Variable";
+Blockly.Msg.TYPED_VAR_MODAL_INVALID_NAME = "Der Name ist ungültig, bitte versuche einen anderen."
+
+/**
+ * Add Translation for Blocks above
+ * ---------------------------------------------------------------
+ * Add Translation for the UI below
+ */
+
+/**
+ * Toolbox
+ */
+Blockly.Msg.toolbox_sensors = "Sensoren";
+Blockly.Msg.toolbox_logic = "Logik";
+Blockly.Msg.toolbox_loops = "Schleifen";
+Blockly.Msg.toolbox_math = "Mathematik";
+Blockly.Msg.toolbox_io = "Eingang/Ausgang";
+Blockly.Msg.toolbox_time = "Zeit";
+Blockly.Msg.toolbox_functions = "Funktionen";
+Blockly.Msg.toolbox_variables = "Variablen";
+
+/**
+ * Tooltips
+ *
+ */
+
+Blockly.Msg.tooltip_compile_code = "Code kompilieren"
+Blockly.Msg.tooltip_save_blocks = "Blöcke speichern";
+Blockly.Msg.tooltip_open_blocks = "Blöcke öffnen";
+Blockly.Msg.tooltip_screenshot = "Screenshot erstellen";
+Blockly.Msg.tooltip_clear_workspace = "Workspace zurücksetzen";
+Blockly.Msg.tooltip_share_blocks = "Blöcke teilen";
+Blockly.Msg.tooltip_show_code = "Code anzeigen";
+Blockly.Msg.tooltip_hide_code = "Code ausblenden"
+Blockly.Msg.tooltip_delete_project = "Projekt löschen"
+Blockly.Msg.tooltip_project_name = "Name des Projektes"
+Blockly.Msg.tooltip_download_project = "Projekt herunterladen"
+Blockly.Msg.tooltip_open_project = "Projekt öffnen"
+Blockly.Msg.tooltip_update_project = "Projekt aktualisieren"
+Blockly.Msg.tooltip_save_project = "Projekt speichern"
+Blockly.Msg.tooltip_create_project = "Projekt erstellen"
+Blockly.Msg.tooltip_share_project = "Projekt teilen"
+Blockly.Msg.tooltip_reset_workspace = "Workspace zurücksetzen"
+Blockly.Msg.tooltip_copy_link = "Link kopieren"
+Blockly.Msg.tooltip_trashcan_hide = 'gelöschte Blöcke ausblenden'
+Blockly.Msg.tooltip_trashcan_delete = 'Blöcke endgültig löschen'
+Blockly.Msg.tooltip_project_title = "Titel des Projektes"
+Blockly.Msg.tooltip_check_solution = "Lösung kontrollieren"
+
+/**
+ * Messages
+ *
+ */
+
+Blockly.Msg.messages_delete_project_failed = "Fehler beim Löschen des Projektes. Versuche es noch einmal."
+Blockly.Msg.messages_reset_workspace_success = "Das Projekt wurde erfolgreich zurückgesetzt"
+Blockly.Msg.messages_PROJECT_UPDATE_SUCCESS = "Das Projekt wurde erfolgreich aktualisiert."
+Blockly.Msg.messages_GALLERY_UPDATE_SUCCESS = "Das Galerie-Projekt wurde erfolgreich aktualisiert."
+Blockly.Msg.messages_PROJECT_UPDATE_FAIL = "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal."
+Blockly.Msg.messages_GALLERY_UPDATE_FAIL = "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal."
+Blockly.Msg.messages_gallery_save_fail_1 = "Fehler beim Speichern des "
+Blockly.Msg.messages_gallery_save_fail_2 = "Projektes. Versuche es noch einmal."
+Blockly.Msg.messages_SHARE_SUCCESS = 'Programm teilen'
+Blockly.Msg.messages_SHARE_FAIL = "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal."
+Blockly.Msg.messages_copylink_success = 'Link erfolgreich in Zwischenablage gespeichert.'
+Blockly.Msg.messages_rename_success_01 = 'Das Projekt wurde erfolgreich in '
+Blockly.Msg.messages_rename_success_02 = 'umbenannt.'
+Blockly.Msg.messages_newblockly_head = "Willkommen zur neuen Version Blockly für die senseBox"
+Blockly.Msg.messages_newblockly_text = "Die neue Blockly Version befindet sich zurzeit in der Testphase. Alle Neuigkeiten findet ihr hier:"
+Blockly.Msg.messages_GET_TUTORIAL_FAIL = 'Zurück zur Tutorials-Übersicht'
+Blockly.Msg.messages_LOGIN_FAIL = 'Der Benutzername oder das Passwort ist nicht korrekt.'
+/**
+ * Share Dialog
+ */
+
+Blockly.Msg.sharedialog_headline = "Dein Link wurde erstellt.";
+Blockly.Msg.sharedialog_text = "Über den folgenden Link kannst du dein Programm teilen.";
+
+/**
+ * Project rename Dialog
+ */
+
+Blockly.Msg.renamedialog_headline = "Projekt benennen";
+Blockly.Msg.renamedialog_text = "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'."
+
+/**
+ * Compile Dialog
+ *
+ */
+
+Blockly.Msg.compiledialog_headline = "Fehler"
+Blockly.Msg.compiledialog_text = "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut"
+
+/**
+ * Buttons
+ *
+ */
+
+Blockly.Msg.button_cancel = "Abbrechen";
+Blockly.Msg.button_close = "Schließen";
+Blockly.Msg.button_accept = "Bestätigen";
+Blockly.Msg.button_compile = "Kompilieren";
+Blockly.Msg.button_create_variableCreate = "Erstelle Variable";
+Blockly.Msg.button_back = "Zurück"
+Blockly.Msg.button_next = "nächster Schritt"
+Blockly.Msg.button_tutorial_overview = "Tutorial Übersicht"
+Blockly.Msg.button_login = "Anmelden"
+
+/**
+ *
+ */
+
+Blockly.Msg.filename = "Dateiname";
+Blockly.Msg.projectname = "Projektname";
+
+/**
+ * Settings
+ */
+Blockly.Msg.settings_head = "Einstellungen"
+Blockly.Msg.settings_language = "Sprache"
+Blockly.Msg.settings_language_text = "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden."
+Blockly.Msg.settings_language_de = "Deutsch"
+Blockly.Msg.settings_language_en = "Englisch"
+Blockly.Msg.settings_renderer = "Renderer"
+Blockly.Msg.settings_renderer_text = "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist."
+Blockly.Msg.settings_statistics = "Statistiken"
+Blockly.Msg.settings_statistics_text = "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden."
+Blockly.Msg.settings_statistics_on = "An"
+Blockly.Msg.settings_statistics_off = "Aus"
+
+/**
+ * 404
+ */
+
+Blockly.Msg.notfound_head = "Die von Ihnen angeforderte Seite kann nicht gefunden werden."
+Blockly.Msg.notfound_text = "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar."
+
+
+/**
+ * Labels
+ */
+
+Blockly.Msg.labels_donotshowagain = 'Dialog nicht mehr anzeigen'
+Blockly.Msg.labels_here = "hier"
+Blockly.Msg.labels_username = 'E-Mail oder Nutzername'
+Blockly.Msg.labels_password = "Passwort"
+
+/**
+ * Badges
+ */
+
+Blockly.Msg.badges_explaination = "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du "
+Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01 = "Herzlichen Glückwunsch! Du hast den Badge "
+Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02 = " erhalten."
+/**
+ * Tutorials
+ */
+
+Blockly.Msg.tutorials_assessment_task = "Aufgabe"
+Blockly.Msg.tutorials_hardware_head = "Für die Umsetzung benötigst du folgende Hardware:"
+Blockly.Msg.tutorials_hardware_moreInformation = "Weitere Informationen zur Hardware-Komponente findest du"
+Blockly.Msg.tutorials_hardware_here = "hier";
+Blockly.Msg.tutorials_requirements = "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:"
+
+
+/**
+ * Tutorial Builder
+ */
+
+Blockly.Msg.builder_solution = "Lösung"
+Blockly.Msg.builder_solution_submit = "Lösung einreichen"
+Blockly.Msg.builder_example_submit = "Beispiel einreichen"
+Blockly.Msg.builder_comment = "Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird."
+Blockly.Msg.builder_hardware_order = "Beachte, dass die Reihenfolge des Auswählens maßgebend ist."
+Blockly.Msg.builder_hardware_helper = "Wähle mindestens eine Hardware-Komponente aus."
+Blockly.Msg.builder_requirements_head = "Voraussetzungen"
+Blockly.Msg.builder_requirements_order = "Beachte, dass die Reihenfolge des Anhakens maßgebend ist."
+
+/**
+ * Login
+ */
+
+
+Blockly.Msg.login_head = "Anmelden"
+Blockly.Msg.login_osem_account_01 = "Du benötigst einen "
+Blockly.Msg.login_osem_account_02 = "Account um dich einzuloggen"
+Blockly.Msg.login_lostpassword = "Du hast dein Passwort vergessen?"
+Blockly.Msg.login_createaccount = "Falls du noch keinen Account hast erstellen einen auf "
+/**
+ * Navbar
+ */
+
+Blockly.Msg.navbar_tutorials = "Tutorials"
+Blockly.Msg.navbar_tutorialbuilder = "Tutorial erstellen"
+Blockly.Msg.navbar_gallery = "Gallerie"
+Blockly.Msg.navbar_projects = "Projekte"
+
+Blockly.Msg.navbar_menu = "Menü"
+Blockly.Msg.navbar_login = "Einloggen"
+Blockly.Msg.navbar_mybadges = "myBadges"
+Blockly.Msg.navbar_account = "Konto"
+Blockly.Msg.navbar_logout = "Abmelden"
+Blockly.Msg.navbar_settings = "Einstellungen"
+
+/**
+ * Codeviewer
+ */
+
+Blockly.Msg.codeviewer_arduino = "Arduino Quellcode"
+Blockly.Msg.codeviewer_xml = "XML Blöcke"
+
+
 export const De = Blockly.Msg;
--- a/src/components/Blockly/msg/en.js
+++ b/src/components/Blockly/msg/en.js
@ -782,4 +782,209 @@ Blockly.Msg.senseBox_mqtt_password = "Password";
 Blockly.Msg.sensebox_mqtt_subscribe = "Subscribe to Feed"
 Blockly.Msg.senseBox_mqtt_publish = "Publish to Feed/Topic";

+/**
+ * Add Translation for Blocks above
+ * ---------------------------------------------------------------
+ * Add Translation for the UI below
+ */
+
+/**
+ * Toolbox
+ */
+Blockly.Msg.toolbox_sensors = "Sensors";
+Blockly.Msg.toolbox_logic = "Logic";
+Blockly.Msg.toolbox_loops = "Loops";
+Blockly.Msg.toolbox_math = "Math";
+Blockly.Msg.toolbox_io = "Input/Output";
+Blockly.Msg.toolbox_time = "Time";
+Blockly.Msg.toolbox_functions = "Functions";
+Blockly.Msg.toolbox_variables = "Variables";
+
+/**
+ * Tooltips
+ *
+ */
+
+Blockly.Msg.tooltip_compile_code = "Compile code"
+Blockly.Msg.tooltip_save_blocks = "Save blocks";
+Blockly.Msg.tooltip_open_blocks = "Open blocks";
+Blockly.Msg.tooltip_screenshot = "Download screenshot";
+Blockly.Msg.tooltip_clear_workspace = "Reset workspace";
+Blockly.Msg.tooltip_share_blocks = "Share blocks";
+Blockly.Msg.tooltip_show_code = "Show code";
+Blockly.Msg.tooltip_hide_code = "Hide code "
+Blockly.Msg.tooltip_delete_project = "Delete project"
+Blockly.Msg.tooltip_project_name = "Project name"
+Blockly.Msg.tooltip_download_project = "Download project"
+Blockly.Msg.tooltip_open_project = "Open project"
+Blockly.Msg.tooltip_update_project = "Update project"
+Blockly.Msg.tooltip_save_project = "Save project"
+Blockly.Msg.tooltip_create_project = "Create project"
+Blockly.Msg.tooltip_share_project = "Share project"
+Blockly.Msg.tooltip_reset_workspace = "Reset workspace"
+Blockly.Msg.tooltip_copy_link = "Cooy link"
+Blockly.Msg.tooltip_trashcan_hide = "hide deleted blocks"
+Blockly.Msg.tooltip_trashcan_delete = "empty trashcan"
+Blockly.Msg.tooltip_project_title = "Project title"
+Blockly.Msg.tooltip_check_solution = "Check solution"
+
+/**
+ * Messages
+ *
+ */
+
+Blockly.Msg.messages_delete_project_failed = "Error deleting the project. Try again."
+Blockly.Msg.messages_reset_workspace_success = "The project has been successfully reset."
+Blockly.Msg.messages_PROJECT_UPDATE_SUCCESS = "The project was successfully updated."
+Blockly.Msg.messages_GALLERY_UPDATE_SUCCESS = "The gallery project was successfully updated."
+Blockly.Msg.messages_PROJECT_UPDATE_FAIL = "Error updating the project. Try again."
+Blockly.Msg.messages_GALLERY_UPDATE_FAIL = "Error updating the gallery project. Try again."
+Blockly.Msg.messages_gallery_save_fail_1 = "Error saving the "
+Blockly.Msg.messages_gallery_save_fail_2 = "Project. Try again."
+Blockly.Msg.messages_SHARE_SUCCESS = 'Share program'
+Blockly.Msg.messages_SHARE_FAIL = "Error creating a link to share your program. Try again."
+Blockly.Msg.messages_copylink_success = 'Link successfully saved to clipboard.'
+Blockly.Msg.messages_rename_success_01 = 'The project was successfully saved to '
+Blockly.Msg.messages_rename_success_02 = 'renamed.'
+Blockly.Msg.messages_newblockly_head = 'Welcome to the new version Blockly for the senseBox'
+Blockly.Msg.messages_newblockly_text = "The new Blockly version is currently in testing. You can find all the news here:"
+Blockly.Msg.messages_GET_TUTORIAL_FAIL = 'Back to tutorials overview'
+Blockly.Msg.messages_LOGIN_FAIL = 'The username or password is incorrect.'
+Blockly.Msg.messages_login_error = "Enter both a username and a password."
+/**
+ * Share Dialog
+ */
+
+Blockly.Msg.sharedialog_headline = "Your link has been created.";
+Blockly.Msg.sharedialog_text = "You can share your program using the following link.";
+
+/**
+ * Project rename Dialog
+ */
+
+Blockly.Msg.renamedialog_headline = "Rename project";
+Blockly.Msg.renamedialog_text = "Please enter a name for the project and confirm it by clicking 'Confirm'."
+/**
+ * Compile Dialog
+ *
+ */
+
+Blockly.Msg.compiledialog_headline = "Error"
+Blockly.Msg.compiledialog_text = "While compiling an error occured. Please check your blocks and try again"
+
+/**
+ * Buttons
+ *
+ */
+
+Blockly.Msg.button_cancel = "Cancel";
+Blockly.Msg.button_close = "Close";
+Blockly.Msg.button_accept = "Ok";
+Blockly.Msg.button_compile = "Compile";
+Blockly.Msg.button_create_variableCreate = "Create Variable";
+Blockly.Msg.button_back = "Back"
+Blockly.Msg.button_next = "Next step"
+Blockly.Msg.button_tutorial_overview = "Tutorial overview"
+Blockly.Msg.button_login = "Login"
+
+/**
+ *
+ */
+
+Blockly.Msg.filename = "Filename";
+Blockly.Msg.projectname = "Projectname";
+
+/**
+ * 404
+ */
+
+Blockly.Msg.notfound_head = "The page you requested cannot be found."
+Blockly.Msg.notfound_text = "The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable."
+
+/**
+ * Labels
+ */
+Blockly.Msg.labels_donotshowagain = 'Do not show dialog again'
+Blockly.Msg.labels_here = 'here'
+Blockly.Msg.labels_username = 'Email or username'
+Blockly.Msg.labels_password = "Password"
+/**
+ * Badges
+ */
+
+Blockly.Msg.badges_explaination = "An overview of all badges received in the Blockly for senseBox context can be found "
+Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01 = "Congratulations! You have received the badge "
+Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02 = "."
+/**
+ * Tutorials
+ */
+
+Blockly.Msg.tutorials_assessment_task = "Task"
+Blockly.Msg.tutorials_hardware_head = "For the implementation you need the following hardware:"
+Blockly.Msg.tutorials_hardware_moreInformation = "You can find more information about the hardware component."
+Blockly.Msg.tutorials_hardware_here = "here";
+Blockly.Msg.tutorials_requirements = "Before continuing with this tutorial, you should have successfully completed the following tutorials:"
+
+
+/**
+ * Tutorial Builder
+ */
+
+Blockly.Msg.builder_solution = "Solution"
+Blockly.Msg.builder_solution_submit = "Submit Solution"
+Blockly.Msg.builder_example_submit = "Submit example"
+Blockly.Msg.builder_comment = "Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled."
+Blockly.Msg.builder_hardware_order = "Note that the order of selection is authoritative."
+Blockly.Msg.builder_hardware_helper = "Select at least one hardware component."
+Blockly.Msg.builder_requirements_head = "Requirements."
+Blockly.Msg.builder_requirements_order = "Note that the order of ticking is authoritative."
+
+/**
+ * Login
+ */
+
+
+Blockly.Msg.login_head = "Login"
+Blockly.Msg.login_osem_account_01 = "You need to have an "
+Blockly.Msg.login_osem_account_02 = "Account to login"
+Blockly.Msg.login_lostpassword = "Lost your password?"
+Blockly.Msg.login_createaccount = "If you don't have an openSenseMap account please register on "
+
+
+
+/**
+ * Settings
+ */
+Blockly.Msg.settings_head = "Settings"
+Blockly.Msg.settings_language = "Language"
+Blockly.Msg.settings_language_text = "Selection of the language applies to the entire application. A distinction can be made between German and English."
+Blockly.Msg.settings_language_de = "German"
+Blockly.Msg.settings_language_en = "English"
+Blockly.Msg.settings_renderer = "Renderer"
+Blockly.Msg.settings_renderer_text = "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application."
+Blockly.Msg.settings_statistics = "Statistics"
+Blockly.Msg.settings_statistics_text = "The display of statistics on the usage of the blocks above the workspace can be shown or hidden."
+Blockly.Msg.settings_statistics_on = "On"
+Blockly.Msg.settings_statistics_off = "Off"
+
+/**
+ * Navbar
+ */
+
+Blockly.Msg.navbar_tutorials = "Tutorials"
+Blockly.Msg.navbar_tutorialbuilder = "Create tutorial"
+Blockly.Msg.navbar_gallery = "Gallery"
+Blockly.Msg.navbar_projects = "Projects"
+
+Blockly.Msg.navbar_menu = "Menu"
+Blockly.Msg.navbar_login = "Login"
+Blockly.Msg.navbar_mybadges = "myBadges"
+Blockly.Msg.navbar_account = "Account"
+Blockly.Msg.navbar_logout = "Logout"
+Blockly.Msg.navbar_settings = "Settings"
+
+
+Blockly.Msg.codeviewer_arduino = "Arduino Source Code"
+Blockly.Msg.codeviewer_xml = "XML Blocks"
+
 export const En = Blockly.Msg;
--- a/src/components/Blockly/toolbox/Toolbox.js
+++ b/src/components/Blockly/toolbox/Toolbox.js
@ -38,7 +38,7 @@ class Toolbox extends React.Component {
    render() {
        return (
            <xml xmlns="https://developers.google.com/blockly/xml" id="blockly" style={{ display: 'none' }} ref={this.props.toolbox}>
-                <Category name="Sensoren" colour={getColour().sensebox}>
+                <Category name={Blockly.Msg.toolbox_sensors} colour={getColour().sensebox}>
                    <Block type="sensebox_sensor_temp_hum" />
                    <Block type="sensebox_sensor_uv_light" />
                    <Block type="sensebox_sensor_bmx055_accelerometer" />
@ -301,7 +301,7 @@ class Toolbox extends React.Component {
                    <Block type="sensebox_mqtt_publish" />
                    {/* <Block type="sensebox_mqtt_subscribe" /> */}
                </Category>
-                <Category name="Logik" colour={getColour().logic}>
+                <Category name={Blockly.Msg.toolbox_logic} colour={getColour().logic}>
                    <Block type="controls_if" />
                    <Block type="controls_ifelse" />
                    <Block type="logic_compare" />
@ -310,7 +310,7 @@ class Toolbox extends React.Component {
                    <Block type="logic_boolean" />
                    <Block type="switch_case" />
                </Category>
-                <Category id="loops" name="Schleifen" colour={getColour().loops}>
+                <Category id="loops" name={Blockly.Msg.toolbox_loops} colour={getColour().loops}>
                    <Block type="controls_repeat_ext">
                        <Value name="TIMES">
                            <Block type="math_number">
@ -349,7 +349,7 @@ class Toolbox extends React.Component {
                    <Block type="text_length" />
                    <Block type="text_isEmpty" />
                </Category>
-                <Category id="time" name="Zeit" colour={getColour().time}>
+                <Category id="time" name={Blockly.Msg.toolbox_time} colour={getColour().time}>
                    <Block type="time_delay">
                        <Value name="DELAY_TIME_MILI">
                            <Block type="math_number">
@ -369,7 +369,7 @@ class Toolbox extends React.Component {
                    <Block type="infinite_loop"></Block>
                    <Block type="sensebox_interval_timer"></Block>
                </Category>
-                <Category id="catMath" name="Mathematik" colour={getColour().math}>
+                <Category id="math" name={Blockly.Msg.toolbox_math} colour={getColour().math}>
                    <Block type="math_number"></Block>
                    <Block type="math_arithmetic"></Block>
                    <Block type="math_single"></Block>
@ -422,15 +422,15 @@ class Toolbox extends React.Component {
                    </Block>
                    <Block type="io_notone"></Block>
                </Category>
-                <Category name="Variablen" colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
+                <Category name={Blockly.Msg.toolbox_variables} colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
                <Category name="Arrays" colour={getColour().arrays} >
                    <Block type="lists_create_empty" />
                    <Block type="array_getIndex" />
                    <Block type="lists_length" />
                </Category>
-                <Category name="Functions" colour={getColour().procedures} custom="PROCEDURE"></Category>
+                <Category name={Blockly.Msg.toolbox_functions} colour={getColour().procedures} custom="PROCEDURE"></Category>
                <sep></sep>
-                <Category name="Eingang/Ausgang" colour={getColour().io}>
+                <Category name={Blockly.Msg.toolbox_io} colour={getColour().io}>
                    <Block type="io_digitalwrite"></Block>
                    <Block type="io_digitalread"></Block>
                    <Block type="io_builtin_led"></Block>
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@ -13,6 +13,7 @@ import MuiAccordion from '@material-ui/core/Accordion';
 import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
 import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
 import { Card } from '@material-ui/core';
+import * as Blockly from 'blockly'


 const Accordion = withStyles((theme) => ({
@ -94,7 +95,7 @@ class CodeViewer extends Component {
        >
          <AccordionSummary>
            <b style={{ fontSize: '20px', marginRight: '5px', width: '35px' }}>{curlyBrackets}</b>
-            <div style={{ margin: 'auto 5px 2px 0px' }}>Arduino Quellcode</div>
+            <div style={{ margin: 'auto 5px 2px 0px' }}>{Blockly.Msg.codeviewer_arduino}</div>
          </AccordionSummary>
          <AccordionDetails style={{ padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white' }}>
            <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}>
@ -112,7 +113,7 @@ class CodeViewer extends Component {
        >
          <AccordionSummary>
            <b style={{ fontSize: '20px', marginRight: '5px', width: '35px' }}>{unequal}</b>
-            <div style={{ margin: 'auto 5px 2px 0px' }}>XML Blöcke</div>
+            <div style={{ margin: 'auto 5px 2px 0px' }}>{Blockly.Msg.codeviewer_xml}</div>
          </AccordionSummary>
          <AccordionDetails style={{ padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white' }}>
            <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}>
--- a/src/components/Content.js
+++ b/src/components/Content.js
@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import * as Blockly from 'blockly/core';
+import { De } from './Blockly/msg/de';
+import { En } from './Blockly/msg/en';
+
+import Navbar from './Navbar';
+import Footer from './Footer';
+import Routes from './Route/Routes';
+import Cookies from './Cookies';
+
+class Content extends Component {
+
+  componentDidMount() {
+    if (this.props.language === 'de_DE') {
+      Blockly.setLocale(De);
+    } else if (this.props.language === 'en_US') {
+      Blockly.setLocale(En);
+    }
+  }
+
+  componentDidUpdate(props){
+    if(props.language !== this.props.language){
+      if (this.props.language === 'de_DE') {
+        Blockly.setLocale(De);
+      } else if (this.props.language === 'en_US') {
+        Blockly.setLocale(En);
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div className="wrapper">
+        <Navbar />
+        <Routes />
+        <Cookies />
+        <Footer />
+      </div>
+    );
+  }
+}
+
+Content.propTypes = {
+  language: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, null)(Content);
--- a/src/components/Home.js
+++ b/src/components/Home.js
@ -48,7 +48,6 @@ class Home extends Component {

  state = {
    codeOn: false,
-    stats: window.localStorage.getItem('stats'),
    snackbar: false,
    type: '',
    key: '',
@ -91,7 +90,7 @@ class Home extends Component {
  render() {
    return (
      <div>
-        {this.state.stats ?
+        {this.props.statistics ?
          <div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
          : null
        }
@ -136,11 +135,13 @@ class Home extends Component {
 Home.propTypes = {
  clearStats: PropTypes.func.isRequired,
  workspaceName: PropTypes.func.isRequired,
-  message: PropTypes.object.isRequired
+  message: PropTypes.object.isRequired,
+  statistics: PropTypes.bool.isRequired
 };

 const mapStateToProps = state => ({
-  message: state.message
+  message: state.message,
+  statistics: state.general.statistics
 });


--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@ -21,8 +21,10 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import LinearProgress from '@material-ui/core/LinearProgress';

-import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faIdCard, faEnvelope, faCog, faChalkboardTeacher, faFolderPlus, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly'
+

 const styles = (theme) => ({
  drawerWidth: {
@ -92,7 +94,7 @@ class Navbar extends Component {
          <div style={{ height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px' }} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}>
            <div style={{ display: ' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%' }}>
              <Typography variant="h6" style={{ display: 'inline' }}>
-                Menü
+                {Blockly.Msg.navbar_menu}
              </Typography>
              <div style={{ float: 'right' }}>
                <FontAwesomeIcon icon={faChevronLeft} />
@ -100,47 +102,47 @@ class Navbar extends Component {
            </div>
          </div>
          <List>
-            {[{ text: 'Tutorials', icon: faChalkboardTeacher, link: "/tutorial" },
-              { text: 'Tutorial-Builder', icon: faTools, link: "/tutorial/builder", restriction: this.props.user && this.props.user.blocklyRole !== 'user' && this.props.isAuthenticated},
-              { text: 'Galerie', icon: faLightbulb, link: "/gallery" },
-              { text: 'Projekte', icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => {
-                if(item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0){
-                  return(
-                    <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
-                      <ListItem button onClick={this.toggleDrawer}>
-                        <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
-                        <ListItemText primary={item.text} />
-                      </ListItem>
-                    </Link>
-                  );
-                }
+            {[{ text: Blockly.Msg.navbar_tutorials, icon: faChalkboardTeacher, link: "/tutorial" },
+            { text: Blockly.Msg.navbar_tutorialbuilder, icon: faTools, link: "/tutorial/builder", restriction: this.props.user && this.props.user.blocklyRole !== 'user' && this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_gallery, icon: faLightbulb, link: "/gallery" },
+            { text: Blockly.Msg.navbar_projects, icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => {
+              if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) {
+                return (
+                  <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
+                    <ListItem button onClick={this.toggleDrawer}>
+                      <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
+                      <ListItemText primary={item.text} />
+                    </ListItem>
+                  </Link>
+                );
              }
+            }
            )}
          </List>
          <Divider classes={{ root: this.props.classes.appBarColor }} style={{ marginTop: 'auto' }} />
          <List>
-            {[{ text: 'Anmelden', icon: faSignInAlt, link: '/user/login', restriction: !this.props.isAuthenticated },
-              { text: 'Konto', icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated },
-              { text: 'MyBadges', icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated },
-              { text: 'Abmelden', icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated },
-              { text: 'Einstellungen', icon: faCog, link: "/settings" }].map((item, index) => {
-                if(item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0){
-                  return(
-                    <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
-                      <ListItem button onClick={item.function ? () => {item.function(); this.toggleDrawer();} : this.toggleDrawer}>
-                        <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
-                        <ListItemText primary={item.text} />
-                      </ListItem>
-                    </Link>
-                  );
-                }
+            {[{ text: Blockly.Msg.navbar_login, icon: faSignInAlt, link: '/user/login', restriction: !this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_account, icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_mybadges, icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_logout, icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated },
+            { text: Blockly.Msg.navbar_settings, icon: faCog, link: "/settings" }].map((item, index) => {
+              if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) {
+                return (
+                  <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
+                    <ListItem button onClick={item.function ? () => { item.function(); this.toggleDrawer(); } : this.toggleDrawer}>
+                      <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
+                      <ListItemText primary={item.text} />
+                    </ListItem>
+                  </Link>
+                );
              }
+            }
            )}
          </List>
        </Drawer>
        {this.props.tutorialIsLoading || this.props.projectIsLoading ?
-          <LinearProgress style={{marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)'}}/>
-        : null}
+          <LinearProgress style={{ marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)' }} />
+          : null}
      </div>
    );
  }
--- a/src/components/NotFound.js
+++ b/src/components/NotFound.js
@ -6,31 +6,39 @@ import { withRouter } from 'react-router-dom';

 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
+import * as Blockly from 'blockly'

 class NotFound extends Component {
+
+  componentDidMount(){
+    // Ensure that Blockly.setLocale is adopted in the component.
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }
+
  render() {
    return (
      <div>
-        <Breadcrumbs content={[{link: this.props.location.pathname, title: 'Error'}]}/>
-        <Typography variant='h4' style={{marginBottom: '5px'}}>Die von Ihnen angeforderte Seite kann nicht gefunden werden.</Typography>
-        <Typography variant='body1'>Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.</Typography>
+        <Breadcrumbs content={[{ link: this.props.location.pathname, title: 'Error' }]} />
+        <Typography variant='h4' style={{ marginBottom: '5px' }}>{Blockly.Msg.notfound_head}</Typography>
+        <Typography variant='body1'>{Blockly.Msg.notfound_text}</Typography>
        {this.props.button ?
          <Button
-            style={{marginTop: '20px'}}
+            style={{ marginTop: '20px' }}
            variant="contained"
            color="primary"
-            onClick={() => {this.props.history.push(this.props.button.link)}}
+            onClick={() => { this.props.history.push(this.props.button.link) }}
          >
            {this.props.button.title}
          </Button>
-        :
+          :
          <Button
-            style={{marginTop: '20px'}}
+            style={{ marginTop: '20px' }}
            variant="contained"
            color="primary"
-            onClick={() => {this.props.history.push('/')}}
+            onClick={() => { this.props.history.push('/') }}
          >
-            Zurück zur Startseite
+            {Blockly.Msg.button_back}
          </Button>
        }
      </div>
--- a/src/components/Project/Project.js
+++ b/src/components/Project/Project.js
@ -5,9 +5,7 @@ import { workspaceName } from '../../actions/workspaceActions';
 import { getProject, resetProject } from '../../actions/projectActions';
 import { clearMessages, returnErrors } from '../../actions/messageActions';

-import axios from 'axios';
 import { withRouter } from 'react-router-dom';
-import { createNameId } from 'mnemonic-id';

 import Home from '../Home';
 import Breadcrumbs from '../Breadcrumbs';
@ -24,16 +22,16 @@ class Project extends Component {
  }

  componentDidUpdate(props) {
-    if(props.location.pathname !== this.props.location.pathname ||
-       props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]){
-      if(this.props.message.msg){
+    if (props.location.pathname !== this.props.location.pathname ||
+      props.match.params[`${this.props.type}Id`] !== this.props.match.params[`${this.props.type}Id`]) {
+      if (this.props.message.msg) {
        this.props.clearMessages();
      }
      this.getProject();
    }
-    if(this.props.message !== props.message){
-      if(this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL'){
-        if(this.props.type!=='share'){
+    if (this.props.message !== props.message) {
+      if (this.props.message.id === 'PROJECT_EMPTY' || this.props.message.id === 'GET_PROJECT_FAIL') {
+        if (this.props.type !== 'share') {
          this.props.returnErrors('', 404, 'GET_PROJECT_FAIL');
          this.props.history.push(`/${this.props.type}`);
        } else {
@ -41,10 +39,10 @@ class Project extends Component {
          this.props.returnErrors('', 404, 'GET_SHARE_FAIL');
        }
      }
-      else if(this.props.message.id === 'GET_PROJECT_SUCCESS'){
+      else if (this.props.message.id === 'GET_PROJECT_SUCCESS') {
        this.props.workspaceName(this.props.project.title);
      }
-      else if(this.props.message.id === 'PROJECT_DELETE_SUCCESS' || this.props.message.id === 'GALLERY_DELETE_SUCCESS'){
+      else if (this.props.message.id === 'PROJECT_DELETE_SUCCESS' || this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
        this.props.history.push(`/${this.props.type}`);
      }
    }
@ -56,8 +54,8 @@ class Project extends Component {
  }

  getProject = () => {
-    var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//,'');
-    var param = this.props.location.pathname.replace(`/${id}`,'').replace('/','');
+    var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//, '');
+    var param = this.props.location.pathname.replace(`/${id}`, '').replace('/', '');
    console.log('param', param);
    console.log(id);
    this.props.getProject(param, id);
@ -70,13 +68,13 @@ class Project extends Component {
        <Backdrop open invisible>
          <CircularProgress color="primary" />
        </Backdrop>
-      : this.props.project ?
-        <div>
-          {this.props.type !== 'share' ?
-            <Breadcrumbs content={[{ link: `/${this.props.type}`, title: data },{ link: this.props.location.pathname, title: this.props.project.title }]} />
-          : null}
-          <Home project={this.props.project} projectType={this.props.type}/>
-        </div> : null
+        : this.props.project ?
+          <div>
+            {this.props.type !== 'share' ?
+              <Breadcrumbs content={[{ link: `/${this.props.type}`, title: data }, { link: this.props.location.pathname, title: this.props.project.title }]} />
+              : null}
+            <Home project={this.props.project} projectType={this.props.type} />
+          </div> : null
    );
  };
 }
--- a/src/components/Project/ProjectHome.js
+++ b/src/components/Project/ProjectHome.js
@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { getProjects, resetProject } from '../../actions/projectActions';
 import { clearMessages } from '../../actions/messageActions';

-import axios from 'axios';
 import { Link, withRouter } from 'react-router-dom';

 import Breadcrumbs from '../Breadcrumbs';
@ -42,31 +41,31 @@ class ProjectHome extends Component {
  }

  componentDidMount() {
-    var type = this.props.location.pathname.replace('/','');
+    var type = this.props.location.pathname.replace('/', '');
    this.props.getProjects(type);
-    if(this.props.message){
-      if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
+    if (this.props.message) {
+      if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
        this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
      }
-      else if(this.props.message.id === 'GALLERY_DELETE_SUCCESS'){
+      else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
        this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
      }
-      else if(this.props.message.id === 'GET_PROJECT_FAIL'){
-        this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-':''}Projekt konnte nicht gefunden werden.`, type: 'error' });
+      else if (this.props.message.id === 'GET_PROJECT_FAIL') {
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-' : ''}Projekt konnte nicht gefunden werden.`, type: 'error' });
      }
    }
  }

  componentDidUpdate(props) {
-    if(props.location.pathname !== this.props.location.pathname){
-      this.setState({snackbar: false});
-      this.props.getProjects(this.props.location.pathname.replace('/',''));
+    if (props.location.pathname !== this.props.location.pathname) {
+      this.setState({ snackbar: false });
+      this.props.getProjects(this.props.location.pathname.replace('/', ''));
    }
-    if(props.message !== this.props.message){
-      if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
+    if (props.message !== this.props.message) {
+      if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
        this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
      }
-      else if(this.props.message.id === 'GALLERY_DELETE_SUCCESS'){
+      else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
        this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
      }
    }
@ -88,7 +87,7 @@ class ProjectHome extends Component {
          <Backdrop open invisible>
            <CircularProgress color="primary" />
          </Backdrop>
-        :
+          :
          <div>
            {this.props.projects.length > 0 ?
              <Grid container spacing={2}>
@ -97,37 +96,37 @@ class ProjectHome extends Component {
                    <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
                      <Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
                        <Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-                          <h3 style={{marginTop: 0}}>{project.title}</h3>
-                          <Divider style={{marginTop: '1rem', marginBottom: '10px'}}/>
+                          <h3 style={{ marginTop: 0 }}>{project.title}</h3>
+                          <Divider style={{ marginTop: '1rem', marginBottom: '10px' }} />
                          <BlocklyWindow
                            svg
                            blockDisabled
                            initialXml={project.xml}
                          />
-                          <Typography variant='body2' style={{fontStyle: 'italic', margin: 0, marginTop: '-10px'}}>{project.description}</Typography>
+                          <Typography variant='body2' style={{ fontStyle: 'italic', margin: 0, marginTop: '-10px' }}>{project.description}</Typography>
                        </Link>
                        {this.props.user && this.props.user.email === project.creator ?
                          <div>
-                            <Divider style={{marginTop: '10px', marginBottom: '10px'}}/>
-                            <div style={{float: 'right'}}>
+                            <Divider style={{ marginTop: '10px', marginBottom: '10px' }} />
+                            <div style={{ float: 'right' }}>
                              <WorkspaceFunc
                                multiple
                                project={project}
-                                projectType={this.props.location.pathname.replace('/','')}
+                                projectType={this.props.location.pathname.replace('/', '')}
                              />
                            </div>
                          </div>
-                      : null}
+                          : null}
                      </Paper>
                    </Grid>
                  )
                })}
              </Grid>
-            : <div>
-                <Typography style={{marginBottom: '10px'}}>Es sind aktuell keine Projekte vorhanden.</Typography>
-                {this.props.location.pathname.replace('/','') === 'project' ?
+              : <div>
+                <Typography style={{ marginBottom: '10px' }}>Es sind aktuell keine Projekte vorhanden.</Typography>
+                {this.props.location.pathname.replace('/', '') === 'project' ?
                  <Typography>Erstelle jetzt dein <Link to={'/'} className={this.props.classes.link}>eigenes Projekt</Link> oder lasse dich von Projektbeispielen in der <Link to={'/gallery'} className={this.props.classes.link}>Galerie</Link> inspirieren.</Typography>
-                : null}
+                  : null}
              </div>
            }
          </div>
--- a/src/components/Route/IsLoggedRoute.js
+++ b/src/components/Route/IsLoggedRoute.js
@ -9,6 +9,7 @@ class IsLoggedRoute extends Component {

  render() {
    return (
+      !this.props.progress ?
      <Route
        {...this.props.exact}
        render={({ location }) =>
@ -23,17 +24,19 @@ class IsLoggedRoute extends Component {
            />
          )
        }
-      />
+      /> : null
    );
  }
 }

 IsLoggedRoute.propTypes = {
-  isAuthenticated: PropTypes.bool.isRequired
+  isAuthenticated: PropTypes.bool.isRequired,
+  progress: PropTypes.bool.isRequired
 };

 const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated,
+  progress: state.auth.progress
 });

 export default connect(mapStateToProps, null)(IsLoggedRoute);
--- a/src/components/Route/PrivateRoute.js
+++ b/src/components/Route/PrivateRoute.js
@ -9,6 +9,7 @@ class PrivateRoute extends Component {

  render() {
    return (
+      !this.props.progress ?
      <Route
        {...this.props.exact}
        render={({ location }) =>
@ -25,17 +26,19 @@ class PrivateRoute extends Component {
            )
          })()
        }
-      />
+      /> : null
    );
  }
 }

 PrivateRoute.propTypes = {
-  isAuthenticated: PropTypes.bool.isRequired
+  isAuthenticated: PropTypes.bool.isRequired,
+  progress: PropTypes.bool.isRequired
 };

 const mapStateToProps = state => ({
-  isAuthenticated: state.auth.isAuthenticated
+  isAuthenticated: state.auth.isAuthenticated,
+  progress: state.auth.progress
 });

 export default connect(mapStateToProps, null)(withRouter(PrivateRoute));
--- a/src/components/Route/PrivateRouteCreator.js
+++ b/src/components/Route/PrivateRouteCreator.js
@ -9,6 +9,7 @@ class PrivateRoute extends Component {

  render() {
    return (
+      !this.props.progress ?
      <Route
        {...this.props.exact}
        render={({ location }) =>
@ -27,19 +28,21 @@ class PrivateRoute extends Component {
            )
          })()
        }
-      />
+      /> : null
    );
  }
 }

 PrivateRoute.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
-  user: PropTypes.object
+  user: PropTypes.object,
+  progress: PropTypes.bool.isRequired
 };

 const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated,
-  user: state.auth.user
+  user: state.auth.user,
+  progress: state.auth.progress
 });

 export default connect(mapStateToProps, null)(withRouter(PrivateRoute));
--- a/src/components/Route/PublicRoute.js
+++ b/src/components/Route/PublicRoute.js
@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { Route } from 'react-router-dom';
+
+
+class PublicRoute extends Component {
+
+  render() {
+    return (
+      !this.props.progress ?
+        <Route
+          {...this.props.exact}
+          render={({ location }) =>
+            this.props.children
+          }
+        />
+      : null
+    );
+  }
+}
+
+PublicRoute.propTypes = {
+  progress: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = state => ({
+  progress: state.auth.progress
+});
+
+export default connect(mapStateToProps, null)(PublicRoute);
--- a/src/components/Route/Routes.js
+++ b/src/components/Route/Routes.js
@ -5,6 +5,7 @@ import { visitPage } from '../../actions/generalActions';

 import { Route, Switch, withRouter } from 'react-router-dom';

+import PublicRoute from './PublicRoute';
 import PrivateRoute from './PrivateRoute';
 import PrivateRouteCreator from './PrivateRouteCreator';
 import IsLoggedRoute from './IsLoggedRoute';
@ -34,18 +35,30 @@ class Routes extends Component {
    return (
      <div style={{ margin: '0 22px' }}>
        <Switch>
-          <Route path="/" exact component={Home} />
+          <PublicRoute path="/" exact>
+            <Home/>
+          </PublicRoute>
          {/* Tutorials */}
-          <Route path="/tutorial" exact component={TutorialHome} />
+          <PublicRoute path="/tutorial" exact>
+            <TutorialHome />
+          </PublicRoute>
          <PrivateRouteCreator path="/tutorial/builder" exact>
-            <Builder/>
+            <Builder />
          </PrivateRouteCreator>
-          <Route path="/tutorial/:tutorialId" exact component={Tutorial} />
+          <Route path="/tutorial/:tutorialId" exact>
+            <Tutorial />
+          </Route>
          {/* Sharing */}
-          <Route path="/share/:shareId" exact component={Project} />
+          <PublicRoute path="/share/:shareId" exact>
+            <Project />
+          </PublicRoute>
          {/* Gallery-Projects */}
-          <Route path="/gallery" exact component={ProjectHome} />
-          <Route path="/gallery/:galleryId" exact component={Project} />
+          <PublicRoute path="/gallery" exact>
+            <ProjectHome />
+          </PublicRoute>
+          <PublicRoute path="/gallery/:galleryId" exact>
+            <Project />
+          </PublicRoute>
          {/* User-Projects */}
          <PrivateRoute path="/project" exact>
            <ProjectHome/>
@ -64,12 +77,20 @@ class Routes extends Component {
            <MyBadges />
          </PrivateRoute>
          {/* settings */}
-          <Route path="/settings" exact component={Settings} />
+          <PublicRoute path="/settings" exact>
+            <Settings />
+          </PublicRoute>
          {/* privacy */}
-          <Route path="/impressum" exact component={Impressum} />
-          <Route path="/privacy" exact component={Privacy} />
+          <PublicRoute path="/impressum" exact>
+            <Impressum />
+          </PublicRoute>
+          <PublicRoute path="/privacy" exact>
+            <Privacy />
+          </PublicRoute>
          {/* Not Found */}
-          <Route component={NotFound} />
+          <PublicRoute>
+            <NotFound />
+          </PublicRoute>
        </Switch>
      </div>
    );
--- a/src/components/Settings/LanguageSelector.js
+++ b/src/components/Settings/LanguageSelector.js
@ -1,43 +1,58 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setLanguage } from '../../actions/generalActions';
+
+import * as Blockly from 'blockly/core';
+
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';

-const useStyles = makeStyles((theme) => ({
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 120,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
+class LanguageSelector extends Component {

-export default function LanguageSelector() {
-    const classes = useStyles();
-    const [lang, setLang] = React.useState(window.localStorage.getItem('locale'));
+  componentDidMount(){
+    // Ensure that Blockly.setLocale is adopted in the component.
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }

-    const handleChange = (event) => {
-        setLang(event.target.value);
-        window.localStorage.setItem('locale', event.target.value);
-    };
+  handleChange = (event) => {
+    this.props.setLanguage(event.target.value);
+  }

-    return (
-        <div>
-            <FormControl className={classes.formControl}>
-                <InputLabel id="demo-simple-select-label">Sprache</InputLabel>
-                <Select
-                    labelId="demo-simple-select-label"
-                    id="demo-simple-select"
-                    value={lang}
-                    onChange={handleChange}
-                >
-                    <MenuItem value={'de'}>Deutsch</MenuItem>
-                    <MenuItem value={'en'}>English</MenuItem>
-                </Select>
-            </FormControl>
-        </div>
+  render(){
+    return(
+      <div>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_language_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={this.props.language}
+            onChange={this.handleChange}
+          >
+            <MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem>
+            <MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
    );
+  }
 }
+
+LanguageSelector.propTypes = {
+  setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setLanguage })(LanguageSelector);
--- a/src/components/Settings/RenderSelector.js
+++ b/src/components/Settings/RenderSelector.js
@ -1,45 +1,57 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setRenderer } from '../../actions/generalActions';
+
+import * as Blockly from 'blockly/core'
+
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';

-const useStyles = makeStyles((theme) => ({
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 400,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));

-export default function RenderSelector() {
-    const classes = useStyles();
-    const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
+class RenderSelector extends Component {

-    const handleChange = (event) => {
-        setRenderer(event.target.value);
-        window.localStorage.setItem('renderer', event.target.value);
-    };
+  componentDidMount(){
+    // Ensure that Blockly.setLocale is adopted in the component.
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }

+  render(){
    return (
-        <div>
-            <FormControl className={classes.formControl}>
-                <InputLabel id="demo-simple-select-label">Renderer</InputLabel>
-                <Select
-                    labelId="demo-simple-select-label"
-                    id="demo-simple-select"
-                    value={renderer}
-                    onChange={handleChange}
-
-                >
-                    <MenuItem value={'geras'}>Geras</MenuItem>
-                    <MenuItem value={'zelos'}>Zelos</MenuItem>
-                </Select>
-            </FormControl>
-            <p>Der Renderer bestimmt das aussehen der Blöcke</p>
-        </div>
+      <div>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_renderer}</Typography>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_renderer_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_renderer}</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={this.props.renderer}
+            onChange={(e) => this.props.setRenderer(e.target.value)}
+          >
+            <MenuItem value={'geras'}>Geras</MenuItem>
+            <MenuItem value={'zelos'}>Zelos</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
    );
+  }
 }
+
+RenderSelector.propTypes = {
+  setRenderer: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  renderer: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  renderer: state.general.renderer,
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setRenderer })(RenderSelector);
--- a/src/components/Settings/Settings.js
+++ b/src/components/Settings/Settings.js
@ -1,32 +1,65 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
 import { withRouter } from 'react-router-dom';

-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import * as Blockly from 'blockly/core';
+
+import Breadcrumbs from '../Breadcrumbs';
 import LanguageSelector from './LanguageSelector';
 import RenderSelector from './RenderSelector';
 import StatsSelector from './StatsSelector';

+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';

 class Settings extends Component {
-    render() {
-        return (
-            <div>
-                <Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
-                <LanguageSelector />
-                <RenderSelector />
-                <StatsSelector />
-                <Button
-                    style={{ marginTop: '20px' }}
-                    variant="contained"
-                    color="primary"
-                    onClick={() => { this.props.history.push('/') }}
-                >
-                    Zurück zur Startseite
-            </Button>
-            </div>
-        );
-    };
+
+  componentDidMount(){
+    // Ensure that Blockly.setLocale is adopted in the component.
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }
+
+  render() {
+    return (
+      <div>
+        <Breadcrumbs content={[{ link: this.props.location.pathname, title: Blockly.Msg.settings_head }]} />
+
+        <h1>{Blockly.Msg.settings_head}</h1>
+
+        <Paper style={{margin: '10px 0px', padding: '10px'}}>
+          <LanguageSelector />
+        </Paper>
+        <Paper style={{margin: '10px 0px', padding: '10px'}}>
+          <RenderSelector />
+        </Paper>
+        <Paper style={{margin: '10px 0px', padding: '10px'}}>
+          <StatsSelector />
+        </Paper>
+
+        <Button
+          style={{ marginTop: '10px' }}
+          variant="contained"
+          color="primary"
+          onClick={this.props.pageVisits > 0 ? () => this.props.history.goBack() : () => this.props.history.push('/')}
+        >
+          {Blockly.Msg.button_back}
+        </Button>
+      </div>
+    );
+  };
 }

-export default withRouter(Settings);
+Settings.propTypes = {
+  language: PropTypes.string.isRequired,
+  pageVisits: PropTypes.number.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language,
+  pageVisits: state.general.pageVisits
+});
+
+export default connect(mapStateToProps, null)(withRouter(Settings));
--- a/src/components/Settings/StatsSelector.js
+++ b/src/components/Settings/StatsSelector.js
@ -1,44 +1,56 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setStatistics } from '../../actions/generalActions';
+
+import * as Blockly from 'blockly/core'
+
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';

-const useStyles = makeStyles((theme) => ({
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 400,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
+class StatsSelector extends Component {

-export default function StatsSelector() {
-    const classes = useStyles();
-    const [stats, setStats] = React.useState(window.localStorage.getItem('stats'));
-
-    const handleChange = (event) => {
-        setStats(event.target.value);
-        window.localStorage.setItem('stats', event.target.value);
-    };
+  componentDidMount(){
+    // Ensure that Blockly.setLocale is adopted in the component.
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }

+  render(){
    return (
-        <div>
-            <FormControl className={classes.formControl}>
-                <InputLabel id="demo-simple-select-label">Statistiken</InputLabel>
-                <Select
-                    labelId="demo-simple-select-label"
-                    id="demo-simple-select"
-                    value={stats}
-                    onChange={handleChange}
-                >
-                    <MenuItem value={true}>On</MenuItem>
-                    <MenuItem value={false}>Off</MenuItem>
-                </Select>
-            </FormControl>
-            <p>Schaltet die Statistiken Oberhalb der Arbeitsfläche ein bzw. aus</p>
-        </div>
+      <div>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_statistics}</Typography>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_statistics_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_statistics}</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={this.props.statistics}
+            onChange={(e) => this.props.setStatistics(e.target.value)}
+          >
+            <MenuItem value={true}>{Blockly.Msg.settings_statistics_on}</MenuItem>
+            <MenuItem value={false}>{Blockly.Msg.settings_statistics_off}</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
    );
+  }
 }
+
+StatsSelector.propTypes = {
+  setStatistics: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  statistics: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = state => ({
+  statistics: state.general.statistics,
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setStatistics })(StatsSelector);
--- a/src/components/Tutorial/Assessment.js
+++ b/src/components/Tutorial/Assessment.js
@ -11,6 +11,7 @@ import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
+import * as Blockly from 'blockly'

 class Assessment extends Component {

@ -45,7 +46,7 @@ class Assessment extends Component {
          </Grid>
          <Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
            <Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
-              <Typography variant='h5'>Arbeitsauftrag</Typography>
+              <Typography variant='h5'>{Blockly.Msg.tutorials_assessment_task}</Typography>
              <Typography>{currentTask.text}</Typography>
            </Card>
            <div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
--- a/src/components/Tutorial/Badge.js
+++ b/src/components/Tutorial/Badge.js
@ -11,6 +11,7 @@ import { withStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Avatar from '@material-ui/core/Avatar';
+import * as Blockly from 'blockly';

 const styles = (theme) => ({
  link: {
@ -32,22 +33,22 @@ class Badge extends Component {
    content: ''
  };

-  componentDidUpdate(props){
-    if(this.props.message.id === 'TUTORIAL_CHECK_SUCCESS'){
-      if(this.props.tutorial.badge){
+  componentDidUpdate(props) {
+    if (this.props.message.id === 'TUTORIAL_CHECK_SUCCESS') {
+      if (this.props.tutorial.badge) {
        // is connected to MyBadges?
-        if(this.props.isAuthenticated && this.props.user && this.props.user.badge){
-          if(this.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)){
-            if(this.isSuccess()){
+        if (this.props.isAuthenticated && this.props.user && this.props.user.badge) {
+          if (this.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)) {
+            if (this.isSuccess()) {
              this.props.assigneBadge(this.props.tutorial.badge);
            }
          }
        }
      }
    }
-    if(props.message !== this.props.message){
-      if(this.props.message.id === 'ASSIGNE_BADGE_SUCCESS'){
-        this.setState({title: `Badge: ${this.props.message.msg.name}`, content: `Herzlichen Glückwunsch! Du hast den Badge ${this.props.message.msg.name} erhalten.`, open: true});
+    if (props.message !== this.props.message) {
+      if (this.props.message.id === 'ASSIGNE_BADGE_SUCCESS') {
+        this.setState({ title: `Badge: ${this.props.message.msg.name}`, content: `${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01} ${this.props.message.msg.name} ${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02}`, open: true });
      }
    }
  }
@ -57,7 +58,7 @@ class Badge extends Component {
    var status = this.props.status.filter(status => status._id === tutorialId)[0];
    var tasks = status.tasks;
    var success = tasks.filter(task => task.type === 'success').length / tasks.length;
-    if(success===1){
+    if (success === 1) {
      return true;
    }
    return false;
@ -74,21 +75,21 @@ class Badge extends Component {
        open={this.state.open}
        title={this.state.title}
        content={this.state.content}
-        onClose={() => {this.toggleDialog();}}
-        onClick={() => {this.toggleDialog();}}
-        button={'Schließen'}
+        onClose={() => { this.toggleDialog(); }}
+        onClick={() => { this.toggleDialog(); }}
+        button={Blockly.Msg.button_close}
      >
        <div style={{ marginTop: '10px' }}>
-          <Paper style={{textAlign: 'center'}}>
+          <Paper style={{ textAlign: 'center' }}>
            {this.props.message.msg.image && this.props.message.msg.image.path ?
-              <Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${this.props.message.msg.image.path}`} style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}/>
-            : <Avatar style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}></Avatar>}
-            <Typography variant='h6' style={{display: 'flex', cursor: 'default', paddingBottom: '6px'}}>
-              <div style={{flexGrow:1, marginLeft: '10px', marginRight: '10px'}}>{this.props.message.msg.name}</div>
+              <Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${this.props.message.msg.image.path}`} style={{ width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto' }} />
+              : <Avatar style={{ width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto' }}></Avatar>}
+            <Typography variant='h6' style={{ display: 'flex', cursor: 'default', paddingBottom: '6px' }}>
+              <div style={{ flexGrow: 1, marginLeft: '10px', marginRight: '10px' }}>{this.props.message.msg.name}</div>
            </Typography>
          </Paper>
-          <Typography style={{marginTop: '10px'}}>
-            Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du <Link to={'/user/badge'} className={this.props.classes.link}>hier</Link>.
+          <Typography style={{ marginTop: '10px' }}>
+            {Blockly.Msg.badges_explaination}<Link to={'/user/badge'} className={this.props.classes.link}>{Blockly.Msg.labels_here}</Link>.
          </Typography>
        </div>
      </Dialog>
--- a/src/components/Tutorial/Builder/Badge.js
+++ b/src/components/Tutorial/Builder/Badge.js
@ -0,0 +1,190 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { tutorialBadge, deleteProperty, setError, deleteError } from '../../../actions/tutorialBuilderActions';
+
+import axios from 'axios';
+
+import { withStyles } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+
+const styles = (theme) => ({
+  errorColor: {
+    color: `${theme.palette.error.dark} !important`
+  },
+  errorColorShrink: {
+    color: `rgba(0, 0, 0, 0.54) !important`
+  },
+  errorBorder: {
+    borderColor: `${theme.palette.error.dark} !important`
+  }
+});
+
+class Badge extends Component {
+
+  constructor(props){
+    super(props);
+    this.state={
+      checked: props.badge ? true : false,
+      badgeName: '',
+      filteredBadges: [],
+      badges: []
+    };
+  }
+
+  componentDidMount(){
+    this.getBadges();
+  }
+
+  componentDidUpdate(props){
+    if(props.badge !== this.props.badge){
+      this.setState({ checked: this.props.badge !== undefined ? true : false, badgeName: this.props.badge ? this.state.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
+    }
+  }
+
+  getBadges = () => {
+    axios.get(`${process.env.REACT_APP_MYBADGES_API}/badge`)
+      .then(res => {
+        this.setState({badges: res.data.badges, badgeName: this.props.badge ? res.data.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  deleteBadge = () => {
+    this.setState({ filteredBadges: [], badgeName: '' });
+    this.props.tutorialBadge(null);
+    this.props.setError(this.props.index, 'badge');
+  };
+
+  setBadge = (badge) => {
+    this.setState({ filteredBadges: [] });
+    this.props.tutorialBadge(badge._id);
+    this.props.deleteError(this.props.index, 'badge');
+  };
+
+  onChange = e => {
+    this.setState({ badgeName: e.target.value });
+  };
+
+  onChangeBadge = e => {
+    if(e.target.value && this.props.badge === null){
+      var filteredBadges = this.state.badges.filter(badge => new RegExp(e.target.value, 'i').test(badge.name));
+      if(filteredBadges.length < 1){
+        filteredBadges = ['Keine Übereinstimmung gefunden.'];
+      }
+      this.setState({filteredBadges: filteredBadges});
+    }
+    else {
+      this.setState({filteredBadges: []});
+    }
+  };
+
+  onChangeSwitch = (value) => {
+    var oldValue = this.state.checked;
+    this.setState({checked: value});
+    if(oldValue !== value){
+      if(value){
+        this.props.setError(this.props.index, 'badge');
+        this.props.tutorialBadge(null);
+      } else {
+        this.props.deleteError(this.props.index, 'badge');
+        this.props.tutorialBadge(undefined);
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
+        <FormControlLabel
+          labelPlacement="end"
+          label={"Badge"}
+          control={
+            <Switch
+              checked={this.state.checked}
+              onChange={(e) => this.onChangeSwitch(e.target.checked)}
+              color="primary"
+            />
+          }
+        />
+        {this.state.checked ?
+          <div style={{marginTop: '10px'}}>
+            <FormControl variant="outlined" fullWidth>
+              <InputLabel
+                htmlFor={'badge'}
+                classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
+              >
+                {'Badge'}
+              </InputLabel>
+              <OutlinedInput
+                style={{borderRadius: '25px'}}
+                classes={{notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
+                error={this.props.error}
+                value={this.state.badgeName}
+                label={'Badge'}
+                id={'badge'}
+                disabled={this.props.badge}
+                onChange={(e) => this.onChange(e)}
+                onInput={(e) => this.onChangeBadge(e)}
+                fullWidth={true}
+                endAdornment={
+                      <IconButton
+                        onClick={this.deleteBadge}
+                        edge="end"
+                      >
+                        <FontAwesomeIcon size='xs' icon={faTimes} />
+                      </IconButton>
+                    }
+              />
+              {this.props.error && this.state.filteredBadges.length === 0 ?
+              <FormHelperText className={this.props.classes.errorColor}>Wähle ein Badge aus.</FormHelperText>
+              : null}
+            </FormControl>
+            <List style={{paddingTop: 0}}>
+            {this.state.filteredBadges.map((badge, i) => (
+              badge === 'Keine Übereinstimmung gefunden.' ?
+                <ListItem button key={i} onClick={this.deleteBadge} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}>
+                  <ListItemText>{badge}</ListItemText>
+                </ListItem>
+              :
+              <ListItem button key={i} onClick={() => {this.setBadge(badge)}} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}>
+                <ListItemText>{`${badge.name}`}</ListItemText>
+              </ListItem>
+            ))}
+            </List>
+          </div>
+        : null}
+      </div>
+    );
+  };
+}
+
+Badge.propTypes = {
+  tutorialBadge: PropTypes.func.isRequired,
+  deleteProperty: PropTypes.func.isRequired,
+  setError: PropTypes.func.isRequired,
+  deleteError: PropTypes.func.isRequired,
+  badge: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  badge: state.builder.badge,
+  change: state.builder.change
+});
+
+
+export default connect(mapStateToProps, { tutorialBadge, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(Badge));
--- a/src/components/Tutorial/Builder/BlocklyExample.js
+++ b/src/components/Tutorial/Builder/BlocklyExample.js
@ -29,7 +29,7 @@ const styles = (theme) => ({
    marginTop: '5px',
    height: '40px',
    backgroundColor: theme.palette.error.dark,
-    '&:hover':{
+    '&:hover': {
      backgroundColor: theme.palette.error.dark
    }
  }
@ -37,16 +37,16 @@ const styles = (theme) => ({

 class BlocklyExample extends Component {

-  constructor(props){
+  constructor(props) {
    super(props);
-    this.state={
+    this.state = {
      checked: props.task ? props.task : props.value ? true : false,
      input: null,
      disabled: false
    };
  }

-  componentDidMount(){
+  componentDidMount() {
    moment.updateLocale('de', localization);
    this.isError();
    // if(this.props.task){
@ -54,42 +54,42 @@ class BlocklyExample extends Component {
    // }
  }

-  componentDidUpdate(props, state){
-    if(props.task !== this.props.task || props.value !== this.props.value){
-      this.setState({checked: this.props.task ? this.props.task : this.props.value ? true : false},
+  componentDidUpdate(props, state) {
+    if (props.task !== this.props.task || props.value !== this.props.value) {
+      this.setState({ checked: this.props.task ? this.props.task : this.props.value ? true : false },
        () => this.isError()
      );
    }
-    if(state.checked !== this.state.checked && this.state.checked){
+    if (state.checked !== this.state.checked && this.state.checked) {
      this.isError();
    }
-    if(props.xml !== this.props.xml){
+    if (props.xml !== this.props.xml) {
      // check if there is at least one block, otherwise the workspace cannot be submitted
      var workspace = Blockly.getMainWorkspace();
      var areBlocks = workspace.getAllBlocks().length > 0;
-      this.setState({disabled: !areBlocks});
+      this.setState({ disabled: !areBlocks });
    }
  }

  isError = () => {
-    if(this.state.checked){
+    if (this.state.checked) {
      var xml = this.props.value;
      // check if value is valid xml;
-      try{
+      try {
        Blockly.Xml.textToDom(xml);
        this.props.deleteError(this.props.index, 'xml');
      }
-      catch(err){
+      catch (err) {
        xml = initialXml;
        // not valid xml, throw error in redux store
        this.props.setError(this.props.index, 'xml');
      }
-      if(!this.props.task){
+      if (!this.props.task) {
        // instruction can also display only one block, which does not necessarily
        // have to be the initial block
        xml = xml.replace('deletable="false"', 'deletable="true"');
      }
-      this.setState({xml: xml});
+      this.setState({ xml: xml });
    }
    else {
      this.props.deleteError(this.props.index, 'xml');
@ -98,8 +98,8 @@ class BlocklyExample extends Component {

  onChange = (value) => {
    var oldValue = this.state.checked;
-    this.setState({checked: value});
-    if(oldValue !== value && !value){
+    this.setState({ checked: value });
+    if (oldValue !== value && !value) {
      this.props.deleteError(this.props.index, 'xml');
      this.props.deleteProperty(this.props.index, 'xml');
    }
@ -108,12 +108,12 @@ class BlocklyExample extends Component {
  setXml = () => {
    var xml = this.props.xml;
    this.props.changeContent(xml, this.props.index, 'xml');
-    this.setState({input: moment(Date.now()).format('LTS')});
+    this.setState({ input: moment(Date.now()).format('LTS') });
  }

  render() {
    return (
-      <div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
+      <div style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
        {!this.props.task ?
          <FormControlLabel
            labelPlacement="end"
@ -126,41 +126,42 @@ class BlocklyExample extends Component {
              />
            }
          />
-        : <FormLabel style={{color: 'black'}}>Musterlösung</FormLabel>}
+          : <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_solution}</FormLabel>}
        {this.state.checked ? !this.props.value || this.props.error ?
-          <FormHelperText style={{lineHeight: 'initial'}} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}'-Button klickst.`}</FormHelperText>
-        : this.state.input ? <FormHelperText style={{lineHeight: 'initial'}}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
-        : null}
+          <FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Reiche deine Blöcke ein, indem du auf den '${this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}'-Button klickst.`}</FormHelperText>
+          : this.state.input ? <FormHelperText style={{ lineHeight: 'initial' }}>Die letzte Einreichung erfolgte um {this.state.input} Uhr.</FormHelperText> : null
+          : null}
        {this.state.checked && !this.props.task ?
-          <FormHelperText style={{lineHeight: 'initial'}}>Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.</FormHelperText>
-        : null}
+          <FormHelperText style={{ lineHeight: 'initial' }}>{Blockly.Msg.builder_comment}</FormHelperText>
+          : null}
        {/* ensure that the correct xml-file is displayed in the workspace */}
-        {this.state.checked && this.state.xml? (() => {
-          return(
-            <div style={{marginTop: '10px'}}>
+        {this.state.checked && this.state.xml ? (() => {
+          return (
+            <div style={{ marginTop: '10px' }}>
              <Grid container className={!this.props.value || this.props.error ? this.props.classes.errorBorder : null}>
                <Grid item xs={12}>
                  <BlocklyWindow
                    blockDisabled={this.props.task}
                    trashcan={false}
                    initialXml={this.state.xml}
-                    blocklyCSS={{height: '500px'}}
+                    blocklyCSS={{ height: '500px' }}
                  />
                </Grid>
              </Grid>
              <Button
-                className={!this.props.value || this.props.error ? this.props.classes.errorButton : null }
-                style={{marginTop: '5px', height: '40px'}}
+                className={!this.props.value || this.props.error ? this.props.classes.errorButton : null}
+                style={{ marginTop: '5px', height: '40px' }}
                variant='contained'
                color='primary'
                disabled={this.state.disabled}
                onClick={() => this.setXml()}
              >
-                {this.props.task ? 'Musterlösung einreichen' : 'Beispiel einreichen'}
+                {this.props.task ? Blockly.Msg.builder_solution_submit : Blockly.Msg.builder_example_submit}
              </Button>
            </div>
-          )})()
-        : null}
+          )
+        })()
+          : null}
      </div>
    );
  };
@ -179,4 +180,4 @@ const mapStateToProps = state => ({
 });


-export default connect(mapStateToProps, { changeContent, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(BlocklyExample));
+export default connect(mapStateToProps, { changeContent, deleteProperty, setError, deleteError })(withStyles(styles, { withTheme: true })(BlocklyExample));
--- a/src/components/Tutorial/Builder/Builder.js
+++ b/src/components/Tutorial/Builder/Builder.js
@ -2,16 +2,15 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder} from '../../../actions/tutorialBuilderActions';
-import { getTutorials, resetTutorial, deleteTutorial } from '../../../actions/tutorialActions';
+import { getTutorials, resetTutorial, deleteTutorial, tutorialProgress } from '../../../actions/tutorialActions';
 import { clearMessages } from '../../../actions/messageActions';

 import axios from 'axios';
 import { withRouter } from 'react-router-dom';

-import { saveAs } from 'file-saver';
-import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace';

 import Breadcrumbs from '../../Breadcrumbs';
+import Badge from './Badge';
 import Textfield from './Textfield';
 import Step from './Step';
 import Dialog from '../../Dialog';
@ -43,7 +42,7 @@ const styles = (theme) => ({
    marginTop: '5px',
    height: '40px',
    backgroundColor: theme.palette.error.dark,
-    '&:hover':{
+    '&:hover': {
      backgroundColor: theme.palette.error.dark
    }
  }
@ -68,20 +67,29 @@ class Builder extends Component {
  }

  componentDidMount() {
-    this.props.getTutorials();
+    this.props.tutorialProgress();
+    // retrieve tutorials only if a potential user is loaded - authentication
+    // is finished (success or failed)
+    if(!this.props.authProgress){
+      this.props.getTutorials();
+    }
  }

  componentDidUpdate(props, state) {
+    if(props.authProgress !== this.props.authProgress && !this.props.authProgress){
+      // authentication is completed
+      this.props.getTutorials();
+    }
    if(props.message !== this.props.message){
      if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
        // alert(this.props.message.msg);
        this.props.clearMessages();
      }
-      else if(this.props.message.id === 'TUTORIAL_DELETE_SUCCESS'){
+      else if (this.props.message.id === 'TUTORIAL_DELETE_SUCCESS') {
        this.onChange('new');
        this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich gelöscht.`, type: 'success' });
      }
-      else if(this.props.message.id === 'TUTORIAL_DELETE_FAIL'){
+      else if (this.props.message.id === 'TUTORIAL_DELETE_FAIL') {
        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`, type: 'error' });
      }
    }
@ -90,7 +98,7 @@ class Builder extends Component {
  componentWillUnmount() {
    this.resetFull();
    this.props.resetTutorial();
-    if(this.props.message.msg){
+    if (this.props.message.msg) {
      this.props.clearMessages();
    }
  }
@ -143,12 +151,12 @@ class Builder extends Component {
  onChange = (value) => {
    this.props.resetTutorialBuilder();
    this.props.tutorialId('');
-    this.setState({tutorial: value});
+    this.setState({ tutorial: value });
  }

  onChangeId = (value) => {
    this.props.tutorialId(value);
-    if(this.state.tutorial === 'change'){
+    if (this.state.tutorial === 'change') {
      this.props.progress(true);
      var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0];
      this.props.readJSON(tutorial);
@ -181,13 +189,18 @@ class Builder extends Component {
      var steps = this.props.steps;
      var newTutorial = new FormData();
      newTutorial.append('title', this.props.title);
-      newTutorial.append('badge', this.props.badge);
+      if(this.props.badge){
+        newTutorial.append('badge', this.props.badge);
+      }
      steps.forEach((step, i) => {
+        if(step._id){
+          newTutorial.append(`steps[${i}][_id]`, step._id);
+        }
        newTutorial.append(`steps[${i}][type]`, step.type);
        newTutorial.append(`steps[${i}][headline]`, step.headline);
        newTutorial.append(`steps[${i}][text]`, step.text);
-        if(i === 0 && step.type === 'instruction'){
-          if(step.requirements){ // optional
+        if (i === 0 && step.type === 'instruction') {
+          if (step.requirements) { // optional
            step.requirements.forEach((requirement, j) => {
              newTutorial.append(`steps[${i}][requirements][${j}]`, requirement);
            });
@ -196,14 +209,14 @@ class Builder extends Component {
            newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
          });
        }
-        if(step.xml){ // optional
+        if (step.xml) { // optional
          newTutorial.append(`steps[${i}][xml]`, step.xml);
        }
-        if(step.media){ // optional
-          if(step.media.youtube){
+        if (step.media) { // optional
+          if (step.media.youtube) {
            newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube);
          }
-          if(step.media.picture){
+          if (step.media.picture) {
            newTutorial.append(`steps[${i}][media][picture]`, step.media.picture);
          }
        }
@ -215,14 +228,22 @@ class Builder extends Component {
  submitNew = () => {
    var newTutorial = this.submit();
    if(newTutorial){
-      axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial)
-        .then(res => {
+      const config = {
+        success: res => {
          var tutorial = res.data.tutorial;
          this.props.history.push(`/tutorial/${tutorial._id}`);
-        })
-        .catch(err => {
+        },
+        error: err => {
          this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`, type: 'error' });
          window.scrollTo(0, 0);
+        }
+      };
+      axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial, config)
+        .then(res => {
+          res.config.success(res);
+        })
+        .catch(err => {
+          err.config.error(err);
        });
    }
  }
@ -230,14 +251,22 @@ class Builder extends Component {
  submitUpdate = () => {
    var updatedTutorial = this.submit();
    if(updatedTutorial){
-      axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial)
-        .then(res => {
+      const config = {
+        success: res => {
          var tutorial = res.data.tutorial;
          this.props.history.push(`/tutorial/${tutorial._id}`);
-        })
-        .catch(err => {
+        },
+        error: err => {
          this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`, type: 'error' });
          window.scrollTo(0, 0);
+        }
+      };
+      axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial, config)
+        .then(res => {
+          res.config.success(res);
+        })
+        .catch(err => {
+          err.config.error(err);
        });
    }
  }
@ -251,30 +280,30 @@ class Builder extends Component {
        <h1>Tutorial-Builder</h1>

        <RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}>
-          <FormControlLabel style={{color: 'black'}}
+          <FormControlLabel style={{ color: 'black' }}
            value="new"
            control={<Radio color="primary" />}
            label="neues Tutorial erstellen"
            labelPlacement="end"
          />
          {filteredTutorials.length > 0 ?
-          <div>
-            <FormControlLabel style={{color: 'black'}}
-              disabled={this.props.index === 0}
-              value="change"
-              control={<Radio color="primary" />}
-              label="bestehendes Tutorial ändern"
-              labelPlacement="end"
-            />
-            <FormControlLabel style={{color: 'black'}}
-              disabled={this.props.index === 0}
-              value="delete"
-              control={<Radio color="primary" />}
-              label="bestehendes Tutorial löschen"
-              labelPlacement="end"
-            />
-          </div>
-        : null}
+            <div>
+              <FormControlLabel style={{ color: 'black' }}
+                disabled={this.props.index === 0}
+                value="change"
+                control={<Radio color="primary" />}
+                label="bestehendes Tutorial ändern"
+                labelPlacement="end"
+              />
+              <FormControlLabel style={{ color: 'black' }}
+                disabled={this.props.index === 0}
+                value="delete"
+                control={<Radio color="primary" />}
+                label="bestehendes Tutorial löschen"
+                labelPlacement="end"
+              />
+            </div>
+            : null}
        </RadioGroup>

        <Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} />
@ -294,7 +323,7 @@ class Builder extends Component {
            </label>
            <Button style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button>
          </div>
-        : <FormControl variant="outlined" style={{width: '100%'}}>
+          : <FormControl variant="outlined" style={{ width: '100%' }}>
            <InputLabel id="select-outlined-label">Tutorial</InputLabel>
            <Select
              color='primary'
@ -320,30 +349,34 @@ class Builder extends Component {
            : null}
          {/* <Id error={this.props.error.id} value={this.props.id} /> */}
          <Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} />
-          <Textfield value={this.props.badge} property={'badge'} label={'Badge'} />
+          <Badge error={this.props.error.badge}/>

          {this.props.steps.map((step, i) =>
            <Step step={step} index={i} key={i} />
          )}

          {/*submit or reset*/}
-          <Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} />
-          {this.state.tutorial === 'new' ?
+          {this.state.tutorial !== 'delete' ?
            <div>
-              <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button>
-              <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button>
+              <Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} />
+              {this.state.tutorial === 'new' ?
+                <div>
+                  <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button>
+                  <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button>
+                </div>
+              : <div>
+                  <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button>
+                  <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button>
+                </div>
+              }
            </div>
-          : <div>
-            <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button>
-            <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button>
-          </div>
-          }
+          : null}

-          <Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
-            <CircularProgress color="inherit" />
-          </Backdrop>
-        </div>
-        : null}
+            <Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
+              <CircularProgress color="inherit" />
+            </Backdrop>
+          </div>
+          : null}

        {this.state.tutorial === 'delete' && this.props.id !== '' ?
          <Button
@ -351,7 +384,7 @@ class Builder extends Component {
            variant='contained'
            color='primary'
            onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button>
-        : null}
+          : null}

        <Dialog
          open={this.state.open}
@ -399,6 +432,7 @@ Builder.propTypes = {
  progress: PropTypes.func.isRequired,
  deleteTutorial: PropTypes.func.isRequired,
  resetTutorialBuilder: PropTypes.func.isRequired,
+  tutorialProgress: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  badge: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
@ -406,11 +440,11 @@ Builder.propTypes = {
  change: PropTypes.number.isRequired,
  error: PropTypes.object.isRequired,
  json: PropTypes.string.isRequired,
-  badge: PropTypes.string.isRequired,
  isProgress: PropTypes.bool.isRequired,
  tutorials: PropTypes.array.isRequired,
  message: PropTypes.object.isRequired,
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  authProgress: PropTypes.bool.isRequired
 };

 const mapStateToProps = state => ({
@ -425,6 +459,7 @@ const mapStateToProps = state => ({
  tutorials: state.tutorial.tutorials,
  message: state.message,
  user: state.auth.user,
+  authProgress: state.auth.progress
 });

-export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder)));
+export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, tutorialProgress, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder)));
--- a/src/components/Tutorial/Builder/Hardware.js
+++ b/src/components/Tutorial/Builder/Hardware.js
@ -12,6 +12,8 @@ import GridListTile from '@material-ui/core/GridListTile';
 import GridListTileBar from '@material-ui/core/GridListTileBar';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormLabel from '@material-ui/core/FormLabel';
+import * as Blockly from 'blockly'
+

 const styles = theme => ({
  multiGridListTile: {
@ -67,8 +69,8 @@ class Requirements extends Component {
    return (
      <div style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
        <FormLabel style={{ color: 'black' }}>Hardware</FormLabel>
-        <FormHelperText style={this.props.error ? { lineHeight: 'initial', marginTop: '5px' } : { marginTop: '5px', lineHeight: 'initial', marginBottom: '10px' }}>Beachte, dass die Reihenfolge des Auswählens maßgebend ist.</FormHelperText>
-        {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Wähle mindestens eine Hardware-Komponente aus.</FormHelperText> : null}
+        <FormHelperText style={this.props.error ? { lineHeight: 'initial', marginTop: '5px' } : { marginTop: '5px', lineHeight: 'initial', marginBottom: '10px' }}>{Blockly.Msg.builder_hardware_order}</FormHelperText>
+        {this.props.error ? <FormHelperText className={this.props.classes.errorColor}>{Blockly.Msg.builder_hardware_helper}</FormHelperText> : null}
        <GridList cellHeight={100} cols={cols} spacing={10}>
          {hardware.map((picture, i) => (
            <GridListTile key={i} onClick={() => this.onChange(picture.id)} classes={{ tile: this.props.value.filter(value => value === picture.id).length > 0 ? this.props.classes.active : this.props.classes.border }}>
--- a/src/components/Tutorial/Builder/Requirements.js
+++ b/src/components/Tutorial/Builder/Requirements.js
@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { changeContent } from '../../../actions/tutorialBuilderActions';
-import { getTutorials, resetTutorial } from '../../../actions/tutorialActions';
-import { clearMessages } from '../../../actions/messageActions';

 import FormGroup from '@material-ui/core/FormGroup';
 import Checkbox from '@material-ui/core/Checkbox';
@ -11,7 +9,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
-
+import * as Blockly from 'blockly'
 class Requirements extends Component {

  onChange = (e) => {
@ -29,8 +27,8 @@ class Requirements extends Component {
  render() {
    return (
      <FormControl style={{ marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)' }}>
-        <FormLabel style={{ color: 'black' }}>Voraussetzungen</FormLabel>
-        <FormHelperText style={{ marginTop: '5px' }}>Beachte, dass die Reihenfolge des Anhakens maßgebend ist.</FormHelperText>
+        <FormLabel style={{ color: 'black' }}>{Blockly.Msg.builder_requirements_head}</FormLabel>
+        <FormHelperText style={{ marginTop: '5px' }}>{Blockly.Msg.builder_requirements_order}</FormHelperText>
        <FormGroup>
          {this.props.tutorials.filter(tutorial => tutorial._id !== this.props.id).map((tutorial, i) =>
            <FormControlLabel
--- a/src/components/Tutorial/Hardware.js
+++ b/src/components/Tutorial/Hardware.js
@ -15,7 +15,7 @@ import GridListTileBar from '@material-ui/core/GridListTileBar';

 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
-
+import * as Blockly from 'blockly'
 const styles = theme => ({
  expand: {
    '&:hover': {
@ -56,7 +56,7 @@ class Hardware extends Component {
    var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
    return (
      <div style={{ marginTop: '10px', marginBottom: '5px' }}>
-        <Typography>Für die Umsetzung benötigst du folgende Hardware:</Typography>
+        <Typography>{Blockly.Msg.tutorials_hardware_head}</Typography>

        <GridList cellHeight={100} cols={cols} spacing={10}>
          {this.props.picture.map((picture, i) => {
@ -91,11 +91,11 @@ class Hardware extends Component {
          content={this.state.content}
          onClose={this.handleClose}
          onClick={this.handleClose}
-          button={'Schließen'}
+          button={Blockly.Msg.button_close}
        >
          <div>
            <img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name} />
-            Weitere Informationen zur Hardware-Komponente findest du <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">hier</Link>.
+            {Blockly.Msg.tutorials_hardware_moreInformation} <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">{Blockly.Msg.tutorials_hardware_here}</Link>.
          </div>
        </Dialog>

--- a/src/components/Tutorial/HintTutorialExists.js
+++ b/src/components/Tutorial/HintTutorialExists.js
@ -9,6 +9,7 @@ import Dialog from '../Dialog';
 import { withStyles } from '@material-ui/core/styles';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import * as Blockly from 'blockly'

 const styles = (theme) => ({
  link: {
@ -45,7 +46,7 @@ class HintTutorialExists extends Component {
      window.localStorage.setItem('news', e.target.checked);
    }
    else {
-      window.localStorage.deleteItem('news');
+      window.localStorage.removeItem('news');
    }
  }

@ -56,30 +57,30 @@ class HintTutorialExists extends Component {
        fullWidth
        maxWidth={'sm'}
        open={this.state.open}
-        title={'Neuigkeiten'}
+        title={Blockly.Msg.messages_newblockly_head}
        content={''}
        onClose={this.toggleDialog}
        onClick={this.toggleDialog}
-        button={'Schließen'}
+        button={Blockly.Msg.button_close}
      >
        <div>
-          Es gibt ab jetzt Tutorials zu verschiedenen Themen. Schau mal <Link to="/tutorial" className={this.props.classes.link}>hier</Link> vorbei.
-          <FormControlLabel
-            style={{ marginTop: '20px' }}
-            classes={{ label: this.props.classes.label }}
-            control={
-              <Checkbox
-                size={'small'}
-                value={true}
-                checked={this.state.checked}
-                onChange={(e) => this.onChange(e)}
-                name="dialog"
-                color="primary"
-              />
-            }
-            label={'Dialog nicht mehr anzeigen'}
-          />
+          {Blockly.Msg.messages_newblockly_text}<Link to="/tutorial" className={this.props.classes.link}>test</Link>
        </div>
+        <FormControlLabel
+          style={{ marginTop: '20px' }}
+          classes={{ label: this.props.classes.label }}
+          control={
+            <Checkbox
+              size={'small'}
+              value={true}
+              checked={this.state.checked}
+              onChange={(e) => this.onChange(e)}
+              name="dialog"
+              color="primary"
+            />
+          }
+          label={Blockly.Msg.labels_donotshowagain}
+        />
      </Dialog>
    );
  };
--- a/src/components/Tutorial/Requirement.js
+++ b/src/components/Tutorial/Requirement.js
@ -13,6 +13,7 @@ import Tooltip from '@material-ui/core/Tooltip';

 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+import * as Blockly from 'blockly'

 const styles = theme => ({
  outerDiv: {
@ -63,7 +64,7 @@ class Requirement extends Component {
    var tutorialIds = requirements.map(requirement => requirement._id);
    return (
      <div style={{ marginTop: '20px', marginBottom: '5px' }}>
-        <Typography>Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:</Typography>
+        <Typography>{Blockly.Msg.tutorials_requirements}</Typography>
        <List component="div">
          {tutorialIds.map((tutorialId, i) => {
            var title = requirements[i].title
--- a/src/components/Tutorial/SolutionCheck.js
+++ b/src/components/Tutorial/SolutionCheck.js
@ -18,6 +18,8 @@ import Button from '@material-ui/core/Button';
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

+import * as Blockly from 'blockly'
+
 const styles = (theme) => ({
  compile: {
    backgroundColor: theme.palette.button.compile,
@ -57,7 +59,7 @@ class SolutionCheck extends Component {
    const steps = this.props.tutorial.steps;
    return (
      <div>
-        <Tooltip title='Lösung kontrollieren' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_check_solution} arrow>
          <IconButton
            className={this.props.classes.compile}
            style={{ width: '40px', height: '40px', marginRight: '5px' }}
@ -76,7 +78,7 @@ class SolutionCheck extends Component {
          content={this.state.msg.text}
          onClose={this.toggleDialog}
          onClick={this.toggleDialog}
-          button={'Schließen'}
+          button={Blockly.Msg.button_close}
        >
          {this.state.msg.type === 'success' ?
            <div style={{ marginTop: '20px', display: 'flex' }}>
@ -88,7 +90,7 @@ class SolutionCheck extends Component {
                  color="primary"
                  onClick={() => { this.toggleDialog(); this.props.history.push(`/tutorial/`) }}
                >
-                  Tutorials-Übersicht
+                  {Blockly.Msg.button_tutorial_overview}
                </Button>
                :
                <Button
@ -97,7 +99,7 @@ class SolutionCheck extends Component {
                  color="primary"
                  onClick={() => { this.toggleDialog(); this.props.tutorialStep(this.props.activeStep + 1) }}
                >
-                  nächster Schritt
+                  {Blockly.Msg.button_next}
                </Button>
              }
            </div>
--- a/src/components/Tutorial/StepperHorizontal.js
+++ b/src/components/Tutorial/StepperHorizontal.js
@ -51,7 +51,6 @@ class StepperHorizontal extends Component {

  render() {
    var tutorialId = this.props.tutorial._id;
-    var tutorialIndex = this.props.currentTutorialIndex;
    var status = this.props.status.filter(status => status._id === tutorialId)[0];
    var tasks = status.tasks;
    var error = tasks.filter(task => task.type === 'error').length > 0;
@ -71,7 +70,7 @@ class StepperHorizontal extends Component {
        <div className={this.props.classes.stepper}>
          <Button
            disabled//={tutorialIndex === 0}
-            //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
+          //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
          >
            {'<'}
          </Button>
@ -83,7 +82,7 @@ class StepperHorizontal extends Component {
          </Tooltip>
          <Button
            disabled//={tutorialIndex + 1 === tutorials.length}
-            //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
+          //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
          >
            {'>'}
          </Button>
--- a/src/components/Tutorial/Tutorial.js
+++ b/src/components/Tutorial/Tutorial.js
@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { workspaceName } from '../../actions/workspaceActions';
 import { clearMessages } from '../../actions/messageActions';
-import { getTutorial, resetTutorial, tutorialStep } from '../../actions/tutorialActions';
+import { getTutorial, resetTutorial, tutorialStep,tutorialProgress } from '../../actions/tutorialActions';
+
+import { withRouter } from 'react-router-dom';

 import Breadcrumbs from '../Breadcrumbs';
 import StepperHorizontal from './StepperHorizontal';
@ -12,7 +14,7 @@ import Instruction from './Instruction';
 import Assessment from './Assessment';
 import Badge from './Badge';
 import NotFound from '../NotFound';
-
+import * as Blockly from 'blockly'
 import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';


@ -22,14 +24,24 @@ import Button from '@material-ui/core/Button';
 class Tutorial extends Component {

  componentDidMount() {
-    this.props.getTutorial(this.props.match.params.tutorialId);
+    this.props.tutorialProgress();
+    // retrieve tutorial only if a potential user is loaded - authentication
+    // is finished (success or failed)
+    if(!this.props.progress){
+      console.log(this.props);
+      this.props.getTutorial(this.props.match.params.tutorialId);
+    }
  }

  componentDidUpdate(props, state) {
-    if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) {
+    if(props.progress !== this.props.progress && !this.props.progress){
+      // authentication is completed
      this.props.getTutorial(this.props.match.params.tutorialId);
    }
-    if(this.props.message.id === 'GET_TUTORIAL_FAIL'){
+    else if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) {
+      this.props.getTutorial(this.props.match.params.tutorialId);
+    }
+    if (this.props.message.id === 'GET_TUTORIAL_FAIL') {
      alert(this.props.message.msg);
    }
  }
@ -37,7 +49,7 @@ class Tutorial extends Component {
  componentWillUnmount() {
    this.props.resetTutorial();
    this.props.workspaceName(null);
-    if(this.props.message.msg){
+    if (this.props.message.msg) {
      this.props.clearMessages();
    }
  }
@ -47,37 +59,38 @@ class Tutorial extends Component {
      <div>
        {this.props.isLoading ? null :
          !this.props.tutorial ?
-            this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} /> : null
+            this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: Blockly.Msg.messages_GET_TUTORIAL_FAIL, link: '/tutorial' }} /> : null
            : (() => {
-                var tutorial = this.props.tutorial;
-                var steps = this.props.tutorial.steps;
-                var step = steps[this.props.activeStep];
-                var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
-                return(
-                  <div>
-                    <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} />
+              var tutorial = this.props.tutorial;
+              var steps = this.props.tutorial.steps;
+              var step = steps[this.props.activeStep];
+              var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
+              return (
+                <div>
+                  <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} />

-                    <StepperHorizontal />
-                    <Badge />
+                  <StepperHorizontal />
+                  <Badge />

-                    <div style={{ display: 'flex' }}>
-                      <StepperVertical steps={steps} />
-                      {/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
-                      <Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
-                        {step ?
-                          step.type === 'instruction' ?
-                            <Instruction step={step} />
-                            : <Assessment step={step} name={name} /> // if step.type === 'assessment'
-                          : null}
+                  <div style={{ display: 'flex' }}>
+                    <StepperVertical steps={steps} />
+                    {/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
+                    <Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
+                      {step ?
+                        step.type === 'instruction' ?
+                          <Instruction step={step} />
+                          : <Assessment step={step} name={name} /> // if step.type === 'assessment'
+                        : null}

-                        <div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
-                          <Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
-                          <Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button>
-                        </div>
-                      </Card>
-                    </div>
+                      <div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
+                        <Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
+                        <Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button>
+                      </div>
+                    </Card>
                  </div>
-              )})()
+                </div>
+              )
+            })()
        }
      </div>
    );
@ -89,13 +102,15 @@ Tutorial.propTypes = {
  resetTutorial: PropTypes.func.isRequired,
  clearMessages: PropTypes.func.isRequired,
  tutorialStep: PropTypes.func.isRequired,
+  tutorialProgress: PropTypes.func.isRequired,
  workspaceName: PropTypes.func.isRequired,
  status: PropTypes.array.isRequired,
  change: PropTypes.number.isRequired,
  activeStep: PropTypes.number.isRequired,
  tutorial: PropTypes.object.isRequired,
  isLoading: PropTypes.bool.isRequired,
-  message: PropTypes.object.isRequired
+  message: PropTypes.object.isRequired,
+  progress: PropTypes.bool.isRequired
 };

 const mapStateToProps = state => ({
@ -104,7 +119,8 @@ const mapStateToProps = state => ({
  activeStep: state.tutorial.activeStep,
  tutorial: state.tutorial.tutorials[0],
  isLoading: state.tutorial.progress,
-  message: state.message
+  message: state.message,
+  progress: state.auth.progress
 });

-export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, clearMessages, workspaceName })(Tutorial);
+export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, tutorialProgress, clearMessages, workspaceName })(withRouter(Tutorial));
--- a/src/components/Tutorial/TutorialHome.js
+++ b/src/components/Tutorial/TutorialHome.js
@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { getTutorials, resetTutorial } from '../../actions/tutorialActions';
+import { getTutorials, resetTutorial, tutorialProgress } from '../../actions/tutorialActions';
 import { clearMessages } from '../../actions/messageActions';

 import clsx from 'clsx';
@ -52,10 +52,19 @@ const styles = (theme) => ({
 class TutorialHome extends Component {

  componentDidMount() {
-    this.props.getTutorials();
+    this.props.tutorialProgress();
+    // retrieve tutorials only if a potential user is loaded - authentication
+    // is finished (success or failed)
+    if(!this.props.progress){
+      this.props.getTutorials();
+    }
  }

  componentDidUpdate(props, state) {
+    if(props.progress !== this.props.progress && !this.props.progress){
+      // authentication is completed
+      this.props.getTutorials();
+    }
    if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
      alert(this.props.message.msg);
    }
@ -120,12 +129,14 @@ class TutorialHome extends Component {
 TutorialHome.propTypes = {
  getTutorials: PropTypes.func.isRequired,
  resetTutorial: PropTypes.func.isRequired,
+  tutorialProgress: PropTypes.func.isRequired,
  clearMessages: PropTypes.func.isRequired,
  status: PropTypes.array.isRequired,
  change: PropTypes.number.isRequired,
  tutorials: PropTypes.array.isRequired,
  isLoading: PropTypes.bool.isRequired,
-  message: PropTypes.object.isRequired
+  message: PropTypes.object.isRequired,
+  progress: PropTypes.bool.isRequired
 };

 const mapStateToProps = state => ({
@ -133,7 +144,8 @@ const mapStateToProps = state => ({
  status: state.tutorial.status,
  tutorials: state.tutorial.tutorials,
  isLoading: state.tutorial.progress,
-  message: state.message
+  message: state.message,
+  progress: state.auth.progress
 });

-export default connect(mapStateToProps, { getTutorials, resetTutorial, clearMessages })(withStyles(styles, { withTheme: true })(TutorialHome));
+export default connect(mapStateToProps, { getTutorials, resetTutorial, clearMessages, tutorialProgress })(withStyles(styles, { withTheme: true })(TutorialHome));
--- a/src/components/User/Login.js
+++ b/src/components/User/Login.js
@ -19,7 +19,7 @@ import Divider from '@material-ui/core/Divider';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Link from '@material-ui/core/Link';
-
+import * as Blockly from 'blockly'

 export class Login extends Component {

@ -37,21 +37,21 @@ export class Login extends Component {
    };
  }

-  componentDidUpdate(props){
+  componentDidUpdate(props) {
    console.log(this.state.redirect);
    const { message } = this.props;
    if (message !== props.message) {
-      if(message.id === 'LOGIN_SUCCESS'){
-        if(this.state.redirect){
+      if (message.id === 'LOGIN_SUCCESS') {
+        if (this.state.redirect) {
          this.props.history.push(this.state.redirect);
        }
-        else{
+        else {
          this.props.history.goBack();
        }
      }
      // Check for login error
-      else if(message.id === 'LOGIN_FAIL'){
-        this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: 'Der Benutzername oder das Passwort ist nicht korrekt.', type: 'error' });
+      else if (message.id === 'LOGIN_FAIL') {
+        this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
      }
    }
  }
@ -62,8 +62,8 @@ export class Login extends Component {

  onSubmit = e => {
    e.preventDefault();
-    const {email, password} = this.state;
-    if(email !== '' && password !== ''){
+    const { email, password } = this.state;
+    if (email !== '' && password !== '') {
      // create user object
      const user = {
        email,
@ -71,7 +71,7 @@ export class Login extends Component {
      };
      this.props.login(user);
    } else {
-      this.setState({ snackbar: true, key: Date.now(), message: 'Gib sowohl ein Benutzername als auch ein Passwort ein.', type: 'error' });
+      this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_login_error, type: 'error' });
    }
  };

@ -83,15 +83,15 @@ export class Login extends Component {
    e.preventDefault();
  };

-  render(){
-    return(
+  render() {
+    return (
      <div>
-        <Breadcrumbs content={[{ link: '/user/login', title: 'Anmelden' }]} />
+        <Breadcrumbs content={[{ link: '/user/login', title: Blockly.Msg.button_login }]} />

-        <div style={{maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto'}}>
-          <h1>Anmelden</h1>
+        <div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
+          <h1>{Blockly.Msg.login_head}</h1>
          <Alert>
-            Zur Anmeldung ist ein Konto auf <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> Voraussetzung.
+            {Blockly.Msg.login_osem_account_01} <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> {Blockly.Msg.login_osem_account_02}.
          </Alert>
          <Snackbar
            open={this.state.snackbar}
@ -100,10 +100,10 @@ export class Login extends Component {
            key={this.state.key}
          />
          <TextField
-            style={{marginBottom: '10px'}}
+            style={{ marginBottom: '10px' }}
            // variant='outlined'
            type='text'
-            label='E-Mail oder Nutzername'
+            label={Blockly.Msg.labels_username}
            name='email'
            value={this.state.email}
            onChange={this.onChange}
@ -112,7 +112,7 @@ export class Login extends Component {
          <TextField
            // variant='outlined'
            type={this.state.showPassword ? 'text' : 'password'}
-            label='Passwort'
+            label={Blockly.Msg.labesl_password}
            name='password'
            value={this.state.password}
            InputProps={{
@ -133,18 +133,18 @@ export class Login extends Component {
            fullWidth={true}
          />
          <p>
-            <Button color="primary" variant='contained' onClick={this.onSubmit} style={{width: '100%'}}>
+            <Button color="primary" variant='contained' onClick={this.onSubmit} style={{ width: '100%' }}>
              {this.props.progress ?
-                <div style={{height: '24.5px'}}><CircularProgress color="inherit" size={20}/></div>
-              : 'Anmelden'}
+                <div style={{ height: '24.5px' }}><CircularProgress color="inherit" size={20} /></div>
+                : Blockly.Msg.button_login}
            </Button>
          </p>
-          <p style={{textAlign: 'center', fontSize: '0.8rem'}}>
-            <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">Passwort vergessen?</Link>
+          <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
+            <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">{Blockly.Msg.login_lostpassword}</Link>
          </p>
-          <Divider variant='fullWidth'/>
-          <p style={{textAlign: 'center', paddingRight: "34px", paddingLeft: "34px"}}>
-            Du hast noch kein Konto? Registriere dich auf <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
+          <Divider variant='fullWidth' />
+          <p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
+            {Blockly.Msg.login_createaccount}<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
          </p>
        </div>
      </div>
@ -156,7 +156,6 @@ Login.propTypes = {
  message: PropTypes.object.isRequired,
  login: PropTypes.func.isRequired,
  clearMessages: PropTypes.func.isRequired,
-  message: PropTypes.object.isRequired,
  progress: PropTypes.bool.isRequired
 };

--- a/src/components/User/MyBadges.js
+++ b/src/components/User/MyBadges.js
@ -94,13 +94,20 @@ export class MyBadges extends Component {

  getBadges = () => {
    this.setState({progress: true});
-    axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`)
+    const config = {
+      success: res => {
+        this.setState({badges: res.data.badges, progress: false});
+      },
+      error: err => {
+        this.setState({progress: false});
+      }
+    };
+    axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, config)
    .then(res => {
-      this.setState({badges: res.data.badges, progress: false});
+      res.config.success(res);
    })
    .catch(err => {
-      this.setState({progress: false});
-      console.log(err);
+      err.config.error(err);
    });
  };

--- a/src/components/Workspace/Compile.js
+++ b/src/components/Workspace/Compile.js
@ -17,6 +17,7 @@ import TextField from '@material-ui/core/TextField';

 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core';

 const styles = (theme) => ({
  backdrop: {
@ -85,7 +86,7 @@ class Compile extends Component {
      })
      .catch(err => {
        console.log(err);
-        this.setState({ progress: false, file: false, open: true, title: 'Fehler', content: 'Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal.' });
+        this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
      });
  }

@ -119,7 +120,7 @@ class Compile extends Component {
    return (
      <div style={{}}>
        {this.props.iconButton ?
-          <Tooltip title='Projekt kompilieren' arrow style={{ marginRight: '5px' }}>
+          <Tooltip title={Blockly.Msg.tooltip_compile_code} arrow style={{ marginRight: '5px' }}>
            <IconButton
              className={this.props.classes.iconButton}
              onClick={() => this.compile()}
@ -141,7 +142,7 @@ class Compile extends Component {
          content={this.state.content}
          onClose={this.toggleDialog}
          onClick={this.state.file ? () => { this.toggleDialog(); this.setState({ name: this.props.name }) } : this.toggleDialog}
-          button={this.state.file ? 'Abbrechen' : 'Schließen'}
+          button={this.state.file ? Blockly.Msg.button_cancel : Blockly.Msg.button_close}
        >
          {this.state.file ?
            <div style={{ marginTop: '10px' }}>
--- a/src/components/Workspace/DeleteProject.js
+++ b/src/components/Workspace/DeleteProject.js
@ -13,6 +13,7 @@ import Tooltip from '@material-ui/core/Tooltip';

 import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core';

 const styles = (theme) => ({
  buttonTrash: {
@ -43,12 +44,12 @@ class DeleteProject extends Component {
  }

  componentDidUpdate(props) {
-    if(this.props.message !== props.message){
-      if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
+    if (this.props.message !== props.message) {
+      if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
        this.props.history.push(`/${this.props.projectType}`);
      }
-      else if(this.props.message.id === 'PROJECT_DELETE_FAIL'){
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Projektes. Versuche es noch einmal.`, type: 'error' });
+      else if (this.props.message.id === 'PROJECT_DELETE_FAIL') {
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_delete_project_failed, type: 'error' });
      }
    }
  }
@ -56,7 +57,7 @@ class DeleteProject extends Component {
  render() {
    return (
      <div>
-        <Tooltip title='Projekt löschen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_delete_project} arrow>
          <IconButton
            className={this.props.classes.buttonTrash}
            onClick={() => this.props.deleteProject(this.props.projectType, this.props.project._id)}
--- a/src/components/Workspace/DownloadProject.js
+++ b/src/components/Workspace/DownloadProject.js
@ -12,6 +12,8 @@ import Tooltip from '@material-ui/core/Tooltip';

 import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core';
+

 const styles = (theme) => ({
  button: {
@ -40,7 +42,7 @@ class DownloadProject extends Component {
  render() {
    return (
      <div style={this.props.style}>
-        <Tooltip title='Projekt herunterladen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_download_project} arrow>
          <IconButton
            className={this.props.classes.button}
            onClick={() => this.downloadXmlFile()}
--- a/src/components/Workspace/OpenProject.js
+++ b/src/components/Workspace/OpenProject.js
@ -9,10 +9,7 @@ import Snackbar from '../Snackbar';
 import Dialog from '../Dialog';

 import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';

 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@ -97,7 +94,7 @@ class OpenProject extends Component {
            type="file"
          />
          <label htmlFor="open-blocks">
-            <Tooltip title='Projekt öffnen' arrow style={this.props.style}>
+            <Tooltip title={Blockly.Msg.tooltip_open_project} arrow style={this.props.style}>
              <div className={this.props.classes.button} style={{
                borderRadius: '50%', cursor: 'pointer', display: 'table-cell',
                verticalAlign: 'middle',
@ -115,7 +112,7 @@ class OpenProject extends Component {
          content={this.state.content}
          onClose={this.toggleDialog}
          onClick={this.toggleDialog}
-          button={'Schließen'}
+          button={Blockly.Msg.button_close}
        />
        <Snackbar
          open={this.state.snackbar}
--- a/src/components/Workspace/ResetWorkspace.js
+++ b/src/components/Workspace/ResetWorkspace.js
@ -58,7 +58,7 @@ class ResetWorkspace extends Component {
    if (!this.props.assessment) {
      this.props.workspaceName(createNameId());
    }
-    this.setState({ snackbar: true, type: 'success', key: Date.now(), message: 'Das Projekt wurde erfolgreich zurückgesetzt.' });
+    this.setState({ snackbar: true, type: 'success', key: Date.now(), message: Blockly.Msg.messages_reset_workspace_success });
  }


@ -66,7 +66,7 @@ class ResetWorkspace extends Component {
  render() {
    return (
      <div style={this.props.style}>
-        <Tooltip title='Workspace zurücksetzen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_reset_workspace} arrow>
          <IconButton
            className={this.props.classes.button}
            onClick={() => this.resetWorkspace()}
--- a/src/components/Workspace/SaveProject.js
+++ b/src/components/Workspace/SaveProject.js
@ -14,13 +14,14 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';

 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

+import * as Blockly from 'blockly/core'
+
 const styles = (theme) => ({
  button: {
    backgroundColor: theme.palette.primary.main,
@ -63,18 +64,18 @@ class SaveProject extends Component {
    if (props.description !== this.props.description) {
      this.setState({ description: this.props.description });
    }
-    if(this.props.message !== props.message){
-      if(this.props.message.id === 'PROJECT_UPDATE_SUCCESS'){
-        this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
+    if (this.props.message !== props.message) {
+      if (this.props.message.id === 'PROJECT_UPDATE_SUCCESS') {
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_PROJECT_UPDATE_SUCCESS, type: 'success' });
      }
-      else if(this.props.message.id === 'GALLERY_UPDATE_SUCCESS'){
-        this.setState({ snackbar: true, key: Date.now(), message: `Das Galerie-Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
+      else if (this.props.message.id === 'GALLERY_UPDATE_SUCCESS') {
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_GALLERY_UPDATE_SUCCESS, type: 'success' });
      }
-      else if(this.props.message.id === 'PROJECT_UPDATE_FAIL'){
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.`, type: 'error' });
+      else if (this.props.message.id === 'PROJECT_UPDATE_FAIL') {
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_PROJECT_UPDATE_FAIL, type: 'error' });
      }
-      else if(this.props.message.id === 'GALLERY_UPDATE_FAIL'){
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.`, type: 'error' });
+      else if (this.props.message.id === 'GALLERY_UPDATE_FAIL') {
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_GALLERY_UPDATE_FAIL, type: 'error' });
      }
    }
  }
@ -92,17 +93,25 @@ class SaveProject extends Component {
      xml: this.props.xml,
      title: this.props.name
    };
-    if(this.state.projectType === 'gallery'){
+    if (this.state.projectType === 'gallery') {
      body.description = this.state.description;
    }
-    axios.post(`${process.env.REACT_APP_BLOCKLY_API}/${this.state.projectType}`, body)
-      .then(res => {
+    const config = {
+      success: res => {
        var project = res.data[this.state.projectType];
        this.props.history.push(`/${this.state.projectType}/${project._id}`);
+      },
+      error: err => {
+        this.setState({ snackbar: true, key: Date.now(), message: `${Blockly.Msg.messages_gallery_save_fail_1} ${this.state.projectType === 'gallery' ? 'Galerie-' : ''} ${Blockly.Msg.messages_gallery_save_fail_2}`, type: 'error' });
+        window.scrollTo(0, 0);        
+      }
+    };
+    axios.post(`${process.env.REACT_APP_BLOCKLY_API}/${this.state.projectType}`, body, config)
+      .then(res => {
+        res.config.success(res);
      })
      .catch(err => {
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Speichern des ${this.state.projectType === 'gallery' ? 'Galerie-':''}Projektes. Versuche es noch einmal.`, type: 'error' });
-        window.scrollTo(0, 0);
+        err.config.error(err);
      });
  }

@ -112,7 +121,7 @@ class SaveProject extends Component {

  workspaceDescription = () => {
    this.props.setDescription(this.state.description);
-    this.setState({projectType: 'gallery'},
+    this.setState({ projectType: 'gallery' },
      () => this.saveProject()
    );
  }
@ -121,10 +130,10 @@ class SaveProject extends Component {
    console.log(1, this.props);
    return (
      <div style={this.props.style}>
-        <Tooltip title={this.state.projectType === 'project'? 'Projekt aktualisieren':'Projekt speichern'} arrow>
+        <Tooltip title={this.state.projectType === 'project' ? Blockly.Msg.tooltip_update_project : Blockly.Msg.tooltip_save_project} arrow>
          <IconButton
            className={this.props.classes.button}
-            onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => {this.setState({projectType: 'project'}, () => this.saveProject())}}
+            onClick={this.props.user.blocklyRole !== 'user' && (!this.props.project || this.props.user.email === this.props.project.creator) ? (e) => this.toggleMenu(e) : this.state.projectType === 'project' ? () => this.props.updateProject(this.state.projectType, this.props.project._id) : () => { this.setState({ projectType: 'project' }, () => this.saveProject()) }}
          >
            <FontAwesomeIcon icon={faSave} size="xs" />
          </IconButton>
@ -144,12 +153,12 @@ class SaveProject extends Component {
          onClose={this.toggleMenu}
        >
          <MenuItem
-            onClick={this.state.projectType === 'project' ? (e) => {this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id)} : (e) => {this.toggleMenu(e); this.setState({projectType: 'project'}, () => this.saveProject())}}
+            onClick={this.state.projectType === 'project' ? (e) => { this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id) } : (e) => { this.toggleMenu(e); this.setState({ projectType: 'project' }, () => this.saveProject()) }}
          >
-            {this.state.projectType === 'project' ? 'Projekt aktualisieren' : 'Projekt erstellen'}
+            {this.state.projectType === 'project' ? Blockly.Msg.tooltip_update_project : Blockly.Msg.tooltip_create_project}
          </MenuItem>
          <MenuItem
-            onClick={this.state.projectType === 'gallery' ? (e) => {this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id)} : (e) => {this.toggleMenu(e); this.setState({ open: true, title: 'Projekbeschreibung ergänzen', content: 'Bitte gib eine Beschreibung für das Galerie-Projekt ein und bestätige deine Angabe mit einem Klick auf \'Eingabe\'.'});}}
+            onClick={this.state.projectType === 'gallery' ? (e) => { this.toggleMenu(e); this.props.updateProject(this.state.projectType, this.props.project._id) } : (e) => { this.toggleMenu(e); this.setState({ open: true, title: 'Projekbeschreibung ergänzen', content: 'Bitte gib eine Beschreibung für das Galerie-Projekt ein und bestätige deine Angabe mit einem Klick auf \'Eingabe\'.' }); }}
          >
            {this.state.projectType === 'gallery' ? 'Galerie-Projekt aktualisieren' : 'Galerie-Projekt erstellen'}
          </MenuItem>
@ -165,13 +174,13 @@ class SaveProject extends Component {
          open={this.state.open}
          title={this.state.title}
          content={this.state.content}
-          onClose={() => {this.toggleDialog(); this.setState({ description: this.props.description });}}
-          onClick={() => {this.toggleDialog(); this.setState({ description: this.props.description });}}
+          onClose={() => { this.toggleDialog(); this.setState({ description: this.props.description }); }}
+          onClick={() => { this.toggleDialog(); this.setState({ description: this.props.description }); }}
          button={'Abbrechen'}
        >
          <div style={{ marginTop: '10px' }}>
            <TextField autoFocus fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
-            <Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => {this.workspaceDescription(); this.toggleDialog();}}>Eingabe</Button>
+            <Button disabled={!this.state.description} variant='contained' color='primary' onClick={() => { this.workspaceDescription(); this.toggleDialog(); }}>Eingabe</Button>
          </div>
        </Dialog>
      </div>
--- a/src/components/Workspace/Screenshot.js
+++ b/src/components/Workspace/Screenshot.js
@ -73,7 +73,7 @@ class Screenshot extends Component {
  render() {
    return (
      <div style={this.props.style}>
-        <Tooltip title='Screenshot erstellen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_screenshot} arrow>
          <IconButton
            className={this.props.classes.button}
            onClick={() => this.getSvg()}
--- a/src/components/Workspace/ShareProject.js
+++ b/src/components/Workspace/ShareProject.js
@ -19,6 +19,8 @@ import Typography from '@material-ui/core/Typography';
 import { faShareAlt, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

+import * as Blockly from 'blockly/core';
+
 const styles = (theme) => ({
  button: {
    backgroundColor: theme.palette.primary.main,
@ -59,18 +61,18 @@ class WorkspaceFunc extends Component {
  }

  componentDidUpdate(props) {
-    if(this.props.message !== props.message){
-      if(this.props.message.id === 'SHARE_SUCCESS' && (!this.props.multiple || this.props.message.status === this.props.project._id)){
-        this.setState({ share: true, open: true, title: 'Programm teilen', id: this.props.message.status });
+    if (this.props.message !== props.message) {
+      if (this.props.message.id === 'SHARE_SUCCESS' && (!this.props.multiple || this.props.message.status === this.props.project._id)) {
+        this.setState({ share: true, open: true, title: Blockly.Msg.messages_SHARE_SUCCESS, id: this.props.message.status });
      }
-      else if(this.props.message.id === 'SHARE_FAIL' && (!this.props.multiple || this.props.message.status === this.props.project._id)){
-        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.`, type: 'error' });
+      else if (this.props.message.id === 'SHARE_FAIL' && (!this.props.multiple || this.props.message.status === this.props.project._id)) {
+        this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_SHARE_FAIL, type: 'error' });
        window.scrollTo(0, 0);
      }
    }
  }

-  componentWillUnmount(){
+  componentWillUnmount() {
    this.props.clearMessages();
  }

@ -79,9 +81,9 @@ class WorkspaceFunc extends Component {
  }

  shareBlocks = () => {
-    if(this.props.projectType === 'project' && this.props.project.shared){
+    if (this.props.projectType === 'project' && this.props.project.shared) {
      // project is already shared
-      this.setState({ open: true, title: 'Programm teilen', id: this.props.project._id });
+      this.setState({ open: true, title: Blockly.Msg.messages_SHARE_SUCCESS, id: this.props.project._id });
    }
    else {
      this.props.shareProject(this.props.name || this.props.project.title, this.props.projectType, this.props.project ? this.props.project._id : undefined);
@ -91,7 +93,7 @@ class WorkspaceFunc extends Component {
  render() {
    return (
      <div style={this.props.style}>
-        <Tooltip title='Projekt teilen' arrow>
+        <Tooltip title={Blockly.Msg.tooltip_share_project} arrow>
          <IconButton
            className={this.props.classes.button}
            onClick={() => this.shareBlocks()}
@ -112,29 +114,28 @@ class WorkspaceFunc extends Component {
          content={this.state.content}
          onClose={this.toggleDialog}
          onClick={this.toggleDialog}
-          button={'Schließen'}
+          button={Blockly.Msg.button_close}
        >
          <div style={{ marginTop: '10px' }}>
            <Typography>Über den folgenden Link kannst du dein Programm teilen:</Typography>
            <Link to={`/share/${this.state.id}`} onClick={() => this.toggleDialog()} className={this.props.classes.link}>{`${window.location.origin}/share/${this.state.id}`}</Link>
-            <Tooltip title='Link kopieren' arrow style={{ marginRight: '5px' }}>
+            <Tooltip title={Blockly.Msg.tooltip_copy_link} arrow style={{ marginRight: '5px' }}>
              <IconButton
                onClick={() => {
                  navigator.clipboard.writeText(`${window.location.origin}/share/${this.state.id}`);
-                  this.setState({ snackbar: true, key: Date.now(), message: 'Link erfolgreich in Zwischenablage gespeichert.', type: 'success' });
+                  this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_copylink_success, type: 'success' });
                }}
              >
                <FontAwesomeIcon icon={faCopy} size="xs" />
              </IconButton>
            </Tooltip>
            {this.props.project && this.props.project.shared && this.props.message.id !== 'SHARE_SUCCESS' ?
-              <Typography variant='body2' style={{marginTop: '20px'}}>{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${
-                moment(this.props.project.shared).diff(moment().utc(), 'days') === 0 ?
-                  moment(this.props.project.shared).diff(moment().utc(), 'hours') === 0 ?
-                    `${moment(this.props.project.shared).diff(moment().utc(), 'minutes')} Minuten`
+              <Typography variant='body2' style={{ marginTop: '20px' }}>{`Das Projekt wurde bereits geteilt. Der Link ist noch mindestens ${moment(this.props.project.shared).diff(moment().utc(), 'days') === 0 ?
+                moment(this.props.project.shared).diff(moment().utc(), 'hours') === 0 ?
+                  `${moment(this.props.project.shared).diff(moment().utc(), 'minutes')} Minuten`
                  : `${moment(this.props.project.shared).diff(moment().utc(), 'hours')} Stunden`
                : `${moment(this.props.project.shared).diff(moment().utc(), 'days')} Tage`} gültig.`}</Typography>
-            : <Typography variant='body2' style={{marginTop: '20px'}}>{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography>}
+              : <Typography variant='body2' style={{ marginTop: '20px' }}>{`Der Link ist nun ${process.env.REACT_APP_SHARE_LINK_EXPIRES} Tage gültig.`}</Typography>}
          </div>
        </Dialog>
      </div>
--- a/src/components/Workspace/TrashcanButtons.js
+++ b/src/components/Workspace/TrashcanButtons.js
@ -36,8 +36,8 @@ class TrashcanButtons extends Component {
  componentDidUpdate(previousProps, previousState) {
    const workspace = Blockly.getMainWorkspace();
    const contentsIsOpen = workspace.trashcan.contentsIsOpen();
-    if(previousState.closeTrashFlyout !== contentsIsOpen){
-      this.setState({ closeTrashFlyout:  contentsIsOpen });
+    if (previousState.closeTrashFlyout !== contentsIsOpen) {
+      this.setState({ closeTrashFlyout: contentsIsOpen });
    }
  }

@ -59,26 +59,26 @@ class TrashcanButtons extends Component {
    return (
      this.state.closeTrashFlyout ?
        <div>
-          <Tooltip title='gelöschte Blöcke ausblenden'>
+          <Tooltip title={Blockly.Msg.tooltip_trashcan_hide}>
            <IconButton
              className={this.props.classes.closeTrash}
-              style={{width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
+              style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 10, zIndex: 21 }}
              onClick={() => this.closeTrashcan()}
            >
-              <FontAwesomeIcon icon={faTimes} size="xs"/>
+              <FontAwesomeIcon icon={faTimes} size="xs" />
            </IconButton>
          </Tooltip>
-          <Tooltip title='Blöcke endgültig löschen'>
+          <Tooltip title={Blockly.Msg.tooltip_trashcan_delete}>
            <IconButton
              className={this.props.classes.deleteTrash}
-              style={{width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
+              style={{ width: '40px', height: '40px', position: 'absolute', bottom: 10, right: 50, zIndex: 21 }}
              onClick={() => this.clearTrashcan()}
            >
-              <FontAwesomeIcon icon={faTrash} size="xs"/>
+              <FontAwesomeIcon icon={faTrash} size="xs" />
            </IconButton>
          </Tooltip>
        </div>
-      : null
+        : null
    );
  };
 }
--- a/src/components/Workspace/WorkspaceName.js
+++ b/src/components/Workspace/WorkspaceName.js
@ -16,6 +16,7 @@ import Typography from '@material-ui/core/Typography';

 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Blockly from 'blockly/core'

 const styles = (theme) => ({
  workspaceName: {
@ -72,31 +73,31 @@ class WorkspaceName extends Component {
  renameWorkspace = () => {
    this.props.workspaceName(this.state.name);
    this.toggleDialog();
-    if(this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery'){
-      if(this.props.projectType === 'gallery' || this.state.projectType === 'gallery'){
+    if (this.props.projectType === 'project' || this.props.projectType === 'gallery' || this.state.projectType === 'gallery') {
+      if (this.props.projectType === 'gallery' || this.state.projectType === 'gallery') {
        this.props.setDescription(this.state.description);
      }
-      if(this.state.projectType === 'gallery'){
+      if (this.state.projectType === 'gallery') {
        this.saveGallery();
      } else {
        this.props.updateProject(this.props.projectType, this.props.project._id);
      }
    } else {
-      this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
+      this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `${Blockly.Msg.messages_rename_success_01} ${this.state.name} ${Blockly.Msg.messages_rename_success_02}` });
    }
  }

  render() {
    return (
      <div style={this.props.style}>
-        <Tooltip title={`Titel des Projektes${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{height: '100%'}}>
+        <Tooltip title={`${Blockly.Msg.tooltip_project_title} ${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{ height: '100%' }}>
          <div
            className={this.props.classes.workspaceName}
-            onClick={() => {if(this.props.multiple){this.props.workspaceName(this.props.project.title);if(this.props.projectType === 'gallery'){this.props.setDescription(this.props.project.description);}} this.setState({ open: true, title: this.props.projectType === 'gallery' ? 'Projektdaten ändern': this.props.projectType === 'project' ? 'Projekt umbenennen' : 'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.':'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}
+            onClick={() => { if (this.props.multiple) { this.props.workspaceName(this.props.project.title); if (this.props.projectType === 'gallery') { this.props.setDescription(this.props.project.description); } } this.setState({ open: true, title: this.props.projectType === 'gallery' ? 'Projektdaten ändern' : this.props.projectType === 'project' ? 'Projekt umbenennen' : 'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.' : 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}
          >
-            {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl':'xs', this.props.width) ?
+            {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl' : 'xs', this.props.width) ?
              <Typography style={{ margin: 'auto -3px auto 12px' }}>{this.props.name}</Typography>
-            : null}
+              : null}
            <div style={{ width: '40px', display: 'flex' }}>
              <FontAwesomeIcon icon={faPen} style={{ height: '18px', width: '18px', margin: 'auto' }} />
            </div>
@ -113,17 +114,17 @@ class WorkspaceName extends Component {
          open={this.state.open}
          title={this.state.title}
          content={this.state.content}
-          onClose={() => {this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description });}}
-          onClick={() => {this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description });}}
+          onClose={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }}
+          onClick={() => { this.toggleDialog(); this.setState({ name: this.props.name, description: this.props.description }); }}
          button={'Abbrechen'}
        >
          <div style={{ marginTop: '10px' }}>
            {this.props.projectType === 'gallery' || this.state.projectType === 'gallery' ?
              <div>
-                <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{marginBottom: '10px'}}/>
+                <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginBottom: '10px' }} />
                <TextField fullWidth multiline placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
              </div>
-            : <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />}
+              : <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />}
            <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => { this.renameWorkspace(); this.toggleDialog(); }}>Eingabe</Button>
          </div>
        </Dialog>
--- a/src/reducers/authReducer.js
+++ b/src/reducers/authReducer.js
@ -5,7 +5,7 @@ const initialState = {
  token: localStorage.getItem('token'),
  refreshToken: localStorage.getItem('refreshToken'),
  isAuthenticated: null,
-  progress: false,
+  progress: true,
  user: null
 };

--- a/src/reducers/generalReducer.js
+++ b/src/reducers/generalReducer.js
@ -1,8 +1,35 @@
-import { VISIT } from '../actions/types';
+import { VISIT, LANGUAGE, RENDERER, STATISTICS } from '../actions/types';
+
+const initialLanguage = () => {
+  if (window.localStorage.getItem('locale')) {
+    return window.localStorage.getItem('locale');
+  }
+  if (navigator.language === 'de-DE'){
+    return 'de_DE';
+  }
+  return 'en_US';
+};
+
+const initialRenderer = () => {
+  if (window.localStorage.getItem('renderer')) {
+    return window.localStorage.getItem('renderer');
+  }
+  return 'geras';
+};
+
+const initialStatistics = () => {
+  if (window.localStorage.getItem('statistics')) {
+    return JSON.parse(window.localStorage.getItem('statistics'));
+  }
+  return false;
+};


 const initialState = {
-  pageVisits: 0 // detect if previous URL was
+  pageVisits: 0, // detect if previous URL was
+  language: initialLanguage(),
+  renderer: initialRenderer(),
+  statistics: initialStatistics()
 };

 export default function(state = initialState, action){
@ -12,6 +39,23 @@ export default function(state = initialState, action){
        ...state,
        pageVisits: state.pageVisits += 1
      };
+    case LANGUAGE:
+      return {
+        ...state,
+        language: action.payload
+      };
+    case RENDERER:
+      window.localStorage.setItem('renderer', action.payload);
+      return {
+        ...state,
+        renderer: action.payload
+      };
+    case STATISTICS:
+      window.localStorage.setItem('statistics', action.payload);
+      return {
+        ...state,
+        statistics: action.payload
+      };
    default:
      return state;
  }
--- a/src/reducers/tutorialBuilderReducer.js
+++ b/src/reducers/tutorialBuilderReducer.js
@ -5,7 +5,6 @@ const initialState = {
  progress: false,
  json: '',
  title: '',
-  badge: '',
  id: '',
  steps: [
    {
--- a/src/reducers/tutorialReducer.js
+++ b/src/reducers/tutorialReducer.js
@ -1,18 +1,20 @@
-import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types';
+import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, GET_STATUS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types';


-const initialStatus = () => {
-  if (window.localStorage.getItem('status')) {
-    var status = JSON.parse(window.localStorage.getItem('status'));
-    return status;
-  }
-  return [];
-  // // window.localStorage.getItem('status') does not exist
-  // return tutorials.map(tutorial => { return { id: tutorial.id, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) }; });
-};
+//
+// const initialStatus = () => {
+//   if(store.getState().auth.user){
+//     return store.getState().auth.user.status || []
+//   }
+//   else if (window.localStorage.getItem('status')) {
+//     var status = JSON.parse(window.localStorage.getItem('status'));
+//     return status;
+//   }
+//   return [];
+// };

 const initialState = {
-  status: initialStatus(),
+  status: [],
  activeStep: 0,
  change: 0,
  tutorials: [],
@ -39,8 +41,14 @@ export default function (state = initialState, action) {
    case TUTORIAL_SUCCESS:
    case TUTORIAL_ERROR:
    case TUTORIAL_XML:
-      // update locale storage - sync with redux store
-      window.localStorage.setItem('status', JSON.stringify(action.payload));
+      // update store - sync with redux store is implemented outside reducer
+      // in every dispatch action with the types 'TUTORIAL_SUCCESS','TUTORIAL_ERROR'
+      // and 'TUTORIAL_XML' the function 'updateStatus' is called
+      return {
+        ...state,
+        status: action.payload
+      };
+    case GET_STATUS:
      return {
        ...state,
        status: action.payload