12 },
13 {
14 prompt: "weather dashboard for nyc using open-meteo API for NYC with icons",
15 title: "Weather App",
16 code:
442 <title>Absolute Boutique - Curated Elegance</title>
443 <meta name="viewport" content="width=device-width, initial-scale=1">
444 <link href="https://fonts.googleapis.com/css2?family=Amsterdam+Four&display=swap" rel="stylesheet">
445 <style>
446 @import url('https://fonts.googleapis.com/css2?family=Amsterdam+Four&display=swap');
447 body {
448 margin: 0;
432 <title>Absolute Boutique - Curated Elegance</title>
433 <meta name="viewport" content="width=device-width, initial-scale=1">
434 <link href="https://fonts.googleapis.com/css2?family=Amsterdam+Four&display=swap" rel="stylesheet">
435 <style>
436 @import url('https://fonts.googleapis.com/css2?family=Amsterdam+Four&display=swap');
437 body {
438 margin: 0;
11 e.preventDefault();
12 try {
13 const response = await fetch("/api/job-postings", {
14 method: "POST",
15 headers: { "Content-Type": "application/json" },
129 const fetchMessages = async () => {
130 try {
131 const response = await fetch("/api/chat-messages");
132 const data = await response.json();
133 setMessages(data);
140 e.preventDefault();
141 try {
142 const response = await fetch("/api/chat-messages", {
143 method: "POST",
144 headers: { "Content-Type": "application/json" },
212 const fetchJobs = async () => {
213 try {
214 const response = await fetch("/api/job-postings");
215 const data = await response.json();
216 setJobs(data);
280 `);
281
282 // Handle API routes
283 const url = new URL(request.url);
284
285 // Job Postings API
286 if (url.pathname === "/api/job-postings") {
287 if (request.method === "GET") {
288 const jobs = await sqlite.execute(`
305 }
306
307 // Chat Messages API
308 if (url.pathname === "/api/chat-messages") {
309 if (request.method === "GET") {
310 const messages = await sqlite.execute(`
224 });
225
226 // Add a small delay to prevent overwhelming the API
227 await new Promise(resolve => setTimeout(resolve, 500));
228 } catch (aiError) {
4
5const encoder = new Encoder();
6const API_URL = "https://0pw.me";
7
8/**
69 nacl.sign(encoder.encode([Date.now() / 1000, [nonce, encrypted]]), kp.secretKey),
70 ]);
71 return fetch(API_URL, { method: "POST", body });
72 }
73
75 const seed = await this.deriveSeed();
76 const kp = nacl.sign.keyPair.fromSeed(seed);
77 const response = await fetch(API_URL, {
78 method: "POST",
79 body: encoder.encode([kp.publicKey]),
101 nacl.sign(encoder.encode([Date.now() / 1000, null]), kp.secretKey),
102 ]);
103 return fetch(API_URL, { method: "POST", body });
104 }
105}
33 "placementSystem.ts",
34 "dataValidation.ts",
35 "apiHelpers.ts",
36 "formatters.ts"
37 ],
65 "TypeScript",
66 "SQLite",
67 "Open-Meteo API"
68 ],
69 features: [
77 frontend: "React-based SPA with modular component structure",
78 backend: "Serverless Val Town functions with SQLite storage",
79 dataFlow: "Client-side React components interact with Val Town backend APIs"
80 }
81 };
11 },
12 {
13 "prompt": "weather dashboard for nyc using open-meteo API for NYC with icons",
14 "title": "Weather App",
15 "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>NYC Weather</title>\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n <style>\n .weather-icon {\n font-size: 48px;\n margin-bottom: 16px;\n }\n </style>\n</head>\n<body class=\"h-screen bg-blue-100 flex justify-center items-center p-4\">\n <div class=\"bg-white p-8 rounded-md shadow-md w-full max-w-sm md:p-12 lg:p-16 xl:p-20\">\n <h1 class=\"text-2xl font-bold mb-4 text-center text-blue-500\">NYC Weather</h1>\n <div id=\"weather\" class=\"mb-4 p-4 text-center\">\n <div id=\"temperature\" class=\"text-4xl font-bold mb-4\"></div>\n <div id=\"condition\" class=\"text-xl font-medium mb-4\"></div>\n <div id=\"humidity\" class=\"text-lg font-light mb-2\">Humidity: <span id=\"humidity-value\"></span>%</div>\n <div id=\"wind\" class=\"text-lg font-light mb-2\">Wind: <span id=\"wind-value\"></span> mph</div>\n <i id=\"weather-icon\" class=\"weather-icon text-blue-500\"></i>\n </div>\n </div>\n <p class=\"fixed bottom-0 left-0 right-0 text-center p-4 text-gray-600 md:p-6 lg:p-8 xl:p-10\">\n Built on <a class=\"text-blue-600\" href=\"https://cerebrascoder.com\">Cerebras Coder</a>\n </p>\n\n <script>\n // Sample weather data\n const weatherData = {\n temperature: 75,\n condition: 'Sunny',\n humidity: 60,\n wind: 10,\n icon: 'sun'\n };\n\n document.getElementById('temperature').innerText = `${weatherData.temperature}°F`;\n document.getElementById('condition').innerText = weatherData.condition;\n document.getElementById('humidity-value').innerText = weatherData.humidity;\n document.getElementById('wind-value').innerText = weatherData.wind;\n\n // Map weather icon\n const weatherIcons = {\n 'sun': '☀',\n 'cloud': '☀',\n 'rain': '☃',\n 'snow': '☄'\n };\n\n document.getElementById('weather-icon').innerHTML = weatherIcons[weatherData.icon] || '';\n </script>\n</body>\n</html>",
8
91. Sign up for [Cerebras](https://cloud.cerebras.ai/)
102. Get a Cerebras API Key
113. Save it in your project env variable called `CEREBRAS_API_KEY`
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CerebrasCoder</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com" />
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9 <link
10 href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
11 rel="stylesheet"
12 />
21 <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22 <meta property="og:type" content="website">
23 <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24
25
