Add minimal frontend dev server

This commit is contained in:
BusyBee3333 2025-11-10 16:16:08 -05:00
parent 904e0ff20f
commit ea8fed58e9
5 changed files with 112 additions and 0 deletions

12
frontend/package-lock.json generated Normal file
View File

@ -0,0 +1,12 @@
{
"name": "beatmatchr-frontend",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "beatmatchr-frontend",
"version": "0.1.0"
}
}
}

9
frontend/package.json Normal file
View File

@ -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"
}
}

View File

@ -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>

View File

@ -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;
}

34
frontend/server.js Normal file
View File

@ -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}`);
});