Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* This val creates an interactive tech stack wizard that generates a video game-style inventory screen.
* It uses React for the UI, leverages emoji and Unicode symbols for a visually rich experience, and
* incorporates Tailwind CSS for elegant, grayscale styling.
* The wizard allows users to select tools, libraries, and APIs, then displays them in a shareable format.
*/
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
// Define tech options with emojis or Unicode symbols as icons
const techOptions = [
{ name: "React", icon: "⚛️" },
{ name: "Vue", icon: "🖖" },
{ name: "Angular", icon: "🅰️" },
{ name: "Node.js", icon: "🟢" },
{ name: "Python", icon: "🐍" },
{ name: "TypeScript", icon: "🔷" },
{ name: "GraphQL", icon: "◻️" },
{ name: "Docker", icon: "🐳" },
{ name: "AWS", icon: "☁️" },
{ name: "Firebase", icon: "🔥" },
{ name: "D3.js", icon: "📊" },
{ name: "Supabase", icon: "⚡" },
{ name: "Fly.io", icon: "🪰" },
{ name: "Val.town", icon: "🏘️" },
{ name: "OpenAI", icon: "🧠" },
{ name: "SQLite", icon: "🗃️" },
{ name: "Commander", icon: "🎖️" },
{ name: "Blessed", icon: "🙏" },
{ name: "Express", icon: "🚂" },
{ name: "MongoDB", icon: "🍃" },
{ name: "Redis", icon: "🔴" },
{ name: "PostgreSQL", icon: "🐘" },
{ name: "Kubernetes", icon: "☸️" },
{ name: "TensorFlow", icon: "🧮" },
{ name: "Rust", icon: "🦀" },
{ name: "Go", icon: "🐹" },
{ name: "Ruby", icon: "💎" },
{ name: "Rails", icon: "🛤️" },
{ name: "Laravel", icon: "🔪" },
{ name: "Django", icon: "🎸" },
{ name: "Flask", icon: "🧪" },
{ name: "Spring", icon: "🍃" },
{ name: "Kotlin", icon: "🎯" },
{ name: "Swift", icon: "🕊️" },
{ name: "Flutter", icon: "🦋" },
{ name: "React Native", icon: "📱" },
{ name: "Electron", icon: "🔬" },
{ name: "Webpack", icon: "📦" },
{ name: "Babel", icon: "🗼" },
{ name: "Jest", icon: "🃏" },
{ name: "Mocha", icon: "☕" },
{ name: "Cypress", icon: "🌲" },
{ name: "Svelte", icon: "🔥" },
{ name: "Next.js", icon: "⏭️" },
{ name: "Nuxt.js", icon: "🌟" },
{ name: "Tailwind CSS", icon: "🎨" },
{ name: "Bootstrap", icon: "📦" },
{ name: "Sass", icon: "🎀" },
{ name: "Less", icon: "📉" },
{ name: "Styled Components", icon: "💅" },
{ name: "Gatsby", icon: "🚀" },
{ name: "Vite", icon: "⚡" },
{ name: "Parcel", icon: "📦" },
{ name: "Grunt", icon: "🐗" },
{ name: "Gulp", icon: "🥤" },
{ name: "Rollup", icon: "🔄" },
{ name: "JQuery", icon: "💡" },
{ name: "Three.js", icon: "🌌" },
{ name: "Phaser", icon: "👾" },
{ name: "WebAssembly", icon: "🕸️" },
{ name: "Webpack", icon: "📦" },
{ name: "Babel", icon: "🔄" },
{ name: "Prettier", icon: "✨" },
{ name: "ESLint", icon: "🧹" },
{ name: "Hugo", icon: "🏗️" },
{ name: "Jekyll", icon: "💎" },
{ name: "Terraform", icon: "🏗️" },
{ name: "Ansible", icon: "📜" },
{ name: "Chef", icon: "👨🍳" },
{ name: "Puppet", icon: "🧙♂️" },
{ name: "Vagrant", icon: "📦" },
{ name: "Prometheus", icon: "📈" },
{ name: "Grafana", icon: "📊" },
{ name: "ElasticSearch", icon: "🔍" },
{ name: "Logstash", icon: "📜" },
{ name: "Kibana", icon: "📊" },
{ name: "Jenkins", icon: "🛠️" },
{ name: "Travis CI", icon: "🔧" },
{ name: "CircleCI", icon: "🔄" },
{ name: "GitLab CI", icon: "🔧" },
{ name: "Azure", icon: "🌐" },
{ name: "DigitalOcean", icon: "💧" },
{ name: "Heroku", icon: "🚀" },
{ name: "Netlify", icon: "🎛️" },
{ name: "Vercel", icon: "🏁" },
{ name: "Caddy", icon: "🪵" },
{ name: "NGINX", icon: "🚦" },