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:
- 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?
- 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)?
- 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?
- 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?
- Theming & Dark Mode
The site supports dark/light themes using CSS custom properties and data-theme attribute.
How to implement theme persistence with localStorage?
- 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.