[{"data":1,"prerenderedAt":165},["ShallowReactive",2],{"project-covid-infection-tracker":3},{"id":4,"title":5,"body":6,"date":147,"description":148,"extension":149,"icon":150,"image":151,"live":152,"meta":153,"navigation":154,"path":155,"repo":152,"seo":156,"stem":157,"tags":158,"__hash__":164},"projects\u002Fprojects\u002Fcovid-infection-tracker.md","COVID-19 Infection Tracker",{"type":7,"value":8,"toc":139},"minimark",[9,14,18,25,29,35,51,56,73,77,103,107,110,136],[10,11,13],"h2",{"id":12},"overview","Overview",[15,16,17],"p",{},"Built in 2020 during the height of the COVID-19 pandemic, this full-stack application aggregated real-time infection statistics from trusted global data sources and presented them through an interactive, country-searchable dashboard. The backend (Python) normalised data from multiple sources into a unified REST API, while the frontend (Vue.js) provided live visualisations and statistical metrics.",[15,19,20],{},[21,22],"img",{"alt":23,"src":24},"COVID-19 Dashboard","\u002Fassets\u002Fcoronavirus.jpg",[10,26,28],{"id":27},"architecture","Architecture",[15,30,31],{},[32,33,34],"strong",{},"Backend (Python)",[36,37,38,42,45,48],"ul",{},[39,40,41],"li",{},"Aggregated COVID-19 data from multiple trusted sources",[39,43,44],{},"Normalised inconsistent data formats into a standardised schema",[39,46,47],{},"Exposed a RESTful API for frontend consumption",[39,49,50],{},"Scheduled periodic data refreshes to maintain near real-time statistics",[15,52,53],{},[32,54,55],{},"Frontend (Vue.js)",[36,57,58,61,64,67,70],{},[39,59,60],{},"Responsive dashboard with global and country-level statistics",[39,62,63],{},"Real-time search and filtering by country",[39,65,66],{},"Colour-coded stat cards for quick visual assessment (cases, deaths, recoveries, critical cases)",[39,68,69],{},"Per-million metrics for contextual comparison across regions",[39,71,72],{},"Mobile-optimised layout",[10,74,76],{"id":75},"key-features","Key Features",[36,78,79,85,91,97],{},[39,80,81,84],{},[32,82,83],{},"Global summary"," — aggregate worldwide totals across all metrics",[39,86,87,90],{},[32,88,89],{},"Searchable country index"," — instant lookup of any country's current statistics",[39,92,93,96],{},[32,94,95],{},"Stat cards"," — total cases, active cases, recoveries, deaths, critical cases, new cases\u002Fdeaths, and per-1M ratios",[39,98,99,102],{},[32,100,101],{},"Responsive design"," — seamless experience across desktop and mobile devices",[10,104,106],{"id":105},"learnings","Learnings",[15,108,109],{},"This project was formative in understanding full-stack data pipelines. Key takeaways included:",[36,111,112,118,124,130],{},[39,113,114,117],{},[32,115,116],{},"Data normalisation"," — reconciling inconsistent reporting formats from different sources",[39,119,120,123],{},[32,121,122],{},"API design"," — building reliable endpoints that serve rapidly changing data",[39,125,126,129],{},[32,127,128],{},"Component-based UI"," — structuring Vue.js components for reusability and maintainability",[39,131,132,135],{},[32,133,134],{},"Real-time systems"," — handling data freshness, caching, and user expectations during a global crisis",[15,137,138],{},"The experience reinforced the value of clean, accessible dashboards during critical events — users relied on this application to make informed decisions about health and safety.",{"title":140,"searchDepth":141,"depth":141,"links":142},"",2,[143,144,145,146],{"id":12,"depth":141,"text":13},{"id":27,"depth":141,"text":28},{"id":75,"depth":141,"text":76},{"id":105,"depth":141,"text":106},"May 2020","A full-stack data aggregation and visualisation platform tracking real-time COVID-19 statistics globally, with a Python backend and Vue.js frontend.","md","public","\u002Fassets\u002Fproj-covid.jpg",null,{},true,"\u002Fprojects\u002Fcovid-infection-tracker",{"title":5,"description":148},"projects\u002Fcovid-infection-tracker",[159,160,161,162,163],"Python","Vue.js","Data Aggregation","Visualisation","API","8_Y6g_l1BJI_K9tIxIcEszWUJ9I-rrB7OLC7Naqg1_c",1780176250364]