Overview

Numlyze is a Next.js 14+ web application built with TypeScript, React, and Tailwind CSS. It provides a collection of financial calculators, crypto tools, and data analysis utilities in a clean, modern interface.

The application is designed to be fast, lightweight, and easy to extend. All calculations run client-side, ensuring privacy and performance.

Tech Stack

• Framework: Next.js 14+ (App Router)
• Language: TypeScript
• UI Library: React 19
• Styling: Tailwind CSS
• Charts: Recharts
• CSV Parsing: PapaParse
• State Management: React Hooks (useState, useMemo)

Environment Variables

The following environment variables can be configured:

Project Structure

app/
  layout.tsx              # Root layout
  page.tsx                # Homepage
  calculators/            # Calculator pages
  tools/                  # Data tool pages
  about/                  # About page
  docs/                   # Documentation page
components/
  layout/                 # Navbar, Footer, Layout
  calculators/            # Calculator components
  tools/                  # Tool components
  ui/                     # Reusable UI components
lib/
  math/                   # Calculation functions
  parsing/                # CSV and number parsing
  analysis/               # Data analysis functions
types/                    # TypeScript type definitions

Adding a New Calculator

1. Create a calculation function in lib/math/
2. Create a calculator component in components/calculators/
3. Create a page in app/calculators/[name]/page.tsx
4. Use the CalculatorLayout component for consistent UI
5. Add the calculator to app/calculators/page.tsx
6. Optionally add it to the homepage featured calculators

Adding a New Tool

1. Create a tool component in components/tools/
2. Create a page in app/tools/[name]/page.tsx
3. Add the tool to the homepage data tools section

Customization

Environment Variables

The following environment variables can be configured (all optional):

LLM Integration

The Data Insight tool includes a placeholder for LLM integration. To integrate an LLM (e.g., OpenAI):

1. Set the NUMLYZE_LLM_API_KEY environment variable
2. Uncomment and modify the generateLLMInsight function inlib/analysis/dataInsight.ts
3. Update the Data Insight tool component to use the LLM function

See the commented code in lib/analysis/dataInsight.tsfor a complete example.

How to Deploy

Numlyze is configured for static export and ready to deploy on Cloudflare Pages, Vercel, or Netlify with no special configuration required.

How to Add Calculators

Follow these steps to add a new calculator to Numlyze:

1. Create calculation function: Add a new file in lib/math/ with your calculation logic
2. Create calculator component: Add a component in components/calculators/ using NumberInput and SelectField
3. Create page: Add app/calculators/[name]/page.tsx using CalculatorLayout
4. Add to index: Update app/calculators/page.tsx with your new calculator
5. Update homepage (optional): Add to app/page.tsx featured calculators array

See existing calculators like LoanCalculator.tsx for reference implementation.

How to Toggle Ads

Monetization is optional and easily toggled in the configuration file. All ad placements can be enabled or disabled with a single setting.

When ads are disabled, placeholders show "Ad slot ready" text instead of actual ad code. This makes it easy to toggle monetization on/off.

Where to Edit Categories/Copy

Customization Guide