What tech stack should I be using for a drag and drop virtual landscape planning web app?
What libraries or technologies should I be using to create a web app for gardeners that allows them to drag and drop plants on to a virtual yard?
The requirements would be as follows
- As a gardener, I should be able to select from a list of plants
- As a gardener, I should see a top down view of my virtual yard
- As a gardener, I should be able to select a plant and drag it to my virtual yard
- As a gardener, I should be able to drop the plant on to my virtual yard and it would automatically adjust for the space it needed
- As a gardener, I should be able to drop additional plants to the virtual yard and it automatically prevent me from overlapping other plants that have already been dropped
I can't really answer your question but I'm excited to see what this looks like and love to try it out when you launch!
Awesome! What got you interested in this?
Well for one, I'm an architect so laying things out and in grids is exciting to me lol but I've also wanted to expand my garden and I think this could be a pretty cool tool to figure out how much space I'll need to build raised beds and what plants work best where and how many.
Cool. This was a problem I also had myself as I was planning my front yard landscaping project
What would you say are the top three must have features this web app should have aside from the five I've listed in my post above?
I think an important thing is figuring out scale. How do you approach the scale of different yards to be able to then garden specific areas. Is this some type of google earth plug-in that gathers plot size and dimensions and uses your yard as a background image?
A second feature that I would want is a really good database of plants. If I've got a big box Home Depot near me that carries plants, can you give me a list of plants I can expect to pick up there vs huge database that I've got to hunt down plants for. Along the same lines would be to break it down to what grows in my Zone. I currently live in a Zone 9 but I used to live in Zone 6 so the plants I used to grow up North won't grow in Texas and vice versa.
I think it can get very technical really fast and I'm not sure if that's how far you want to go but hopefully these ideas lead you to something!
Thank you for the feedback. Yes, I was wanting to get technical with this
Would you be interested in testing the prototype when I complete it?
If I were to start a blog, what kind of content would you want to see?
I would totally try this out when you've got a working prototype.
I don't really follow garden blogs but I'd assume any kind of hacks or space saving ways to garden effectively would be ideal for your audience.
I did a short screen recording of what I have so far in this Dropbox link. Each of the squares you see in the grid represents one square foot. Eventually, I would adjust the amount of space a plant takes up based on it's mature spread/width.
Appreciate your feedback.
https://www.dropbox.com/s/qd6cyp3uqqvglzf/bluplanted.mov?dl=0
It's looking good so far!
I think once the plants become more responsive to the grid, you'll have a better look at what you can really plant. What about the images of the plants/trees? Have you given that any thought yet? If you look up "cad plants in plan" maybe you can insert each plant's appropriate image.
Thanks for the feedback and suggestion!
Do you mean CAD plants like these? https://dwgmodels.com/1213-trees-side-view.html
Do you think it's better to have the actual image of the plant on the grid? I thought it would look a bit tacky to have such small images of the plants on the grid so I used animated icons instead since you'll have an actual photo of what it will look like along the left hand side or eventually in the pop up as you hover over it
There will also be real life images of the plants along the left hand side
"Do you think it's better to have the actual image of the plant on the grid?"
Yeah I think what you wrote in that comment sounds good! It just wasn't shown so I was just trying to provide a simpler solution.