Inspiration PFAS ("forever chemicals") contaminate our planet, from rainwater to the ocean depths, yet remain invisible and under-discussed. We built this to make their global impact visible and urgent.
What it does PFAS-Insight is a React web app that visualizes PFAS contamination data through interactive elements: animated particle simulations, biomagnification chains, affected species profiles, corporate settlement charts, and comprehensive statistics on health effects and sources.
How we built it Using React with TypeScript and Vite for fast development, HTML5 Canvas for dynamic animations, and CSS for responsive design. Components include routing with React Router, custom hooks for scroll animations, and inline styles for theming.
Challenges we ran into TypeScript type errors with refs and hooks, JSX parsing issues with inline CSS, and integrating complex animations. Routing setup and component styling consistency were also hurdles.
Accomplishments that we're proud of Created an engaging, educational app that effectively communicates PFAS risks. Successfully debugged and integrated all components, achieving a polished user experience with smooth animations and data-driven visuals.
What we learned Deepened knowledge of PFAS science and environmental impacts. Improved React/TypeScript skills, especially with hooks, refs, and performance optimization. Learned the importance of user-centric design for complex topics.
What's next for PFAS-Insight Integrate real-time data APIs, add interactive maps with contamination overlays, implement user-submitted reports, and expand to mobile apps. Collaborate with environmental organizations for broader impact.
Built With
- css
- html
- javascript-(jsx)
- react
- react-router
- typescript
- vite
Log in or sign up for Devpost to join the conversation.