73 lines
3.1 KiB
Markdown
73 lines
3.1 KiB
Markdown
# SoftTraderFrontend
|
||
|
||
The frontend for a lite Bloomberg terminal.
|
||
|
||
## Features
|
||
|
||
- **Dashboard** — Live clock, NYSE market status indicator (open/premarket/after-hours/closed), rotating stock cards for watched symbols, and news headlines
|
||
- **Watchlist** — Manage a personal list of stock symbols and topics, with swipeable rows and quick navigation to details
|
||
- **Symbol Details** — Live quotes with price change, volume, open/close data, collapsible stock chart (1D–3Y), news headlines with sentiment analysis, and configurable price alerts
|
||
- **Advanced Candlestick Chart** — Full candlestick charting with configurable timeframes and bar sizes, custom date ranges, and interactive crosshair
|
||
- **News & Sentiment** — Per-symbol news feed with pull-to-refresh and an aggregated sentimentality bar
|
||
- **Weather Widget** — Current conditions with configurable location and temperature unit (F/C)
|
||
- **Settings** — Dark/light theme toggle, weather location, temperature unit, 12h/24h time format
|
||
|
||
## Tech Stack
|
||
|
||
- **Framework:** [Next.js 16](https://nextjs.org/) (App Router)
|
||
- **UI:** [React 19](https://react.dev/), [Tailwind CSS 4](https://tailwindcss.com/), [shadcn/ui](https://ui.shadcn.com/) (Radix primitives)
|
||
- **Charts:** [Recharts](https://recharts.org/) (line/area), custom D3-based candlestick chart
|
||
- **Backend API:** `api.dongfeng-systems.org` (quotes, news, user interests, weather)
|
||
- **Analytics:** Vercel Analytics
|
||
- **Language:** TypeScript
|
||
|
||
## Project Structure
|
||
|
||
```
|
||
app/ # Next.js App Router pages
|
||
page.tsx # Home / dashboard
|
||
interests/ # Watchlist
|
||
symbol-details/ # Individual stock detail view
|
||
complex-chart/ # Advanced candlestick chart
|
||
interest-details/ # Topic/interest news feed
|
||
add-item/ # Add symbol or topic
|
||
settings/ # User settings
|
||
components/
|
||
layout/ # StockClockLayout, Sidebar
|
||
pages/ # Page-level components (FrontPage, InterestsPage, SettingsPage)
|
||
widgets/ # StockCard, NewsHeadlines, WeatherWidget, SentimentalityBar, etc.
|
||
stock-chart/ # Line/area stock chart
|
||
candlestick-chart/ # D3-based candlestick chart
|
||
ui/ # shadcn/ui primitives
|
||
providers/ # ThemeProvider
|
||
lib/ # API clients and utilities
|
||
stockApi.ts # Live quotes, historical data
|
||
newsApi.ts # News feed
|
||
userInterestsApi.ts # Watchlist/interests CRUD
|
||
weatherApi.ts # Weather data and preferences
|
||
```
|
||
|
||
## Getting Started
|
||
|
||
### Prerequisites
|
||
|
||
- Node.js 18+
|
||
|
||
### Install and Run
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
The app will be available at [http://localhost:3000](http://localhost:3000).
|
||
|
||
### Scripts
|
||
|
||
| Command | Description |
|
||
| --------------- | ------------------------ |
|
||
| `npm run dev` | Start development server |
|
||
| `npm run build` | Production build |
|
||
| `npm run start` | Start production server |
|
||
| `npm run lint` | Run ESLint |
|