FinVista Dashboard (kite) 📊

Welcome to the FinVista Dashboard — the heart of the FinVista trading ecosystem.

This is where authenticated users step into a realistic, modern, and interactive trading environment.

Designed with scalability, performance, and user experience in mind, the dashboard offers:

• ✨ Real-time stock tracking
• 📈 Interactive charts & analytics
• 🧩 Personalized watchlists
• 🔐 Secure profile management

Think of this as your command center for trading — blending clean UI with powerful functionality.

Live Demo : FinVista Trading Dashboard

---

Table of Contents

• Overview
• Key Features
• Dashboard Workflow
• Tech Stack
• Project Structure
• Getting Started
• Backend Repository
• Authentication Flow
• Login Flow

---

📌 Overview

The FinVista Dashboard focuses on delivering a realistic trading environment with:

• Real time market updates : Users are able to search stocks & they can buy, also check holdings and orders, in table format as well as in charts
• Interactive charts for stock analysis
• User-specific data management (watchlists)

This project demonstrates advanced state management, secure API integrations, and modular component design that make the dashboard highly scalable and maintainable.

✨ Key Features

• Stock Search & Orders – Quickly search scrips and simulate buy/sell orders.

• Real-Time Updates – Market prices are fetched dynamically, giving a live trading feel.

• Interactive Charts – Visual insights into stock performance using charting libraries.

• User Profile & Settings – Manage profile details, update password, and configure account preferences.

• Secure Sessions – JWT-based authentication ensures a safe and reliable user experience.

🔄 Dashboard Workflow

Once logged in, the user can:

1. Search Stocks → Find real-time prices of desired stocks.
2. Analyze Performance → Use charting tools to study trends and take informed actions.
3. Simulate Orders → Experience a near real-time order placement environment.
4. Profile Management → Update settings like password, skills, or availability (connected with backend).

💻 Tech Stack / Skills

Frontend (Dashboard)

• ReactJS (Component-based UI)
• Redux Toolkit (State management for authentication, watchlist, and stock data)
• Tailwind CSS (Utility-first styling)
• Chart.js (Interactive stock charts)
• Axios (API communication with backend)

Backend (Shared)

• Node.js + Express.js
• MongoDB + Mongoose
• Firebase Authentication (OTP Verification)
• Redis (Caching sessions & OTPs)

📂 Project Structure

📁 trading-dashboard
├── 📘 docs                # Documentation & guides
├── 📦 node_modules        # Project dependencies
├── 🌐 public              # Static assets (icons, images, etc.)
├── 💻 src                 # Core application source code
│   ├── 🔌 api             # API calls & backend integration
│   ├── 📊 charts          # Stock charts & analytics components
│   ├── 🧩 Components      # Reusable UI components
│   ├── 🗂️ data            # Static data, mock files, constants
│   ├── 🎣 hooks           # Custom React hooks
│   ├── 📄 Pages           # Page-level components (Dashboard, Profile, etc.)
│   ├── ⚙️ App.jsx         # Root application component
│   ├── 🔥 firebase.js     # Firebase configuration
│   ├── 🎨 index.css       # Global styles
│   ├── 🏁 main.jsx        # Application entry point
│   └── 🚧 PathNotFound.jsx# 404 page handler
├── ⚙️ .env                # Environment variables
├── 📑 .gitignore          # Git ignore rules
├── 📝 README.md           # Project documentation
├── 🛠️ vite.config.js      # Vite configuration
├── 📦 package.json        # NPM dependencies & scripts
└── 📦 package-lock.json   # Dependency lock file

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/Afzal14786/trading-dashboard.git
cd trading-dashboard

2. Install Dependencies

npm install

3. Environment Variables Create a .env file in root with:

REACT_APP_BACKEND_URL=<your_backend_url>
REACT_APP_FIREBASE_API_KEY=your_api_key

4. Run Development Server

npm run dev

🛠️ Backend Repository

The backend powering this dashboard is located here: Backend Repository

It handles:

• Authentication
• Watchlist CRUD
• Order simulation APIs
• Profile management
• Integration with Firebase + Redis
• MongoDB for storage

---

🔐 Authentication Flow

The FinVista Dashboard comes with a secure and user-friendly login system. Users can access their trading dashboard either via Phone Number or Unique User ID.

📝 Signup (from Landing Page)

1. Users start at the FinVista Landing Page.
2. They create an account by entering basic details (Name, Email, Phone Number, Password).
3. During signup, a temporary OTP is used (as phone billing is currently disabled).
   • 🔢 There are 10 demo phone numbers with pre-mapped OTPs available in the frontend README.md.
   • Users can select any of these to create their account.

🔑 Login Dashboard

1. Login with Phone Number
   • Enter Phone Number + Password.
   • A popup appears: “OTP sent to your mobile number”.
   • Since live phone auth is not enabled, users must use the same OTP they used during signup.
   • After successful OTP verification, the user is redirected to the Dashboard Home.

Image Suggestion 📸:

2. Login with User ID

• Enter 7-digit Unique User ID + Password.
• A 6-digit OTP is automatically sent to the user’s registered email address.
• Enter the OTP → upon verification, the user is redirected to the Dashboard Home.

Image Suggestion 📸:

---

⭐ Like This Project?

If you enjoy working with this project:

• Give it a 🌟 star

• Follow me for more:

  • 🐙Github
  • 🔗Linked In
  • 📸instagram
  • 🔗Link Tree

---

Thank you for your support — Happy Coding! 🚀👨‍💻✨