Statsify Finance is a financial analysis tool website I built for both beginners and more advanced users. This post is a short technical walkthrough: why I built it, what the site contains, and what sits underneath it.

Why I Built It

I look at stocks and markets myself, and many finance tools feel either too old or too heavy. Some interfaces look like they stopped evolving ten years ago. Others open with pop-ups pushing brokerage accounts. I wanted a cleaner site that connects basic finance concepts with practical tools, something I would actually enjoy using and could also share with others.

What The Site Contains

Statsify Finance is roughly split into three areas.
Analysis pages (/analysis)

• Qualitative analysis (/analysis/qualitative). Explanations of qualitative economics and finance concepts, each with real examples.
• Quantitative analysis (/analysis/quantitative). Quantitative concepts with formulas and examples.
  Strategy pages (/strategy)
• Trading strategies (/strategy/trade). Common strategies with usage examples.
• Investor profiles (/strategy/investor). Different investor types, useful for understanding your own style.
• Risk management (/strategy/risk-manage). Risk-control methods, grouped by industry and paired with visualizations.
  Other features
• Articles (/articles). Notes on recent market events and industry trends.
• Search (/search). Search across articles and concepts.
• Finance terms (/finance-terms). A cleaner glossary of finance terminology.

The Tech Stack

The site is built on Next.js and Tailwind. I use Ant Design for UI components and ECharts for charts. I did not use an off-the-shelf CMS. Instead, I built a small one with Next.js API routes and MongoDB, which keeps the data model simple and controllable. Authentication uses NextAuth, and the editor is wangeditor. The project is written in TypeScript.
Main stack:

• Next.js. React framework with SSR, routing, and API routes.
• Tailwind CSS. Styling.
• Ant Design. UI component library.
• ECharts. Data visualization.
• MongoDB. Database.
• NextAuth. Authentication.
• wangeditor. Rich text editing.
• TypeScript. Types.

Project Structure

The code is organized in a fairly simple way:

• app/. Main Next.js application directory, including page routes, API routes, and components.
• components/. Shared components, split between UI components and business components.
• models/. MongoDB data models.
• libs/. Database connection and utility functions.
• src/. Styles and static configuration data.
  The project is not huge, but it has the basic shape of a real product. I plan to keep adding content and tools to it over time.