type
Post
status
Published
date
Dec 8, 2024
slug
Statsify-Finance-Tech-Analysis
summary
A product and architecture walkthrough for Statsify Finance, covering its analysis, strategy, article, search, and finance-term pages, plus the Next.js, Tailwind, Ant Design, ECharts, MongoDB, and TypeScript stack behind it.
tags
Money
Development
Website building
category
Technology
icon
password
paired_with
1561d487-a2a1-804d-9222-e7f16134df8d
lang
translation_locked
source_hash
81e1c953214a9b3bc6413b2156309c46a065e31890bdd24fa873e8db81d6d63d
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.
- Author:LeoQin
- URL:https://leoqin.com/en/article/Statsify-Finance-Tech-Analysis
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
