How to build a large-scale crypto tools website like sevendiv.com (1000+ calculators, analyzers, generators)?

[مرتضی قاسم خانی]

I'm planning to build a website similar to sevendiv.com (also 
known as CryptoToolbox), which offers 1000+ free crypto tools 
including calculators, analyzers, converters, generators, and AI 
prompts. The tools cover various categories like DeFi, Mining, 
Portfolio, Staking, Trading, Security, and more.

I'd like to understand the architecture and tech stack required 
to build such a platform. Here are my specific questions:

1. Frontend Architecture

The site uses Tailwind CSS (loaded via CDN) and jQuery for DOM 
manipulation.

It also uses Google Fonts (Inter) and Material Icons.

The site appears to be a single-page application (SPA) with 
client-side routing and dynamic tool loading.

What would be the best modern frontend framework for this? React, 
Vue, or Svelte? Or is vanilla JS + jQuery sufficient for 1000+ 
tools?

How should I structure the tool components to keep the bundle 
size small and enable lazy loading?

2. Backend & API Requirements

The site claims "All run locally in your browser. No API key 
needed".

Does this mean all calculations are done client-side? If so, 
what's the role of the backend?

Should I use a serverless architecture (e.g., Cloudflare Workers, 
Vercel) or a traditional backend (Node.js, Django)?

What about caching, rate limiting, and analytics (they use Google 
Tag Manager & Clarity)?

3. Tool Management & Data Structure

How to manage 1000+ tools with their respective inputs, formulas, 
and UI configurations?

Should I use a JSON-based configuration system where each tool is 
defined declaratively?

How to handle complex calculations (e.g., Black-Scholes options 
pricing, Mean-Variance Optimization) efficiently in the browser?

4. SEO & Performance

The site has meta tags, Open Graph, Twitter Cards, and JSON-LD 
structured data (WebApplication, FAQPage, Organization, 
BreadcrumbList).

How to achieve good SEO for a tool-heavy SPA? Should I use SSR 
(Next.js/Nuxt) or static generation?

Performance optimization for 1000+ tools: code splitting, lazy 
loading, virtual scrolling?

5. Theming & Dark Mode

The site supports dark/light themes using CSS custom properties 
and data-theme attribute.

How to implement theme persistence with localStorage?

6. Deployment & Hosting

What's the best hosting strategy for such a site? Static hosting 
(Netlify/Vercel) or a full-stack solution?

How to handle updates when adding new tools?

Tools & Libraries I'm considering:

Frontend: React + Next.js (SSR) or Vite + React (SPA)

Styling: Tailwind CSS

State Management: Zustand or Redux Toolkit

Charts/Visualization: Chart.js, D3.js, or Recharts

Form Handling: React Hook Form

Icons: Material Icons or Font Awesome

Analytics: Google Analytics, Clarity

Hosting: Vercel, Netlify, or Cloudflare Pages

CDN: Cloudflare

Additional context:

The site has 11 categories and 998 tools.

It includes an AI Prompts Library with 5496+ prompts.

Tools include real-time crypto data (prices, rates, gas fees) - 
how to fetch and cache this data?

Any guidance on architecture, tech stack decisions, and 
implementation best practices would be greatly appreciated!

Note: I'm not looking to copy the site, but rather understand the 
scalable architecture behind a large collection of browser-based 
tools.