Add minimal frontend dev server

2025-11-10 16:16:08 -05:00
5 changed files with 112 additions and 0 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -0,0 +1,12 @@
+{
+  "name": "beatmatchr-frontend",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "beatmatchr-frontend",
+      "version": "0.1.0"
+    }
+  }
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,9 @@
+{
+  "name": "beatmatchr-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Simple development server for the beatmatchr frontend.",
+  "scripts": {
+    "dev": "node server.js"
+  }
+}
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Beatmatchr</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <main class="container">
+      <h1>Beatmatchr</h1>
+      <p>Welcome to the Beatmatchr prototype frontend.</p>
+      <p>This lightweight development server ensures <code>npm run dev</code> works.</p>
+    </main>
+  </body>
+</html>
--- a/frontend/public/styles.css
+++ b/frontend/public/styles.css
@ -0,0 +1,41 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: radial-gradient(circle at top, #1f2937, #111827 60%);
+  color: #f3f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  text-align: center;
+  background: rgba(17, 24, 39, 0.7);
+  border: 1px solid rgba(147, 197, 253, 0.2);
+  border-radius: 16px;
+  padding: 48px;
+  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.6);
+}
+
+h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  letter-spacing: 0.08em;
+}
+
+p {
+  margin: 0.5rem 0;
+  line-height: 1.6;
+}
+
+code {
+  background: rgba(37, 99, 235, 0.2);
+  padding: 0.1rem 0.35rem;
+  border-radius: 6px;
+  font-family: 'Fira Code', 'Source Code Pro', monospace;
+}
--- a/frontend/server.js
+++ b/frontend/server.js
@ -0,0 +1,34 @@
+const http = require('http');
+const path = require('path');
+const fs = require('fs');
+
+const PORT = process.env.PORT || 5173;
+const PUBLIC_DIR = path.join(__dirname, 'public');
+
+function serveFile(res, filePath, contentType = 'text/html') {
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(500, { 'Content-Type': 'text/plain' });
+      res.end('Internal Server Error');
+      return;
+    }
+
+    res.writeHead(200, { 'Content-Type': contentType });
+    res.end(data);
+  });
+}
+
+const server = http.createServer((req, res) => {
+  if (req.url === '/' || req.url === '/index.html') {
+    serveFile(res, path.join(PUBLIC_DIR, 'index.html'));
+  } else if (req.url === '/styles.css') {
+    serveFile(res, path.join(PUBLIC_DIR, 'styles.css'), 'text/css');
+  } else {
+    res.writeHead(404, { 'Content-Type': 'text/plain' });
+    res.end('Not Found');
+  }
+});
+
+server.listen(PORT, () => {
+  console.log(`Beatmatchr frontend available at http://localhost:${PORT}`);
+});