type
Post
status
Published
date
Dec 8, 2024
slug
Statsify-Finance-技术解析
summary
Statsify Finance 是我做的一个金融分析工具网站。这篇聊聊为什么做这个项目、网站分了哪几块、底下用了什么技术。
tags
金钱
开发
category
技术分享
icon
password
synced
synced
paired_with
3551d487-a2a1-811d-8d77-da56f87e3a03
source_hash
81e1c953214a9b3bc6413b2156309c46a065e31890bdd24fa873e8db81d6d63d
translation_locked
translation_locked
Statsify Finance 是我做的一个金融分析工具网站，给金融小白和专业用户都能用。这篇简单聊聊为什么做这个项目、网站长什么样、底下用了什么技术。
为什么做这个
我自己平时也炒股看盘，发现市面上的金融工具要么太老（界面停留在十年前），要么太重（一打开各种弹窗推销开户）。我想做一个干净的、把基础概念和工具都串起来的小站，自己用着舒服顺便也给别人参考。
网站长什么样
Statsify Finance 大致分三块。
分析页 (/analysis)
- 定性分析 (/analysis/qualitative)。讲定性经济概念，每个概念配解释和真实案例
- 定量分析 (/analysis/quantitative)。讲定量经济概念，搭配公式推导和案例
策略页 (/strategy)
- 交易策略 (/strategy/trade)。常见交易策略，配应用案例
- 投资者画像 (/strategy/investor)。介绍不同类型的投资者，帮你定位自己属于哪一类
- 风险管理 (/strategy/risk-manage)。常用的风险控制方法，按行业分类配可视化
其他功能
- 文章 (/articles)。讨论行业近期事件和趋势的文章合集
- 搜索 (/search)。在站内任意搜索文章和概念
- 金融词典 (/finance-terms)。一个清晰版的金融术语词汇表
用了什么技术
整个站建在 Next.js + Tailwind 上，组件库用 Antd，图表用 ECharts。CMS 我没用现成的，直接 Next.js 的 API Route 加 MongoDB 自己撸了一套，数据模型简单可控。认证用 NextAuth，编辑器是 wangeditor。全程 TypeScript。
主要技术栈
- Next.js。React 框架，SSR + 路由 + API 一站式
- Tailwind CSS。样式
- Antd。UI 组件库
- ECharts。图表可视化
- MongoDB。数据库
- NextAuth。认证
- wangeditor。富文本编辑器
- TypeScript。类型
项目结构
代码分得也比较清楚
app/。Next.js 主应用目录，包含页面路由、API 路由、组件
components/。共享组件，分 UI 组件和业务组件两类
models/。MongoDB 数据模型
libs/。数据库连接和工具函数
src/。样式文件和静态配置数据
整个工程不大但麻雀虽小五脏俱全。后续会在这个站上继续加内容和工具，欢迎来逛。
- 作者:LeoQin
- 链接:https://leoqin.com/article/Statsify-Finance-%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
