Contributing to Infyn — Open Source Developer & Architecture Guide

Pillar 1

Core Philosophy & Non-Negotiables

Every tool built on Infyn must strictly abide by these four core principles:

100% Client-Side Execution

All processing runs locally in the browser via WebAssembly (WASM), Web Workers, Canvas, or client libraries. User files are never uploaded to remote servers.

100% Free & Ad-Free

No paywalls, no subscriptions, no credit cards, and zero watermarks on exported files. No intrusive tracking or banner ads.

Batch-First Capability

Tools should accept multiple files (50+ at once) whenever applicable and offer a 1-Click "Download All (ZIP)" export using jszip.

60fps Main-Thread Protection

Heavy computational tasks (AI inference, large image/PDF decodes) must run in a Web Worker or asynchronous chunked streams to keep the UI smooth.

Setup

Local Development Setup

Infyn is built with Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS.

1. Fork & Clone the Repository:

Terminal

git clone https://github.com/imvicky69/infyn.git
cd infyn

2. Install Dependencies:

Terminal

npm install

3. Run the Development Server:

Terminal

npm run dev

Open http://localhost:3000 in your browser.

Architecture

Step-by-Step Blueprint for a New Tool

Follow this proven standard when building a new utility (e.g. /image/my-tool, /pdf/my-tool):

1Create the Dedicated Route Directory

Directory Structure

src/app/<category>/<tool-name>/
├── layout.tsx     <-- SEO Metadata + JSON-LD Schema
├── page.tsx       <-- "use client" UI & Stage Management
└── worker.ts      <-- (Optional) Web Worker for heavy tasks

2Implement layout.tsx (SEO & Structured Data)

Every tool requires rich metadata and a WebApplication JSON-LD schema for search indexing:

src/app/<category>/<tool-name>/layout.tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Free [Tool Name] — [Primary Benefit] (No Uploads)",
  description: "100% Free & Ad-Free [Tool Name] running locally in your browser. Zero server uploads.",
  keywords: ["free [tool]", "[tool] online no upload", "client side [tool]"],
  alternates: { canonical: "https://infyn.software/<category>/<tool-name>" },
};

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "WebApplication",
  name: "Infyn by Indivio — [Tool Name]",
  url: "https://infyn.software/<category>/<tool-name>",
  applicationCategory: "MultimediaApplication",
  operatingSystem: "All (Web Browser)",
  offers: { "@type": "Offer", price: "0", priceCurrency: "USD" },
};

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      {children}
    </>
  );
}

3Follow the 4-Stage UI State Machine

idleDropZone upload

busyGlobalLoader / Progress

donePreview & Download

errorFriendly retry card

Components

Shared Reusable Components

Before writing custom UI, utilize these shared components located in src/components/:

1. <DropZone />

src/components/image-tools/dropzone.tsx

Universal drag-and-drop file uploader supporting single or multi-file uploads:

<DropZone
  multiple={true}
  accept="image/*"
  onFilesSelected={(files) => handleFiles(files)}
  title="Drop your files here"
  subtitle="or click to browse from device"
  formatsText="JPG · PNG · WEBP · HEIC"
/>

2. <GlobalLoader /> & useLoading

src/components/global-loader.tsx

Application-wide animated infinity loader for async operations and route transitions:

import { useLoading } from "@/components/loading-provider";

const { showLoader, hideLoader } = useLoading();
showLoader("Processing 50 files...");
// ... operation done
hideLoader();

3. <PrivacyBadges />

src/components/image-tools/privacy-badges.tsx

Signature privacy badges to reassure users of local browser execution:

<PrivacyBadges
  badges={["100% In-browser", "Zero cloud uploads", "100% Free", "Unlimited files"]}
/>

Design

Design System & Dark Mode Rules

Infyn uses a curated minimal Cream & Ink aesthetic:

Background#FBFBFA / #0C0C0E

Surfaces & Cards#FFFFFF / #141417

Muted Pills#F5F4EE / #1A1A1F

Primary Ink#111111 / #FFFFFF

• Tactile Feedback: Always include active:scale-[0.97] transition-all on interactive buttons.

• Selected Tabs: Selected options must invert in dark mode (dark:bg-white dark:text-[#111111] dark:border-white) for high tactile contrast.

• Border Radii: Use rounded-2xl (16px) for cards and rounded-3xl (24px) for major hero containers.

Good First Issues

High-Demand Tools Developers Can Build

Looking for an idea? Here are tools requested by our community that can be implemented 100% in-browser:

Image

SVG to PNG / JPG Converter

Render vector SVGs to high-resolution raster images at 1x, 2x, 4x, or custom pixel dimensions using native Canvas API.

PDF

Rotate PDF Pages

Rotate individual or all pages in a PDF document by 90°, 180°, or 270° using pdf-lib without re-compressing.

PDF

Add Page Numbers to PDF

Stamp customized page numbers (e.g. "Page 1 of 12") with selectable position (top/bottom, left/center/right) and font size.

Dev

Base64 Image / String Encoder & Decoder

Instantly convert files or images to Base64 data URIs and vice-versa with 1-click clipboard copy.

Submissions

Pull Request Quality Checklist

Before opening your PR on GitHub, ensure you have checked every item:

No Remote Uploads: All logic executes entirely inside the browser.

Memory Safety: All URL.createObjectURL references are revoked on reset or component unmount.

Dark Mode Tested: Both light mode and dark mode are fully styled with tactile contrast.

Build Validation: npm run build passes with zero TypeScript errors and all static pages render.

Open a Pull Request on GitHub

src/app/<category>/<tool-name>/ ├── layout.tsx <-- SEO Metadata + JSON-LD Schema ├── page.tsx <-- "use client" UI & Stage Management └── worker.ts <-- (Optional) Web Worker for heavy tasks

import type { Metadata } from "next"; export const metadata: Metadata = { title: "Free [Tool Name] — [Primary Benefit] (No Uploads)", description: "100% Free & Ad-Free [Tool Name] running locally in your browser. Zero server uploads.", keywords: ["free [tool]", "[tool] online no upload", "client side [tool]"], alternates: { canonical: "https://infyn.software/<category>/<tool-name>" }, }; const jsonLd = { "@context": "https://schema.org", "@type": "WebApplication", name: "Infyn by Indivio — [Tool Name]", url: "https://infyn.software/<category>/<tool-name>", applicationCategory: "MultimediaApplication", operatingSystem: "All (Web Browser)", offers: { "@type": "Offer", price: "0", priceCurrency: "USD" }, }; export default function Layout({ children }: { children: React.ReactNode }) { return ( <> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} /> {children} </> ); }

<DropZone multiple={true} accept="image/*" onFilesSelected={(files) => handleFiles(files)} title="Drop your files here" subtitle="or click to browse from device" formatsText="JPG · PNG · WEBP · HEIC" />

Contribute to Infyn

Core Philosophy & Non-Negotiables

100% Client-Side Execution

100% Free & Ad-Free

Batch-First Capability

60fps Main-Thread Protection

Local Development Setup

Step-by-Step Blueprint for a New Tool

Shared Reusable Components

1. <DropZone />

2. <GlobalLoader /> & useLoading

3. <PrivacyBadges />

Design System & Dark Mode Rules

High-Demand Tools Developers Can Build

SVG to PNG / JPG Converter

Rotate PDF Pages

Add Page Numbers to PDF

Base64 Image / String Encoder & Decoder

Pull Request Quality Checklist

Contribute to Infyn

Core Philosophy & Non-Negotiables

100% Client-Side Execution

100% Free & Ad-Free

Batch-First Capability

60fps Main-Thread Protection

Local Development Setup

Step-by-Step Blueprint for a New Tool

Shared Reusable Components

1. <DropZone />

2. <GlobalLoader /> & useLoading

3. <PrivacyBadges />

Design System & Dark Mode Rules

High-Demand Tools Developers Can Build

SVG to PNG / JPG Converter

Rotate PDF Pages

Add Page Numbers to PDF

Base64 Image / String Encoder & Decoder

Pull Request Quality Checklist