{"id":28221158,"url":"https://github.com/7wilightxdev/market-stream","last_synced_at":"2025-06-10T11:31:34.754Z","repository":{"id":278608831,"uuid":"936161043","full_name":"7wilightxdev/market-stream","owner":"7wilightxdev","description":"My personal playground in Flutter, MarketStream is a real-time market data visualization app, this project delivers a minimalist, high-performance UI for tracking market prices and custom candlestick chart. Every pixel, every interaction had to be manually calculated and optimized.","archived":false,"fork":false,"pushed_at":"2025-02-24T12:20:32.000Z","size":997,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-18T05:16:04.459Z","etag":null,"topics":["binance-api","candlestick-chart","custompainter","dart","financial-data","flutter","realtimedata","rendering","streaming-data","websocket"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/7wilightxdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-20T16:17:06.000Z","updated_at":"2025-04-24T18:08:33.000Z","dependencies_parsed_at":"2025-02-20T18:25:20.790Z","dependency_job_id":"d871c189-f5a8-4cc4-a1ef-7ee82850a877","html_url":"https://github.com/7wilightxdev/market-stream","commit_stats":null,"previous_names":["haonguyenuet/fin-app","haonguyenuet/market-stream","7wilightxdev/market-stream"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7wilightxdev%2Fmarket-stream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7wilightxdev%2Fmarket-stream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7wilightxdev%2Fmarket-stream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7wilightxdev%2Fmarket-stream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/7wilightxdev","download_url":"https://codeload.github.com/7wilightxdev/market-stream/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7wilightxdev%2Fmarket-stream/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259066750,"owners_count":22800189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["binance-api","candlestick-chart","custompainter","dart","financial-data","flutter","realtimedata","rendering","streaming-data","websocket"],"created_at":"2025-05-18T05:15:53.269Z","updated_at":"2025-06-10T11:31:34.742Z","avatar_url":"https://github.com/7wilightxdev.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Market Stream\n\nMy personal playground in Flutter, MarketStream is a **real-time market data visualization app**, this project delivers a **minimalist, high-performance UI** for tracking market prices and custom candlestick chart. Every pixel, every interaction had to be **manually calculated and optimized**.\n\n## 1. Key Features\n\n- ✅ **Live Market Data** – Real-time price tracking for thousands of trading pairs with efficient viewport rendering\n- ✅ **Scalable Data Handling** – Ensures smooth performance with large datasets.  \n- ✅ **Custom Candlestick Chart** – Built from scratch - no dependences, supporting drag, zoom, and crosshairs.  \n- ✅ **Real-time Chart Updates** – Smooth animations with live candlestick data.  \n- ⏳ **Technical Indicators** – Upcoming support for moving averages and trend lines.\n\n## 2. The Challenge\n\n### 2.1 Market Data Streaming\n\nDisplaying a **real-time symbol list** with prices introduces another layer of complexity:  \n\n- **Selective Updates** – Avoid re-rendering the entire list when only a few symbols update.\n- **Dynamic WebSocket Management** – Subscribe to visible symbols and unsubscribe from off-screen ones to optimize performance and reduce network load.\n- **Scalability** – Binance supports thousands of trading pairs, meaning updates come in fast and frequently. A naive approach could overwhelm the app with unnecessary UI rebuilds.  \n\nThis part of the project demands a smart **state management strategy**, along with techniques like **lazy loading, viewport tracking, and granular updates** to ensure smooth performance.\n\n### 2.2 Custom Candlestick Chart  \n\nCrafting a candlestick chart from scratch is far from simple. Unlike static UI components, a candlestick chart requires:  \n\n- **Optimized Rendering** – To optimize performance, the chart must avoid drawing off-screen elements. Every candle, grid line, and label should be conditionally drawn based on the viewport.\n- **Precision Coordinate Translation** – Each price movement must be accurately translated into screen coordinates.\n- **Robust Data Optimization** – Keeping performance smooth even with thousands of candles.\n- **Real-time Updates** – Ensuring smooth animations and preventing UI lag.  \n- **Touch Interactions** – Pinch-to-zoom, crosshairs, and dynamic scaling.\n\nThis required deep optimization techniques, manual calculations, and careful use of **Flutter's CustomPainter** to keep performance smooth without relying on external libraries.  \n\n## 3. Tech Stack\n\n- **Flutter** (Stack and CustomPainter for chart drawing)\n- **WebSocket \u0026 REST API** (for real-time Binance data)\n- **State Management** (Riverpod and MVVM architecture)\n\n## 4. Screenshots\n\n| LiveMarket | Crosshairs |\n|---|---|\n| ![Screenshot1](screenshots/market_sc.png)  | ![Screenshot2](screenshots/crosshair_sc.png) |\n\n| Zoom In | Zoom Out |\n|---|---|\n| ![Screenshot3](screenshots/zoom_in_sc.png) | ![Screenshot4](screenshots/zoom_out_sc.png) |\n\n| Symbol Picker | Interval Picker |\n|---|---|\n| ![Screenshot3](screenshots/symbol_picker_sc.png) | ![Screenshot4](screenshots/interval_picker_sc.png) |\n\n---\n\nBuilt with ❤️ and a lot of math in **Flutter**. Contributions \u0026 feedback are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7wilightxdev%2Fmarket-stream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F7wilightxdev%2Fmarket-stream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7wilightxdev%2Fmarket-stream/lists"}