IBM-FE-REALTIME STOCK TICKER

Project Report ​
Submitted by,
S K Dhina (910023104302)
K Roshini (910023104305)
S Vikash (910023104306)

NM1116
Front-end technologies

In partial fulfillment of requirements

For award of degree of

BACHELOR OF ENGINEERING
in
COMPUTER Science and Engineering

Anna University Regional Campus, Madurai

Anna University, Chennai 600025

November 2025
 ​ ​ ​ ​

COLLEGE CODE​ : 9100

COLLEGE NAME : Anna University Regional Campus

Madurai - 625 019

DEPARTMENT ​ : CSE

TOPIC​ ​ ​ : IBM-FE-REALTIME STOCK TICKER

DATE : 13/11/2025

SUBMITTED BY,

Register No. Name Naan Mudhalvan-ID

910023104302 S K Dhina C1BCDDEAB9A89D2861843963897AA113

910023104304 K Roshini 4A5049F422E738BB38A4F084A2299D88

910023104306 S Vikash 22CC244321890E7BA5B4D3D008D4E536

 ANNA UNIVERSITY REGIONAL CAMPUS
MADURAI – 625 019

Department of Computer Science and

Engineering

BONAFIDE CERTIFICATE

TOPIC​ ​ ​ ​ :

PROGRAMME :

DEPARTMENT :

SEMESTER :

Certified to the bonafide record of practical work

done……………………………….in the NM1116 – Front-end Technologies
during the period Aug - Nov.2025.

Signature of the Faculty incharge ​ Signature of the HOD

Submitted for the Practical Examination held on………………………..…

Internal Examiner ​External Examiner

 IBM-FE-REALTIME STOCK TICKER
PROBLEM STATEMENT:
The primary problem for IBM-FE is to develop a real-time stock ticker
using JavaScript and an API like Alpha Vantage that can reliably provide
periodic updates of stock prices and highlight their changes dynamically.
This requires implementing a mechanism using setInterval() to fetch data,
accurately parsing the API response to extract relevant price information,
and efficiently updating the HTML Document Object Model (DOM) using
innerHTML. A key challenge is to visually represent price fluctuations by
dynamically applying CSS based on the fetched data, ensuring the displayed
information is both accurate and easily digestible for the user.

TARGET AUDIENCE:

· Novice to intermediate investors: This includes individuals who

need a straightforward way to track their portfolio, monitor price
changes, and get basic market insights without needing complex,
professional-grade software.

· Financial enthusiasts and hobbyists: These users follow the

market for interest, education, or to track specific companies,
enjoying the visual representation of stock fluctuations provided by a
real-time ticker.

· Front-end developers and students: This audience uses the

stock ticker as a practical project to learn and demonstrate skills in
JavaScript, API integration, DOM manipulation, and dynamic CSS
styling.

· Fintech developers and startups: For these users, the stock

ticker serves as a foundational component or proof-of-concept for
building more complex financial applications, such as trading
dashboards or investment tools.
 · Educators and trainers: This group can use the ticker as a
teaching aid to demonstrate real-time data visualization and
fundamental programming concepts to students.

OBJECTIVES:
· Develop a functional client-side stock ticker: Create a
web-based application using JavaScript that fetches and displays
real-time stock data.
· Integrate with a third-party financial API: Successfully
connect to a chosen API (e.g., Alpha Vantage) to retrieve
accurate and timely stock price information.
· Ensure periodic data updates: Implement a mechanism (using
setInterval()) to automatically refresh stock prices at regular
intervals.
· Dynamically update the user interface: Manipulate the DOM
to display current stock prices and related metrics without full
page reloads.
· Visually indicate price changes: Implement dynamic CSS
styling to highlight stock price increases and decreases (e.g., using
green for up, red for down).

KEY FEATURES REQUIRED:

· Periodic API Fetching: Automatically fetch latest stock prices via
API at set intervals.

· Data Parsing: Extract current price, change, and percentage

change from API response.

· Dynamic Display: Update HTML DOM with latest stock data

without refreshing.

· Visual Price Change Indicators: Use CSS to highlight price

increases (green) and decreases (red).
 · User-Friendly Interface: Present stock information clearly and
readably.

BRAINSTORMING RESULTS:
➔​ CORE FUNCTIONALITY:

API: Use Alpha Vantage (account for rate limits,

consider alternatives later). Endpoint: GLOBAL_QUOTE.
· Fetch: setInterval() for polling (60s interval). Implement
error handling (network, rate limits, invalid symbols).
Process: Parse JSON to get symbol, price, change, % change.
Handle missing data.

➔​ UI/UX:

· Display: Show symbol, current price, daily change (abs/%).

· Highlight: Dynamic green/red color coding for price changes.

· Basic Styling: Readable fonts, clean layout. Basic responsiveness.

➔​ PERFORMANCE:

· DOM: Minimize updates (batch innerHTML, cache elements).

· JS: Efficient loops. Asynchronous operations (fetch, setInterval).

➔​ FUTURE EXTENSIONS:

· Multiple stocks

· User watchlist, charting (Chart.js)

· Alerts

· More data points (H/L/O/V)

· Dark mode.

Innovative in the Problem Solving:

●​ Use AI-driven predictive analytics for price fluctuation alerts.

●​ Implement microsecond-level data streaming via WebSockets.

 ●​ Personalize tickers based on user portfolio and preferences.

●​ Integrate voice and chatbot assistants for instant stock updates.

●​ Provide offline caching to review last-seen ticks without internet.

Core Problem to Solve:

●​ Delay in receiving live stock updates affects decisions.

●​ Overwhelming raw stock data with no personalization.

●​ Difficulty in monitoring multiple exchanges simultaneously.

●​ Lack of mobile-friendly, lightweight real-time tracking tools.

●​ Inefficient handling of large-scale concurrent user traffic.

Innovative Solutions Proposed:

●​ Real-time streaming using Kafka / WebSocket pipelines.

●​ AI-based recommendation engine for personalized watchlists.

●​ Cross-platform app with responsive, low-latency UI.

●​ Edge computing for faster local stock data distribution.

●​ Smart alerts (SMS, push, voice) triggered by thresholds.

Implementation Strategy:

Phase 1: Build backend with APIs + WebSocket streaming.

Phase 2: Develop web & mobile apps with tick visualization.

Phase 3: Integrate AI recommendation & alert engine.

Phase 4: Add multi-exchange support (NSE, BSE, NYSE, etc.).

Phase 5: Scale infrastructure with cloud auto-scaling.

Challenges and Solution:

1. Challenge: High data latency →

Ø Solution: WebSockets + CDN edge caching.

2. Challenge: Handling millions of
tickes/sec→
Ø Solution: Distributed Kafka
clusters.
3. Challenge: User overload on mobile →

Ø Solution: Lightweight data compression.

4. Challenge: Maintaining accuracy →

Ø Solution: Validate with multiple data feeds.

5. Challenge: Security & fraud →

Ø Solution: End-to-end encryption & audits.

Solution:

●​ Centralized stock tick data pipeline with distributed servers.

●​ AI-powered personalization for user watchlists.

●​ Real-time alert system for volatility, highs, and lows.

●​ Cross-platform UI (web, Android, iOS) for global reach.

●​ Scalable, secure, and compliant architecture.

Expected Outcome:

●​ · Sub-second real-time stock updates to all users.

●​ · Increased user engagement through smart personalization.

●​ · Better decision-making with predictive insights.

●​ · Scalability to handle a global user base.

●​ · Enhanced trust with secure, accurate data feeds.

Next Steps:

●​ Conduct feasibility study with small stock dataset.

●​ Partner with financial data providers (e.g., Bloomberg, NSE).

●​ Build MVP with limited exchange integration.

●​ Test latency, scalability, and user experience.

●​ Roll out beta version to select traders/investor

Project Setup:

1. ​ Environment Setup: Install Node.js and VS Code to

create a development environment for both backend (server)
and frontend (UI).
2. ​ Project Initialization: Create a new folder, initialize it using
npm init -y, and install required dependencies like express and ws.
3. ​ Folder Structure: Organize files into folders — for example,
server.js for backend logic and a public/ folder for frontend HTML, CSS, and
JS.
4. ​ WebSocket Configuration: Set up a WebSocket server in
Node.js to send real-time stock updates to connected clients.
5. ​ Testing and Launch: Run the server locally (node server.js) and
open http://localhost:3000 in a browser to verify real-time data flow and UI
updates.

Core Feature Implementation:

1) Create project and install deps

Open a terminal in your folder (VS Code

integrated terminal): npm init -y
npm install express ws

2) server.js

3) public/index.html
 4) public/app.js

KEY FEATURES REQUIRED:

· Periodic API Fetching: Automatically fetch latest stock prices via API at
set intervals.

· Data Parsing: Extract current price, change, and percentage change from
API response.

· Dynamic Display: Update HTML DOM with latest stock data without
refreshing.

· Visual Price Change Indicators: Use CSS to highlight price increases

(green) and decreases (red).

· User-Friendly Interface: Present stock information clearly and readably.

TESTING CORE FEATURES:

· WebSocket Connection Test: Verify that the frontend successfully

connects to the WebSocket server and receives live data updates without
interruption.

· Data Accuracy Check: Ensure that the stock prices displayed on the UI
match the data sent from the backend in real time.
· UI Update Validation: Test that the prices, percentage changes, and color
indicators (up/down) update correctly on every refresh.
· Performance Testing: Monitor how the ticker performs under multiple
connections and ensure there are no delays or data loss.
· Error Handling: Check how the system reacts to disconnections, server
errors, or invalid data, ensuring smooth recovery and clear user messages.

1. Final Demo Walkthrough

The Real-Time Stock Ticker project demonstrates a live stock

market monitoring system that updates prices dynamically through a
visually appealing and responsive user interface.

· Home Screen Overview:

 When the application is launched, the main dashboard displays a
table of popular stock symbols such as AAPL, GOOGL, MSFT, TSLA,
AMZN, NVDA, and META. Each stock is shown with its current price,
price change (in USD and percentage), and a mini sparkline graph
representing short-term price movement.

· Live Data Updates:

The system connects to a WebSocket server for real-time price
updates. If the WebSocket connection is not available, it automatically
switches to a simulated data feed, generating random but realistic
price fluctuations every second.

· User Interface (UI):

The UI is designed with a modern glass-style theme, gradient
highlights, and color-coded indicators green for price increase, red
for decrease, and gray for no change. A responsive layout ensures
that the ticker adapts smoothly across desktops, tablets, and mobile
screens.

· Connection & Status Indicators:

The top-right corner of the interface displays a connection status
chip and a pulsating status dot to show live or simulated data
modes. This helps users instantly identify whether the app is
connected to a real server or running in offline simulation.

· Dynamic Visualization:
As the prices update, each stock row animates subtly to reflect upward
or downward trends. The sparkline charts update in real-time,
providing a compact graphical view of each stock’s short-term trend.

· Smooth Performance:
 The app efficiently handles frequent updates using lightweight
JavaScript DOM manipulation and canvas rendering, ensuring smooth
transitions and a seamless user experience even under continuous
updates.

· Final Output:
The completed demo presents a fully functional, interactive, and
visually polished stock ticker that can serve as the foundation for
more advanced market-tracking dashboards or financial applications.

2)Testing & Validation:

· Verified dynamic price updates under continuous simulation.

· Tested responsiveness on desktop, tablet, and mobile devices.

· Ensured smooth animations and consistent color transitions.

· Validated accessibility and performance metrics through browser

developer tools.
3) Screenshots
Output:

4. Challenges and Solutions

1. Challenge: Real-Time Data Updates

Problem: Continuous live stock updates require a stable data feed,

and disconnections can interrupt real-time functionality.

Solution: Implemented a JavaScript simulation algorithm

using setInterval() to generate random price changes every second,
ensuring uninterrupted operation even when the WebSocket is
offline.

2. Challenge: Efficient DOM Manipulation

 Problem: Frequent updates to multiple stock rows can slow down
the browser if the entire page or table is re-rendered each time.

​ Solution: Optimized the code to update only changed elements

(price, change, sparkline) instead of reloading the entire table, improving
performance and responsiveness.

3. Challenge: WebSocket Connection Handling

Problem: Maintaining a continuous WebSocket connection is

difficult due to possible network interruptions or server downtime.

Solution: Added an auto-fallback system to switch to simulation

mode on disconnection and used a status indicator (green for connected,
red/orange for disconnected) to inform users in real time.

4. Challenge: Responsive and Adaptive UI

Problem: The interface needed to remain clear and functional on

devices of all sizes — from large monitors to small mobile screens.

Solution: Designed the layout using CSS Grid, Flexbox, and media
queries to automatically adapt the content and spacing for different
screen sizes.

5. Challenge: Visualizing Price Trends Clearly

Problem: Displaying real-time stock trends in limited table space

without cluttering the interface.

Solution: Integrated Canvas-based sparkline graphs for each stock,

offering a compact visual of price movement with minimal performance cost.
 6. Challenge: Smooth Animations and Visual Feedback

Problem: Without animation, users could not easily track which

stock prices changed or how they moved.

Solution: Added CSS transitions and subtle row animations —

rows move slightly up or down depending on price direction — giving
users a clear sense of motion and trend.

7. Challenge: Performance Optimization

​

Problem: Continuous data updates could cause lag or high memory

usage during long sessions.

​ Solution: Limited sparkline data storage to the last 15–20 values per
stock and used lightweight update logic to maintain fast performance.

8. Challenge: User Experience and Accessibility

Problem: Ensuring that the ticker is easy to read and usable by all
users, including those with visual impairments.
Solution: Applied high-contrast colors, clean typography, and
accessibility features like aria- live="polite" to enhance readability and user
comfort.