circularity.guide

• 

  Project Canvas overview

• 

  The analytics overview of a project - similar to an EPD document

Inspiration

Physical products impact our environment. And the ones responsible for that, are industrial designers and product developers. As an industrial designer and father of two son's, I feel a huge burden in my everyday work life to make the best decision in the design of the physical product but also choice of materials. I experience it often that this decisions are skipped or rushed, because they are complex and time consuming.

This should not be like this! It should be intuitive, logical and simple.

What it does

Circularity.Guide allows to quickly put together the 'bill of materials' of a physical product as a moodboard. Simultaniously the web app gives you a scoring of your current selection of materials and means of assembly, including a warning of bad choices and recommendation for better solutions.

A dashboard gives an instant indicative EPD like overview the physical products' material choices.

How we built it

The web app is meant to be build with react vite on vercel with supabase.

Challenges we ran into

Repeated error fixing and reset of the entire project. Also 'deploying' has been challenging :) And mainly the time waiting for the agent to fix the prompted task.

Accomplishments that we're proud of

Straight forward UI with intuitive exploration of material decisions impact.

What we learned

The whole strange animal of a Web App.

What's next for circularity.guide

Completing an accurate data set for all materials needed. Share the result with peers and hope to have made a little dent in the traditional design process.

Built With

• auth
• bar-charts)-**react-hook-form**-(form-management)-###-backend-&-database-**supabase**-(perfect-choice-postgresql
• d3.js
• dnd
• exceljs
• file-storage)-**supabase-edge-functions**-(serverless-functions-for-complex-calculations)-###-pwa-&-mobile-**vite-pwa-plugin**-(service-worker
• framer
• optimal-for-static-hosting)-**typescript**-(type-safety-for-complex-data-structures)-**tailwind-css**-(rapid-ui-development)-**framer-motion**-(smooth-animations-for-drag-and-drop)-**react-dnd**-(drag-and-drop-functionality)-**recharts**-(sankey-diagrams
• papa
• parse
• pdf.js
• pie-charts
• pwa
• react
• real-time
• rechart
• supabase
• tailwind
• typescript
• vite
• workbox