Basket Creator

$10

Create and manage custom asset baskets with validation, backtesting, and deployment.

📁 21 files

TypeScriptMarkdownJSONJavaScriptReact

📁 File Structure 21 files

basket-creator/ ├── LICENSE ├── README.md ├── package.json ├── security-notes.md ├── src/ │ ├── App.tsx │ ├── components/ │ │ ├── BacktestChart.tsx │ │ ├── Layout.tsx │ │ ├── MetricsPanel.tsx │ │ ├── TokenSelector.tsx │ │ └── WeightSlider.tsx │ ├── hooks/ │ │ ├── useBacktest.ts │ │ └── useBasket.tsx │ ├── lib/ │ │ ├── backtest.ts │ │ ├── constants.ts │ │ └── format.ts │ ├── main.tsx │ ├── styles/ │ │ └── globals.css │ └── types/ │ └── index.ts ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts

📖 Documentation Preview README excerpt

basket-creator

UI for constructing and backtesting token baskets before deploying as on-chain indexes.

Price: $9.99 | Store: index-lab | Product #5

Overview

basket-creator is a React application for designing tokenized index baskets. Select from a curated token list, adjust component weights with interactive sliders, and run backtests to evaluate historical performance before committing to an on-chain deployment via the index-factory.

Features

Feature	Description
Token Selection	Searchable list of DeFi blue-chips with price and market cap
Weight Sliders	Interactive weight adjustment with lock/normalize controls
Backtesting	Monte Carlo simulation with configurable dates, fees, and rebalance frequency
Performance Metrics	Sharpe, Sortino, Calmar, max drawdown, volatility
Benchmark Comparison	Line chart comparing custom weights vs equal-weight baseline
Dark Theme	CryptoForge branded dark UI with responsive layout

Installation


cp -r basket-creator/ my-basket-creator/
cd my-basket-creator
npm install
npm run dev

Opens at http://localhost:3001.

Prerequisites

Node.js 18+
npm 9+ or pnpm 8+

Usage

1. Select tokens from the left panel

2. Adjust weights using sliders — use "Equal" or "Normalize" to balance

3. Configure backtest parameters (dates, investment, rebalance frequency)

4. Run Backtest to see performance chart and metrics

5. Export your basket configuration for use with index-factory

Tech Stack

Package	Version	Purpose
React	18.3	UI framework
Vite	5.2	Build tool
TypeScript	5.4	Type safety

... continues with setup instructions, usage examples, and more.

📄 Code Sample .js preview

tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { colors: { cf: { bg: { DEFAULT: "#0D0D1A", light: "#141420" }, primary: { DEFAULT: "#FF6B00", hover: "#FF8533" }, accent: { DEFAULT: "#FFD700", dim: "#B8981A" }, text: { DEFAULT: "#E0E0E0", muted: "#8A8A9A" }, border: { DEFAULT: "#2A2A3A", light: "#3A3A4A" }, success: { DEFAULT: "#00E676" }, danger: { DEFAULT: "#FF5252" }, info: { DEFAULT: "#448AFF" }, }, }, fontFamily: { heading: ["JetBrains Mono", "monospace"], body: ["Inter", "sans-serif"], accent: ["Space Grotesk", "sans-serif"], }, }, }, plugins: [], };

Buy Now — $10 Back to Products