+
+
+
+
+
+
+
Timeline
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example_projects/twitter_clone_local/public/styles.css b/example_projects/twitter_clone_local/public/styles.css
new file mode 100644
index 0000000..d32d714
--- /dev/null
+++ b/example_projects/twitter_clone_local/public/styles.css
@@ -0,0 +1,75 @@
+:root {
+ --bg: #f5f7fa;
+ --card: #ffffff;
+ --line: #dde3ea;
+ --text: #15202b;
+ --muted: #617182;
+ --primary: #1d9bf0;
+}
+* { box-sizing: border-box; }
+body {
+ margin: 0;
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+ background: linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
+ color: var(--text);
+}
+.app {
+ max-width: 860px;
+ margin: 0 auto;
+ padding: 16px;
+ display: grid;
+ gap: 14px;
+}
+.topbar h1 { margin: 0; font-size: 28px; }
+.topbar p { margin: 4px 0 0; color: var(--muted); }
+.card {
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ padding: 14px;
+}
+form { display: grid; gap: 10px; }
+label { display: grid; gap: 6px; font-size: 14px; }
+input, textarea, button {
+ font: inherit;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ padding: 9px 10px;
+}
+textarea { min-height: 90px; resize: vertical; }
+button {
+ cursor: pointer;
+ background: var(--primary);
+ color: #fff;
+ border: none;
+}
+button:hover { filter: brightness(0.96); }
+.status { min-height: 20px; margin: 0; color: var(--muted); }
+.timeline-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.tweets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
+.tweet {
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ padding: 10px;
+ background: #fcfdff;
+}
+.tweet-head { display: flex; justify-content: space-between; gap: 10px; }
+.author { font-weight: 700; }
+.time { color: var(--muted); font-size: 12px; }
+.tweet-text { margin: 8px 0; white-space: pre-wrap; }
+.tweet-actions { display: flex; gap: 10px; align-items: center; }
+.replies-wrap { margin-top: 8px; }
+.replies { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
+.replies li { border-left: 2px solid var(--line); padding-left: 8px; font-size: 14px; }
+.reply-form {
+ display: grid;
+ grid-template-columns: 140px 1fr auto;
+ gap: 6px;
+}
+@media (max-width: 700px) {
+ .reply-form { grid-template-columns: 1fr; }
+}
diff --git a/example_projects/twitter_clone_local/server.js b/example_projects/twitter_clone_local/server.js
new file mode 100644
index 0000000..72fc5c9
--- /dev/null
+++ b/example_projects/twitter_clone_local/server.js
@@ -0,0 +1,226 @@
+#!/usr/bin/env node
+'use strict';
+
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { URL } = require('url');
+
+const PORT = Number(process.env.PORT || 3000);
+const PUBLIC_DIR = path.join(__dirname, 'public');
+
+let nextTweetId = 4;
+let nextReplyId = 1;
+
+const tweets = [
+ {
+ id: 1,
+ author: 'whetstone',
+ text: 'Twitter clone local demo is live.',
+ likes: 3,
+ createdAt: new Date(Date.now() - 1000 * 60 * 30).toISOString(),
+ replies: []
+ },
+ {
+ id: 2,
+ author: 'editor-bot',
+ text: 'You can post, like, and reply in this demo timeline.',
+ likes: 1,
+ createdAt: new Date(Date.now() - 1000 * 60 * 20).toISOString(),
+ replies: []
+ },
+ {
+ id: 3,
+ author: 'bill',
+ text: 'Running locally with zero external dependencies.',
+ likes: 2,
+ createdAt: new Date(Date.now() - 1000 * 60 * 10).toISOString(),
+ replies: []
+ }
+];
+
+function sendJson(res, statusCode, payload) {
+ const body = JSON.stringify(payload);
+ res.writeHead(statusCode, {
+ 'Content-Type': 'application/json; charset=utf-8',
+ 'Content-Length': Buffer.byteLength(body)
+ });
+ res.end(body);
+}
+
+function sendText(res, statusCode, text) {
+ res.writeHead(statusCode, {
+ 'Content-Type': 'text/plain; charset=utf-8',
+ 'Content-Length': Buffer.byteLength(text)
+ });
+ res.end(text);
+}
+
+function parseBody(req) {
+ return new Promise((resolve, reject) => {
+ let raw = '';
+ req.on('data', chunk => {
+ raw += chunk;
+ if (raw.length > 1024 * 1024) {
+ reject(new Error('payload_too_large'));
+ }
+ });
+ req.on('end', () => {
+ if (!raw) {
+ resolve({});
+ return;
+ }
+ try {
+ resolve(JSON.parse(raw));
+ } catch {
+ reject(new Error('invalid_json'));
+ }
+ });
+ req.on('error', reject);
+ });
+}
+
+function getTweetById(id) {
+ return tweets.find(t => t.id === id) || null;
+}
+
+function listTweets() {
+ return [...tweets].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+}
+
+async function handleApi(req, res, pathname) {
+ if (req.method === 'GET' && pathname === '/api/health') {
+ sendJson(res, 200, { ok: true, service: 'twitter-clone-local' });
+ return;
+ }
+
+ if (req.method === 'GET' && pathname === '/api/tweets') {
+ sendJson(res, 200, { tweets: listTweets() });
+ return;
+ }
+
+ if (req.method === 'POST' && pathname === '/api/tweets') {
+ try {
+ const body = await parseBody(req);
+ const author = String(body.author || '').trim();
+ const text = String(body.text || '').trim();
+ if (!author || !text) {
+ sendJson(res, 400, { error: 'author_and_text_required' });
+ return;
+ }
+ const tweet = {
+ id: nextTweetId++,
+ author,
+ text,
+ likes: 0,
+ createdAt: new Date().toISOString(),
+ replies: []
+ };
+ tweets.push(tweet);
+ sendJson(res, 201, { tweet });
+ } catch (err) {
+ sendJson(res, 400, { error: err.message || 'invalid_request' });
+ }
+ return;
+ }
+
+ const likeMatch = pathname.match(/^\/api\/tweets\/(\d+)\/like$/);
+ if (req.method === 'POST' && likeMatch) {
+ const id = Number(likeMatch[1]);
+ const tweet = getTweetById(id);
+ if (!tweet) {
+ sendJson(res, 404, { error: 'tweet_not_found' });
+ return;
+ }
+ tweet.likes += 1;
+ sendJson(res, 200, { tweet });
+ return;
+ }
+
+ const replyMatch = pathname.match(/^\/api\/tweets\/(\d+)\/reply$/);
+ if (req.method === 'POST' && replyMatch) {
+ const id = Number(replyMatch[1]);
+ const tweet = getTweetById(id);
+ if (!tweet) {
+ sendJson(res, 404, { error: 'tweet_not_found' });
+ return;
+ }
+ try {
+ const body = await parseBody(req);
+ const author = String(body.author || '').trim();
+ const text = String(body.text || '').trim();
+ if (!author || !text) {
+ sendJson(res, 400, { error: 'author_and_text_required' });
+ return;
+ }
+ const reply = {
+ id: nextReplyId++,
+ author,
+ text,
+ createdAt: new Date().toISOString()
+ };
+ tweet.replies.push(reply);
+ sendJson(res, 201, { tweet, reply });
+ } catch (err) {
+ sendJson(res, 400, { error: err.message || 'invalid_request' });
+ }
+ return;
+ }
+
+ sendJson(res, 404, { error: 'not_found' });
+}
+
+function contentTypeFor(filePath) {
+ const ext = path.extname(filePath).toLowerCase();
+ if (ext === '.html') return 'text/html; charset=utf-8';
+ if (ext === '.css') return 'text/css; charset=utf-8';
+ if (ext === '.js') return 'application/javascript; charset=utf-8';
+ if (ext === '.json') return 'application/json; charset=utf-8';
+ return 'text/plain; charset=utf-8';
+}
+
+function safeFilePath(pathname) {
+ const cleanPath = pathname === '/' ? '/index.html' : pathname;
+ const abs = path.join(PUBLIC_DIR, path.normalize(cleanPath));
+ if (!abs.startsWith(PUBLIC_DIR)) return null;
+ return abs;
+}
+
+function serveStatic(res, pathname) {
+ const abs = safeFilePath(pathname);
+ if (!abs) {
+ sendText(res, 403, 'forbidden');
+ return;
+ }
+ fs.readFile(abs, (err, data) => {
+ if (err) {
+ if (err.code === 'ENOENT') {
+ sendText(res, 404, 'not found');
+ } else {
+ sendText(res, 500, 'internal error');
+ }
+ return;
+ }
+ res.writeHead(200, {
+ 'Content-Type': contentTypeFor(abs),
+ 'Content-Length': data.length
+ });
+ res.end(data);
+ });
+}
+
+const server = http.createServer(async (req, res) => {
+ const parsedUrl = new URL(req.url, `http://${req.headers.host || 'localhost'}`);
+ const pathname = parsedUrl.pathname;
+
+ if (pathname.startsWith('/api/')) {
+ await handleApi(req, res, pathname);
+ return;
+ }
+
+ serveStatic(res, pathname);
+});
+
+server.listen(PORT, () => {
+ process.stdout.write(`twitter_clone_local listening on http://localhost:${PORT}\n`);
+});