Skip to content

README.md

Latest commit

 

History

History
96 lines (70 loc) · 4.07 KB

README.md

File metadata and controls

96 lines (70 loc) · 4.07 KB
Raw

📈 Stock Analyses Dashboard — stocksfundamentals.online

A dark-themed financial analysis dashboard built with React + Vite + TypeScript + Tailwind CSS v4. Features real-time market ticker, clean search and filter capabilities, and company deep-dive analysis pages.

🚀 Tech Stack

  • React 19 + TypeScript
  • Vite (esbuild, fast HMR)
  • Tailwind CSS v4 (integrated via @tailwindcss/vite plugin)
  • React Router v7
  • react-markdown + rehype plugins for institutional analysis rendering
  • Python backend (port 8081) for notifications + API

📂 Project Structure

src/
├── components/
│   ├── Common/        — SubscribeCard, LoadingSpinner
│   ├── Dashboard/     — AnalysisGrid
│   ├── Home/          — SearchBar, StatsBar, AnalysisCard
│   └── Layout/        — Header, Footer, Layout
├── hooks/             — useAnalyses, useSearch, useNotification
├── pages/             — HomePage, AnalysisPage, CompanyPage, AboutPage, ContactPage, etc.
├── services/          — analysisService
└── types/             — TypeScript interfaces

🎨 Layout & UI Enhancements

Recently refactored to resolve overlapping text, layout constraints, and alignment issues:

  1. Removed Tags Section: Cleaned up clutter by removing the legacy TagPills component to focus purely on search and category sorting.
  2. Revamped Search Bar: Redesigned to guarantee search icon and placeholder text never overlap. The icon resides in its own isolated layout pill.
  3. Card Spacing & Layout: Fixed grid-gap spacing (style={{ gap: '2rem' }}) and resolved stacking context issue (relative hover:z-10) so hovered cards float above neighboring cards smoothly without bleeding underneath.
  4. Card Shadow Clipping: Removed overflow: clip from .premium-card in index.css to allow premium card shadows to render properly while maintaining sheen animation constraints.
  5. Static Pages Overhaul: Revamped About, Contact, Risk Disclaimer, Privacy Policy, and Footer pages with premium card grids, custom SVG-based layout components, email CTA interactions, and structured content.
  6. Tailwind CSS v4 Stance: Critical layouts use direct inline styles to guarantee rendering where dynamic runtime classes may not have been scanned during compilation.

🏃 Run Locally

npm install
npm run dev        # Dev server on port 5173
npm run build      # Production build to dist/

🌐 Deployment

  • Nginx serves from /var/www/stock-analyses-react/dist/
  • SPA fallback: try_files $uri $uri/ /index.html
  • HTTPS via Let's Encrypt
  • Deploy via ./deploy.sh

📄 Pages

Route Page
/ Home — Dashboard with ticker, featured hero, search/sort tools, and analysis grid
/analysis/:slug Full analysis markdown render
/company/:ticker All deep-dives for a stock
/about About page (overview, creator info)
/contact Contact page (mail direct link, FAQ accordion)
/disclaimer Disclaimer (risk warning, positions disclosure)
/privacy Privacy policy (notifications, telemetry control)

📊 Data Sources

  • Analyses: Markdown files in public/analyses/. Each file's frontmatter is the single source of truth for its metadata. At build time scripts/generate-analyses-data.js scans them and generates src/data/analyses.generated.ts (imported by the app) and public/analyses.json — plus the sitemap and per-analysis OG tags. Nothing is hand-maintained in sync.
  • Market data: src/services/marketService.ts (currently simulated placeholder values).
  • FII/DII tracking: Inline data from analysis markdown

✍️ Publishing a new analysis

See PUBLISHING.md for the full contract. TL;DR:

node scripts/new-analysis.js --title "..." --ticker "TICKER" --tags "a,b" \
  --summary "..." --body-file draft.md
npm run build && ./deploy.sh

Never hand-edit src/data/analyses.generated.ts or public/analyses.json — they are regenerated on every build.