How yuvan43/stock-trading-app works
StockWise is a browser-based stock-market learning and portfolio demo with illustrative data, not live market services. Users browse the market snapshot and sample stocks, explore companies and maintain a watchlist, track portfolio holdings, read financial learning guides, or create and revisit a demo profile. The React app routes these experiences and shares user, watchlist, and portfolio state through a context provider, persisting that state in browser storage. The graph follows the sampled routing and component code; no backend or external market-data integration is shown.
Main entry points: App.jsx App Router · AppContext.jsx Shared App State · Companies.jsx Company Explorer · News.jsx Learning Guides
Components 13
App Runtime
- React Entry
src/main.jsx - App Router
src/App.jsx - Navigation Bar
src/components/Navbar.jsx - Shared App State
src/context/AppContext.jsx
Market Discovery
- Market Home
src/pages/Home.jsx - Stock Table
src/components/StockTable.jsx - Company Explorer
src/pages/Companies.jsx
Learning
- Learning Guides
src/pages/News.jsx
Account And Portfolio
- Portfolio Tracker
src/pages/Portfolio.jsx - Demo Login
src/pages/Login.jsx - Demo Signup
src/pages/Signup.jsx
Other components
- Browser User
- Browser Storage
Connections 22
- Browser User → React Entry: opens app
src/main.jsx - React Entry → App Router: renders
src/main.jsx - App Router → Shared App State: provides state
src/App.jsx - App Router → Navigation Bar: renders
src/App.jsx - App Router → Market Home: routes to
src/App.jsx - App Router → Company Explorer: routes to
src/App.jsx - App Router → Portfolio Tracker: routes to
src/App.jsx - App Router → Learning Guides: routes to
src/App.jsx - App Router → Demo Login: routes to
src/App.jsx - App Router → Demo Signup: routes to
src/App.jsx - Shared App State → Browser Storage: reads and writes
src/context/AppContext.jsx - Navigation Bar → Shared App State: reads user
src/components/Navbar.jsx - Market Home → Stock Table: renders filtered stocks
src/pages/Home.jsx - Stock Table → Company Explorer: links to
src/components/StockTable.jsx - Company Explorer → Shared App State: updates watchlist
src/pages/Companies.jsx - Portfolio Tracker → Shared App State: updates holdings
src/pages/Portfolio.jsx - Demo Login → Shared App State: sets user
src/pages/Login.jsx - Demo Signup → Shared App State: sets user
src/pages/Signup.jsx - Demo Login → Browser Storage: reads profile
src/pages/Login.jsx - Demo Signup → Browser Storage: saves profile
src/pages/Signup.jsx - Learning Guides → Company Explorer: links to
src/pages/News.jsx - Learning Guides → Portfolio Tracker: links to
src/pages/News.jsx