{"_path":"/portfolio/strelak-community-garden","_draft":false,"_partial":false,"_empty":false,"title":"Watch it grow: Developing a community garden website","description":"This was a lovely community garden project which I supported by volunteering as a web designer. The landing page I created provided a great for people to join the project.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"watch-it-grow-developing-a-community-garden-website"},"children":[{"type":"text","value":"Watch it grow: Developing a community garden website"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This was a lovely community garden project which I supported by volunteering as a web designer. The landing page I created provided a great for people to join the project."}]},{"type":"element","tag":"h2","props":{"id":"garden-needs-water-and"},"children":[{"type":"text","value":"Garden needs water and..."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website's goal was to bring in people interested in gardening. The landing page enabled the visitors to register as either a volunteer (helping out in the garden) or a gardener (owning a piece of the garden bed to grow their plants in). I created a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"database"}]},{"type":"text","value":" which stored the information about the registered gardeners and calculated how many free spots were left for people to book."}]},{"type":"element","tag":"h2","props":{"id":"tech-for-the-nature"},"children":[{"type":"text","value":"Tech for the nature"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website offers three ways of participating. Registering as a volunteer or a gardener, or subscribing to a newsletter. I created a special "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"form for each action"}]},{"type":"text","value":". The forms are linked to a shared email and to a central database, where the user data is safely stored. I used "},{"type":"element","tag":"a","props":{"href":"https://docs.netlify.com/forms/setup/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Netlify Forms"}]},{"type":"text","value":" to link the forms to the admin email. This way, the garden team gets a notification about each registration."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I used "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase"}]},{"type":"text","value":" to store the data. This makes it easy to link the database with the forms through the API. It also allows for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"scalability"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"efficient data management"}]},{"type":"text","value":". The forms are built with Vue.js. This makes it very easy to implement important features such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"validation and error messages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website was hosted on Netlify - did you know that "},{"type":"element","tag":"a","props":{"href":"https://www.netlify.com/sustainability/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"static hosting is better for the environment"}]},{"type":"text","value":"?"}]},{"type":"element","tag":"h2","props":{"id":"sharing-is-caring"},"children":[{"type":"text","value":"Sharing is caring"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As the website was to be "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"shared across social media"}]},{"type":"text","value":", it was especially important to create optimized social sharing tags and "},{"type":"element","tag":"a","props":{"href":"https://css-tricks.com/essential-meta-tags-social-media/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Open Graph images"}]},{"type":"text","value":". This adds that extra punch when the web is shared on Facebook or Twitter."}]},{"type":"element","tag":"h2","props":{"id":"animation-is-bringing-things-to-life"},"children":[{"type":"text","value":"Animation is bringing things to life"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We wanted to communicate a fun and friendly vibe which the garden has in real life. I used open source illustrations and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"animated"}]},{"type":"text","value":" them with "},{"type":"element","tag":"a","props":{"href":"https://greensock.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"GSAP"}]},{"type":"text","value":" library. Little interactive elements make users stay on the page and play around with it. My goal, as always, is to create a digital experience which the users enjoy and spend time with."}]},{"type":"element","tag":"h2","props":{"id":"final-thoughts"},"children":[{"type":"text","value":"Final thoughts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The garden beds were soon booked for the summer and the website is going to grow together with the community, as we continue to develop new features."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can follow the community growth on "},{"type":"element","tag":"a","props":{"href":"https://zahradastrelak.cz/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ZahradaStrelak.cz"}]},{"type":"text","value":"."}]}]},"head":{"title":"Strelak Community Garden","description":"Creating a website that helps to build a community. A heartwarming work 🌿.","image":"/image/portfolio/community-garden.jpg"},"fields":{"image":"/image/portfolio/community-garden.jpg","order":500,"skills":["Netlify","Vue.js","Tailwind CSS","Figma"]},"featured":false,"type":"full","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"watch-it-grow-developing-a-community-garden-website"},"children":[{"type":"text","value":"Watch it grow: Developing a community garden website"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This was a lovely community garden project which I supported by volunteering as a web designer. The landing page I created provided a great for people to join the project."}]},{"type":"element","tag":"h2","props":{"id":"garden-needs-water-and"},"children":[{"type":"text","value":"Garden needs water and..."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website's goal was to bring in people interested in gardening. The landing page enabled the visitors to register as either a volunteer (helping out in the garden) or a gardener (owning a piece of the garden bed to grow their plants in). I created a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"database"}]},{"type":"text","value":" which stored the information about the registered gardeners and calculated how many free spots were left for people to book."}]},{"type":"element","tag":"h2","props":{"id":"tech-for-the-nature"},"children":[{"type":"text","value":"Tech for the nature"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website offers three ways of participating. Registering as a volunteer or a gardener, or subscribing to a newsletter. I created a special "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"form for each action"}]},{"type":"text","value":". The forms are linked to a shared email and to a central database, where the user data is safely stored. I used "},{"type":"element","tag":"a","props":{"href":"https://docs.netlify.com/forms/setup/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Netlify Forms"}]},{"type":"text","value":" to link the forms to the admin email. This way, the garden team gets a notification about each registration."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I used "},{"type":"element","tag":"a","props":{"href":"https://supabase.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Supabase"}]},{"type":"text","value":" to store the data. This makes it easy to link the database with the forms through the API. It also allows for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"scalability"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"efficient data management"}]},{"type":"text","value":". The forms are built with Vue.js. This makes it very easy to implement important features such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"validation and error messages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The website was hosted on Netlify - did you know that "},{"type":"element","tag":"a","props":{"href":"https://www.netlify.com/sustainability/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"static hosting is better for the environment"}]},{"type":"text","value":"?"}]},{"type":"element","tag":"h2","props":{"id":"sharing-is-caring"},"children":[{"type":"text","value":"Sharing is caring"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As the website was to be "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"shared across social media"}]},{"type":"text","value":", it was especially important to create optimized social sharing tags and "},{"type":"element","tag":"a","props":{"href":"https://css-tricks.com/essential-meta-tags-social-media/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Open Graph images"}]},{"type":"text","value":". This adds that extra punch when the web is shared on Facebook or Twitter."}]},{"type":"element","tag":"h2","props":{"id":"animation-is-bringing-things-to-life"},"children":[{"type":"text","value":"Animation is bringing things to life"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We wanted to communicate a fun and friendly vibe which the garden has in real life. I used open source illustrations and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"animated"}]},{"type":"text","value":" them with "},{"type":"element","tag":"a","props":{"href":"https://greensock.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"GSAP"}]},{"type":"text","value":" library. Little interactive elements make users stay on the page and play around with it. My goal, as always, is to create a digital experience which the users enjoy and spend time with."}]},{"type":"element","tag":"h2","props":{"id":"final-thoughts"},"children":[{"type":"text","value":"Final thoughts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The garden beds were soon booked for the summer and the website is going to grow together with the community, as we continue to develop new features."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can follow the community growth on "},{"type":"element","tag":"a","props":{"href":"https://zahradastrelak.cz/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ZahradaStrelak.cz"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"garden-needs-water-and","depth":2,"text":"Garden needs water and..."},{"id":"tech-for-the-nature","depth":2,"text":"Tech for the nature"},{"id":"sharing-is-caring","depth":2,"text":"Sharing is caring"},{"id":"animation-is-bringing-things-to-life","depth":2,"text":"Animation is bringing things to life"},{"id":"final-thoughts","depth":2,"text":"Final thoughts"}]}},"_type":"markdown","_id":"content:portfolio:strelak-community-garden.md","_source":"content","_file":"portfolio/strelak-community-garden.md","_extension":"md"}