This project was developed for a college fest mock stock event, where participants acted as traders, making buy and sell decisions based on real-time price movements. The challenge was to create a fast, reliable, and real-time stock price dashboard that could handle multiple users checking stock movements simultaneously. Since the event mimicked real-world trading conditions, the platform needed to update stock prices dynamically while ensuring a smooth and responsive user experience. The tracker integrated Google Sheets as the backend for easy price updates by event coordinators and Framer as the frontend for an interactive user interface.
Problem Statement
Real-time Price Updates – The stock prices needed to change dynamically as event coordinators updated them in Google Sheets.
Handling Multiple Users – Around 20+ participants would be actively monitoring prices and making decisions simultaneously.
Minimal Delay – Prices needed to refresh frequently without overwhelming Google Apps Script’s execution limits.
UI Consistency – The tracker had to visually align with the event’s theme, with clear indicators for price changes.
Scalability – The solution needed to support multiple trading rounds with minimal setup changes.
Process & Implementation
1. Data Management with Google Sheets
A Google Sheet was used to store stock data, including:
Company Name
Current Price
Price Change
Percentage Change
Event coordinators could easily update prices in the sheet, ensuring flexibility.
2. Google Apps Script Backend
A Google Apps Script Web App was deployed to serve stock data as JSON.
To optimize performance:
Caching was implemented to reduce unnecessary requests.
The script checked if prices changed before sending an update.
Execution time was minimized by fetching only necessary data.
3. Framer Frontend for Real-Time Updates
A Framer-based React component was built to display stock prices dynamically.
Features included:
Auto-refresh every 3 seconds to check for new price updates.
Color-coded changes:
Green for price increase
Red for price decrease
Gray for no change
Optimized responsiveness to work across different screen sizes.
4. Avoiding API Limits
Instead of continuously requesting data, the script checked if stock prices changed before updating.
The frontend avoided redundant updates, reducing API call frequency.
Final Outcome
Successfully deployed the stock tracker for the mock stock event at the college fest.
Seamless real-time updates ensured traders had the latest prices without refreshing manually.
The system handled multiple users simultaneously with minimal performance lag.
Framer UI provided a smooth and engaging experience for participants.
Event coordinators could update stock prices instantly via Google Sheets.
Key Learnings
Optimizing API calls is crucial for reducing server load and execution limits.
UI feedback through color indicators helps users quickly interpret stock movements.
Google Apps Script can serve as a lightweight backend when used with caching.
Framer is effective for real-time data visualization when structured efficiently.
This project successfully delivered a scalable, real-time stock tracker that enhanced the experience of the mock stock event, making it a practical simulation of real-world trading dynamics.
