import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const features = {
hono: [
"Routing",
"Middleware",
"Static file serving",
"WebSocket support",
"JWT authentication",
"Validation",
"Templating",
],
deno: [
"TypeScript support",
"Top-level await",
"ES modules",
"Standard library",
"Built-in testing",
"Permissions system",
"Web standard APIs",
],
};
const categoryIcons = {
frontend: {
icon: "π¨",
items: ["Material UI", "Bootstrap", "Tailwind CSS", "Styled Components", "CSS Modules", "Sass/SCSS", "CSS-in-JS"],
},
backend: {
icon: "π§",
items: ["GraphQL", "RESTful API", "WebSockets", "gRPC", "Microservices", "Serverless", "Event-driven"],
},
database: {
icon: "πΎ",
items: ["sqlite", "PostgreSQL", "MySQL", "Redis", "Cassandra", "Elasticsearch", "DynamoDB"],
},
tools: {
icon: "πͺ",
items: ["obsidian", "pinokio", "excalidraw automate", "freeform"],
},
devops: {
icon: "ποΈ",
items: ["Monolithic", "Microservices", "Serverless", "Event-driven", "Layered", "Hexagonal", "Modular Monolith"],
},
testing: {
icon: "π§ͺ",
items: ["Unit Testing", "Integration Testing", "E2E Testing", "TDD", "BDD", "Load Testing", "Security Testing"],
},
security: {
icon: "π",
items: ["ports", "Vault", "Encryption", "2FA", "OAuth", "JWT", "HTTPS"],
},
"3d": {
icon: "π§",
items: ["Three.js", "WebGL", "GeoJSON", "CityJSON", "Blender", "aframe"],
},
design: {
icon: "βοΈ",
items: ["excalidraw", "mapshaper", "comfyui", "sketchup", "blender", "krita"],
},
content: {
icon: "π",
items: ["Blog", "Article", "Podcast", "Portfolio", "CMS", "Markdown"],
},
automation: {
icon: "π€",
items: ["CI/CD", "Task Runners", "Workflow Automation", "Scripting", "Cron Jobs", "Chatbots", "RPA"],
},
other: {
icon: "π₯",
items: [
"cracktro loader",
"keygen",
"Richard Stallman Seal of Approval",
"pickle dump",
"crud chron",
"Chatbots",
"RPA",
],
},
};
const npmPackages = {
frontend: [