MUI X Data GridCustom table featuresLeafletPlaywrightNext.jsTypescriptTailwind CSSResponsive Design
AdVentures is a web application designed to effectively present and visualize complex datasets through a user-friendly interface. This project integrates tabular data representation with interactive maps, making it easier for users to analyze and understand various data dimensions.
Behind the Scenes
- Custom Tree Data Implementation:
Develop a custom tree data feature that displays child tables within rows, without utilizing the paid Tree Data feature of MUI X. - Daily Budget Visualization:
The 'daily budget' column is enhanced to visually represent values with a proportional red background, making it easier to quickly assess budget differences. - App Icons with Sorting/Filtering:
The 'Apps' column displays icons instead of names for visual clarity, while still allowing sorting and filtering by app name. - Visualizing geographic data on a map:
Utilizes Leaflet to effectively display and interact with geo-based datasets, providing a clear visual representation of campaigns across countries for effortless exploration of geographical trends. - Playwright End-to-End testing:
Simulates user interactions across different browsers by clicking on each campaign name and verifying that the first displayed geounit matches the expected data from the geounits dataset.
