Potting Soil Calcualtor
A mobile-friendly web app that calculates optimal potting soil volume and recommends purchase options based on pot shape and size.
👉 Launch App 👉 Source Code (GitHub)
🪴 Project Motivation
When planting in pots, figuring out how much soil to buy can be surprisingly tricky. Beginners often struggle with the volume calculation depending on pot shape, size, and quantity.
I built this tool to provide an intuitive, mobile-friendly solution that simplifies repotting for real gardening users.
🔧 Tech Stack
- React + TypeScript: Component-based architecture with type safety
- Vite: Lightning-fast build tool
- Tailwind CSS: Utility-first, responsive styling
- Netlify: Static deployment with auto HTTPS
- Google Analytics (GA4): User behavior tracking
- Jest + ts-jest: 100% unit test coverage
📦 Key Features
- Support for 4 pot shapes: rectangle, cylinder, cone, custom surface area
- Automatic soil volume calculation (liters), assuming 80% fill rate
- Product recommendation for 20L and 8L bags
- Drainage gravel (Masato) suggestion for better potting
- Full input validation: required fields, numeric limits, edge cases
- Fully responsive mobile-first design
- SEO optimized (Open Graph tags, sitemap.xml, robots.txt, canonical URLs)
🎨 Design with AI
- Started with a simple hand-drawn sketch and selected a natural color palette.
- Used Google Stitch to generate design concepts based on UI layout, target users, and key features.
- Created pot shape icons using ChatGPT’s image generation from my initial sketches.
- Combined AI tools to quickly build a cohesive, production-ready UI without a dedicated designer.
💡 Engineering Highlights
- Focused on product thinking: integrates purchase flow to encourage real transactions
- Built robust input validation & error handling for production-readiness
- Implemented full unit testing for calculation logic using Jest
- Managed full deployment pipeline with Netlify and custom SEO configuration
🔑 Key Skills Demonstrated
- Component-based UI design with Tailwind CSS
- AI-assisted design workflow (Google Stitch, ChatGPT image generation)
- SEO optimization (Open Graph, sitemap, robots.txt)
- Integrated analytics with Google Analytics (GA4)
🎯 Takeaway
This project started as a simple calculator but evolved into a fully functional, production-ready web app. It demonstrates:
- My ability to own the entire frontend product cycle
- My attention to user experience, input robustness, and design polish
- My skill in leveraging AI tools to accelerate design and prototyping
- My experience with deployment, SEO, and analytics integration