TradeView360

A full-stack trading simulator web application that mimics TradingView-style charting and trading interactions. Built using Angular, ASP.NET Web API, Lightweight-Charts, and Material UI.

---

📦 Features

• 📈 TradingView-style charts (candlestick + line chart)
• 📊 Volume overlays and moving average indicators
• 🎯 Real-time OHLC + change tracking on hover
• 🟢 Buy/Sell stock simulation dialog
• 🔁 Toggle between line/candle chart using icons
• 🧮 Auto-calculated total amount for trades
• 🧰 Modular architecture with reusable Toolbar component
• 🔌 Backend API (ASP.NET Core) for portfolio operations

---

🚀 Tech Stack

Frontend:

• Angular 17+
• TypeScript
• Lightweight-Charts by TradingView
• Angular Material (MUI)
• technicalindicators (for SMA)
• Axios for HTTP

Backend:

• ASP.NET Core Web API
• Entity Framework Core
• SQL Server
• CORS enabled for frontend/backend communication

---

🛠️ Setup Instructions

📁 Frontend (Angular)

Step into frontend directory

cd TradeView360-frontend

Install dependencies

npm install

Run the development server

ng serve --open

🔙 Backend (ASP.NET Core)

Open in Visual Studio or use CLI

cd TradeView360-backend

Run via Visual Studio or .NET CLI

dotnet run

Make sure your API runs at:

https://localhost:7091

🌐 API Endpoints

• GET /api/Stocks/from-json – Load historical stock data
• POST /api/Portfolio/BuyStock/{userId} – Simulate a stock buy transaction

Payload format :

{
 "symbol": "INFY:NSE",
 "quantity": 30,
 "averagePrice": 1500
}

📁 Project Structure

TradeView360/
│
├── TradeView360-frontend/          # Angular 17 app
│   ├── app/
│   │   ├── components/
│   │   │   ├── stock-chart/
│   │   │   │   ├── stock-chart.component.ts
│   │   │   │   ├── stock-chart.component.html
│   │   │   │   └── stock-chart.component.css
│   │   │   └── trade-dialog/
│   │   │       └── trade-dialog.component.ts / html
│   │   ├── toolbar/
│   │   │   └── toolbar.component.ts / html
│   ├── index.html
│   └── main.ts
│
└── TradeView360-backend/           # ASP.NET Core Web API
    ├── Controllers/
    ├── Models/
    ├── Services/
    └── Program.cs / Startup.cs

🎨 UI Preview

Chart View Trade Dialog 📉 Candlestick / Line 💰 Buy/Sell with market/limit toggle

✅ TODO (Future Features)

• 📋 Portfolio summary screen
• 📈 Profit & loss reports (Pdf, Excel, Csv) by RDLC
• 📅 Date range selector
• 🔔 Price alerts
• 💹 Technical indicators (RSI, MACD, Bollinger Bands)
• 🧠 AI-based recommendations (planned)

👨‍💻 Author

• Mahadev Pimpalkar
• LinkedIn: https://www.linkedin.com/in/mahadev-pimpalkar-28b3b7176/
• For any inquiries, please reach out to Mahadeopimpalkar6@gmail.com.