pawelmalak · pawelmalak · Jun 18, 2021 · Jun 15, 2021 · Jun 15, 2021 · Jun 17, 2021
diff --git a/._env b/._env
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+PORT=5005
+NODE_ENV=development
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,2 @@
 node_modules/
-data/
-.env
+data/
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 ![Homescreen screenshot](./github/_home.png)
 
 ## Description
-Flame is self-hosted startpage for your server. It's inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui)
+Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors it allows you to setup your very own appliaction hub in no time - no file editing necessary.
 
 ## Technology
 - Backend
@@ -23,6 +23,7 @@ Flame is self-hosted startpage for your server. It's inspired (heavily) by [SUI]
 
 ## Development
 ```sh
+# clone repository
 git clone https://github.com/pawelmalak/flame
 cd flame
 
@@ -33,13 +34,23 @@ npm run dev-init
 npm run dev
 ```
 
-## Deployment with Docker
+## Building Docker images
 ```sh
-# build image
+# build image for amd64 only
 docker build -t flame .
 
+# build multiarch image for amd64, armv7 and arm64
+# building failed multiple times with 2GB memory usage limit so you might want to increase it
+docker buildx build \
+  --platform linux/arm/v7,linux/arm64,linux/amd64 \
+  -f Dockerfile.multiarch \
+  -t flame:multiarch .
+```
+
+## Deployment with Docker
+```sh
 # run container
-docker run -p 5005:5005 -v <host_dir>:/app/data flame
+docker run -p 5005:5005 -v /path/to/data:/app/data flame
 ```
 
 ## Functionality
@@ -73,4 +84,9 @@ docker run -p 5005:5005 -v <host_dir>:/app/data flame
   - Redirect: `https://{dest}`
 - URL without protocol
   - Format: `www.domain.com`, `domain.com`, `sub.domain.com`, `local`, `ip`, `ip:port`
-  - Redirect: `http://{dest}`
+  - Redirect: `http://{dest}`
+
+## Support
+If you want to support development of Flame and my upcoming self-hosted and open source projects you can use the following link:
+
+[![PayPal Badge](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/pawelmalak)
diff --git a/client/.env b/client/.env
@@ -1 +1 @@
-REACT_APP_VERSION=1.3.1
+REACT_APP_VERSION=1.4.0
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,12 +11,14 @@
     "@types/jest": "^26.0.23",
     "@types/node": "^12.20.12",
     "@types/react": "^17.0.5",
+    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.3",
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.21.1",
     "http-proxy-middleware": "^2.0.0",
     "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -5,6 +5,10 @@ import { getConfig, setTheme } from './store/actions';
 import { store } from './store/store';
 import { Provider } from 'react-redux';
 
+// Utils
+import { checkVersion } from './utility';
+
+// Routes
 import Home from './components/Home/Home';
 import Apps from './components/Apps/Apps';
 import Settings from './components/Settings/Settings';
@@ -14,10 +18,14 @@ import NotificationCenter from './components/NotificationCenter/NotificationCent
 // Get config pairs from database
 store.dispatch<any>(getConfig());
 
+// Set theme
 if (localStorage.theme) {
   store.dispatch<any>(setTheme(localStorage.theme));
 }
 
+// Check for updates
+checkVersion();
+
 const App = (): JSX.Element => {
   return (
     <Provider store={store}>

diff --git a/client/src/components/Apps/AppTable/AppTable.module.css b/client/src/components/Apps/AppTable/AppTable.module.css
@@ -9,4 +9,21 @@
 
 .TableAction:hover {
   cursor: pointer;
+}
+
+.Message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  color: var(--color-primary);
+  margin-bottom: 20px;
+}
+
+.Message a {
+  color: var(--color-accent);
+}
+
+.Message a:hover {
+  cursor: pointer;
 }