structured project with folders

better min preview height
correct sort by creation date

src/App.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import "./css/App.css"
-import HomePage from "./HomePage";
-import RandomPage from "./RandomPage";
+import HomePage from "./pages/HomePage";
+import RandomPage from "./pages/RandomPage";
 
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
-import SettingsPage from "./SettingsPage";
+import SettingsPage from "./pages/SettingsPage";
+import CategoryPage from "./pages/CategoryPage";
 
 class App extends React.Component {
     constructor(props, context) {
@@ -30,6 +31,9 @@ class App extends React.Component {
         } else if (this.state.page === "settings") {
             page = <SettingsPage/>;
             this.mypage = page;
+        } else if (this.state.page === "categories") {
+            page = <CategoryPage/>;
+            this.mypage = page;
         } else if (this.state.page === "video") {
             // show videoelement if neccessary
             page = this.videoelement;

src/css/Preview.css

@@ -13,6 +13,7 @@
 }
 
 .previewimage {
+    min-height: 150px;
     max-height: 400px;
     min-width: 266px;
     max-width: 410px;

src/elements/Preview.js

@@ -1,6 +1,6 @@
 import React from "react";
-import "./css/Preview.css";
-import Player from "./Player";
+import "../css/Preview.css";
+import Player from "../pages/Player";
 
 class Preview extends React.Component {
     constructor(props, context) {

src/elements/SideBar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "./css/SideBar.css"
+import "../css/SideBar.css"
 
 class SideBar extends React.Component {
     render() {

src/elements/Tag.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import "./css/Tag.css"
+import "../css/Tag.css"
 
 class Tag extends React.Component {
 
@@ -11,7 +11,7 @@ class Tag extends React.Component {
     }
 
     render() {
-        // todo onclick events correctly
+        // todo onclick events correctlyy
         return (
             <button className='tagbtn' onClick={this.props.onClick}>{this.props.children}</button>
         );

src/pages/CategoryPage.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+class CategoryPage extends React.Component{
+    render() {
+        return (
+            <>
+
+            </>
+        );
+    }
+}
+
+export default CategoryPage;

src/pages/HomePage.js

@@ -1,10 +1,10 @@
 import React from "react";
-import Preview from "./Preview";
-import SideBar from "./SideBar";
+import Preview from "../elements/Preview";
+import SideBar from "../elements/SideBar";
+import Tag from "../elements/Tag";
 
-import "./css/HomePage.css"
-import "./css/DefaultPage.css"
-import Tag from "./Tag";
+import "../css/HomePage.css"
+import "../css/DefaultPage.css"
 
 class HomePage extends React.Component {
     // stores all available movies

src/pages/Player.js

@@ -1,9 +1,9 @@
 import React from "react";
-import "./css/Player.css"
+import "../css/Player.css"
 import {PlyrComponent} from 'plyr-react';
-import SideBar from "./SideBar";
-import Tag from "./Tag";
-import AddTagPopup from "./AddTagPopup";
+import SideBar from "../elements/SideBar";
+import Tag from "../elements/Tag";
+import AddTagPopup from "../elements/AddTagPopup";
 
 
 class Player extends React.Component {

src/pages/RandomPage.js

@@ -1,8 +1,8 @@
 import React from "react";
-import Preview from "./Preview";
-import "./css/RandomPage.css"
-import SideBar from "./SideBar";
-import Tag from "./Tag";
+import Preview from "../elements/Preview";
+import "../css/RandomPage.css"
+import SideBar from "../elements/SideBar";
+import Tag from "../elements/Tag";
 
 class RandomPage extends React.Component {
     constructor(props, context) {

src/pages/SettingsPage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "./css/DefaultPage.css"
+import "../css/DefaultPage.css"
 
 
 class SettingsPage extends React.Component {