start adding some features

frontend/src/app.js

@@ -0,0 +1,26 @@
+const express = require( 'express' );
+let app = express();
+const path = require( 'path' );
+const fs = require( 'fs' );
+const bodyParser = require( 'body-parser' );
+const dialog = require( 'electron' ).dialog;
+
+app.use( bodyParser.urlencoded( { extended: false } ) );
+app.use( bodyParser.json() );
+
+
+app.get( '/', ( request, response ) => {
+    response.send( 'Hello world' );
+} );
+
+
+app.get( '/openSongs', ( req, res ) => {
+    res.send( { 'data': dialog.showOpenDialogSync( { properties: [ 'openDirectory' ], title: 'Open music library folder' } ) } );
+} );
+
+
+app.use( ( request, response, next ) => {
+    response.sendFile( path.join( __dirname + '' ) ) 
+} );
+
+app.listen( 8081 );

frontend/src/background.js

@@ -33,6 +33,7 @@ async function createWindow() {
     // Load the index.html when not in development
     win.loadURL('app://./index.html')
   }
+  require( './app.js' );
 }
 
 // Quit when all windows are closed.

frontend/src/components/mediaPool.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="media-pool">
+        <div v-if="hasLoadedSongs">
+            <div v-for="song in songQueue">{{ song }}</div>
+        </div>
+        <div v-else class="no-songs">
+            <h3>No songs loaded</h3>
+            <button @click="loadSongs()">Load songs</button>
+        </div>
+    </div>
+</template>
+
+<style>
+    .media-pool {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .no-songs {
+        height: 50vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+</style>
+
+<script>
+    export default {
+        name: 'HomeView',
+        data() {
+            return {
+                hasLoadedSongs: false,
+                songQueue: [],
+            }
+        },
+        methods: {
+            loadSongs() {
+                fetch( 'http://localhost:8081/openSongs' )
+            }
+        }
+    }
+</script>

frontend/src/components/player.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="player">
+        <div class="controls"></div>
+        <div class="song-info"></div>
+    </div>
+</template>
+
+<style>
+    .song-info {
+        background-color: var( --accent-background );
+        height: 80%;
+        width: 50%;
+    }
+</style>

frontend/src/views/HomeView.vue

@@ -1,17 +1,72 @@
 <template>
     <div class="home">
+        <div class="top-bar">
+            <img src="@/assets/logo.png" alt="logo" class="logo">
+            <div class="player-wrapper">
                 
             </div>
+        </div>
+        <div class="pool-wrapper">
+            <mediaPool></mediaPool>
+        </div>
+    </div>
 </template>
 
 <style>
+    .home {
+        width: 100%;
+        height: 100%;
+    }
+
+    .pool-wrapper {
+        height: 84vh;
+    }
+
+    .top-bar {
+        margin-left: auto;
+        margin-right: auto;
+        width: 99%;
+        height: 15vh;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        border: var( --primary-color ) 2px solid;
+    }
+
+    .player-wrapper {
+        width: 70vw;
+        margin-right: auto;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     .logo {
-        height: 50vh;
+        height: 90%;
+        margin-left: 3%;
+        margin-right: auto;
     }
 </style>
 
 <script>
+    import mediaPool from '@/components/mediaPool.vue';
+
     export default {
         name: 'HomeView',
+        components: {
+            mediaPool,
+        },
+        data() {
+            return {
+                hasLoadedSongs: false,
+                songQueue: [],
+            }
+        },
+        methods: {
+            loadSongs() {
+                
+            }
+        }
     }
 </script>