Skip to main content

​
Project type

Info Crypto is a private npm package ("private": true in package.json) and is never published to the npm registry. The project uses ES modules ("type": "module"), so all JavaScript files use import/export syntax natively.

​
Vite

Vite is the build tool and development server. The configuration lives in vite.config.js:
vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    host: true,
  },
});

​
Plugins

@vitejs/plugin-react-swc This plugin replaces the default Babel-based React transform with SWC, a Rust-based compiler. SWC is significantly faster than Babel, which speeds up both dev server startup and hot module replacement. It handles JSX transformation and React Fast Refresh automatically. @tailwindcss/vite The official Tailwind CSS Vite plugin integrates Tailwind directly into the Vite build pipeline. This is the recommended approach for Tailwind CSS v4, replacing the PostCSS-based setup used in earlier versions.

​
Server config

server.host: true exposes the dev server on all network interfaces, equivalent to running vite --host. This makes the app accessible from other devices on the same local network, which is also available via the npm run host script.

​
Tailwind CSS

Tailwind is configured in tailwind.config.js:
tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
};

​
Content paths

Tailwind scans index.html and all .js, .ts, .jsx, and .tsx files under src/ to determine which utility classes are used. Any class not found in these files is purged from the production CSS bundle.

​
Dark mode

darkMode: "class" enables dark mode by toggling a dark class on the root <html> element. This gives the app full programmatic control over which theme is active, rather than relying solely on the OS preference.

​
Theme

The theme.extend object is currently empty, meaning the app uses Tailwind’s default design tokens (colors, spacing, typography, etc.) without customization.

​
Prettier

Prettier handles automatic code formatting. The configuration is in .prettierrc:
.prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "arrowParens": "always"
}

​
Formatting rules

OptionValueEffect
semitrueAdds semicolons at the end of statements
singleQuotefalseUses double quotes for strings
tabWidth2Indents with 2 spaces
trailingComma"es5"Adds trailing commas in objects and arrays where valid in ES5
arrowParens"always"Always wraps arrow function parameters in parentheses (e.g., (x) => x)

​
Ignored paths

The .prettierignore file excludes build artifacts from formatting:
.prettierignore
# Ignore artifacts:
build
coverage
Prettier is integrated with ESLint via eslint-config-prettier, which disables any ESLint rules that would conflict with Prettier’s formatting decisions. You do not need to configure them separately to avoid conflicts.

​
ESLint

ESLint enforces code quality and catches common errors. The configuration is in eslint.config.js, using the flat config format introduced in ESLint v9:
eslint.config.js
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import { defineConfig, globalIgnores } from "eslint/config";
import eslintConfigPrettier from "eslint-config-prettier/flat";

export default defineConfig([
  globalIgnores(["dist"]),

  {
    files: ["**/*.{js,jsx}"],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
      eslintConfigPrettier,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    rules: {
      "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
    },
  },
]);

​
Plugins and rule sets

@eslint/js recommended Enables ESLint’s built-in recommended rules, covering common JavaScript errors and best practices. eslint-plugin-react-hooks Enforces the Rules of Hooks — for example, hooks must only be called at the top level of a component, not inside conditionals or loops. eslint-plugin-react-refresh Validates that components are exported in a way that is compatible with Vite’s React Fast Refresh. Components that do not follow the required export pattern will not update correctly during HMR. eslint-config-prettier Disables all ESLint formatting rules that could conflict with Prettier. This ensures ESLint handles only code correctness while Prettier handles all formatting.

​
Custom rules

RuleConfigDescription
no-unused-varserror, ignore pattern ^[A-Z_]Unused variables are an error, except for variables whose names start with an uppercase letter or underscore (used for React components and constants that may be imported but not referenced directly)

​
Ignored paths

The globalIgnores(["dist"]) call tells ESLint to skip the production build output directory.

Build docs developers (and LLMs) love

Get started for freeTalk to us