Project Overview

OrynthDev is a static, single-file HTML directory that showcases developer tools and projects from the Orynth community. It provides a clean, fast browsing experience with search, filtering, sorting, and upvoting — all without any backend infrastructure.

The goal is to make it easy for developers and users to discover quality tools, navigate by category, and surface community favorites through upvoting. Every tool listed links back to its listing on Orynth.dev, driving traffic to makers who have published there.

Architecture

The site uses a deliberately minimal architecture — all logic, styles, and data live in a single self-contained HTML file.

orynthdev/
├── orynth-tools.html     ← Main site (HTML + CSS + JS, self-contained)
├── README.md             ← Setup and usage guide
└── docs/
    └── project-docs.html ← This document

Technology Stack

How It Works

On page load, JavaScript reads the TOOLS array, applies any active filters, and renders cards into a CSS grid. Filter buttons, the search input, and the sort dropdown all call the same render() function, which re-derives the visible list from the current filter state.

Upvote state is stored in a Set and an object in memory — it resets on page reload. Persistent upvotes would require a backend or localStorage.

Features

Data Model

Each tool in the TOOLS array follows this schema:

{
  id:       Number,   // Unique integer identifier
  name:     String,   // Display name shown on card
  icon:     String,   // Emoji or Unicode symbol for the card icon
  category: String,   // Category slug — must match a filter button data-cat
  desc:     String,   // 1–2 sentence description shown on card
  tags:     String[], // Array of 2–3 short label strings
  url:      String,   // External URL (opens in new tab on card click)
  upvotes:  Number,   // Starting upvote count
  newest:   Number    // Sort index for "Newest" mode (lower = newer)
}

Example Entry

{
  id: 1,
  name: "Vercel",
  icon: "▲",
  category: "infra",
  desc: "Deploy web projects instantly. Push to git and get a live URL with edge functions, analytics, and previews built in.",
  tags: ["Deploy", "Edge", "CI/CD"],
  url: "https://vercel.com",
  upvotes: 841,
  newest: 1
}

Categories

To add a new category, add a new entry to the TOOLS array with the new slug and add a matching filter button in the HTML.

<button class="filter-btn" data-cat="newcat">New Category</button>

Design System

Color Palette

Typography

Motion

Cards fade up on render using CSS @keyframes fadeUp with staggered animation-delay (40ms per card). Hover states use 180ms transitions on background and opacity. The featured banner has a radial glow that pulses on hover.

Setup & Development

Option 1 — Open directly

No setup required. Open orynth-tools.html in any modern browser.

Option 2 — Local server

# Python 3
python -m http.server 8080

# Node.js
npx serve .

# Bun
bun --bun run --hot .

# Then open:
# http://localhost:8080/orynth-tools.html

Editing the File

Open orynth-tools.html in any text editor. The three main areas to edit are:

Customizing the Tool List

Edit the TOOLS array inside the <script> block. Each object must include all required fields from the data model. IDs should be unique integers; newest values should be unique and lower means "more recent".

Adding a Tool

// Add to end of TOOLS array:
{
  id: 19,
  name: "Your Tool",
  icon: "🚀",
  category: "devtools",   // Use an existing slug
  desc: "One or two sentences about what this tool does.",
  tags: ["Tag1", "Tag2"],
  url: "https://yourtool.com",
  upvotes: 0,
  newest: 19              // Lower = shows first in "Newest" sort
}

Changing the Featured Tool

Find the .featured-banner div in the HTML body and update the name, description, tags, and the two href and onclick URL references.

Connecting to Orynth API

When Orynth exposes a public API, replace the static array with a fetch() call. Example pattern:

async function loadTools() {
  const res = await fetch('https://api.orynth.dev/projects');
  const data = await res.json();

  // Map API response to TOOLS schema
  TOOLS.length = 0; // Clear static array
  data.projects.forEach((p, i) => {
    TOOLS.push({
      id: p.id,
      name: p.name,
      icon: p.emoji || '◈',
      category: p.category_slug,
      desc: p.short_description,
      tags: p.tags.slice(0, 3),
      url: `https://orynth.dev/p/${p.slug}`,
      upvotes: p.upvote_count,
      newest: i
    });
  });

  document.getElementById('total-count').textContent = TOOLS.length;
  render();
}

loadTools();

Deployment

Because the entire site is a single static HTML file, it can be hosted anywhere with no build configuration.

Custom Domain

All platforms above support custom domains. Point your domain's DNS to the platform, add the domain in the dashboard, and SSL is handled automatically.

Contributing

Community contributions are welcome. To add a tool to the directory:

1. Ensure the tool is listed on orynth.dev
2. Fork the repository
3. Add the tool to the TOOLS array following the schema in Section 4
4. Keep desc to 1–2 sentences maximum
5. Submit a pull request with a brief description of the tool

Tool Quality Guidelines

Tools should be actively maintained, publicly accessible, and genuinely useful to developers or makers. Avoid duplicates — check the existing list before submitting. Commercial tools are welcome; tools must not be malware, spam, or violate Orynth's policies.

Roadmap