Urbanteria

Home Page
GIF
Explore the neighbourhood
Select an Avatar
User's Garden

Inspiration 🌞

In Melbourne, 86% of residents feel isolated, yearning for stronger community ties and connection to nature (City of Melbourne, 2023).

When did you last speak with your neighbour? Rising herb prices, often $3-$5 for wilted bunches, burden residents needing only a tiny amount for garnish or seasoning.

Urbanteria addresses this by gamifying urban gardening, enabling anyone to grow fresh, sustainable produce on a balcony.

It reduces supply chain pressure, promotes food independence, and fosters neighbourly connections, creating a greener, more cohesive city.

What it does 🥕

Urbanteria is a pixel-art game that gamifies urban gardening, guiding you to grow real crops mirrored as virtual ones, trade fresh herbs with neighbours, and reconnect with your community.

It offers weather forecasting, live chat for connecting with friends, and achievement milestones to keep you engaged.

By cultivating your own food, you save money, reduce waste, and build stronger community ties, producing fresher, organic herbs and veggies that outshine costly supermarket alternatives, all from the convenience of your balcony.

How we built it 💻

Urbanteria, built with TypeScript and Next.js, powers real-time gardening, trading, and chat via Supabase. Clerk ensures secure authentication, while MantineUI and Styled Components craft the retro aesthetic.

Deployed on Vercel, it uses CRON jobs and the OpenWeather API for weather updates and harvest alerts, keeping users connected to their gardens and community.

Challenges we ran into 🚧

Building Urbanteria stretched our skills and focus. Syncing Supabase for real-time gardens, trades, and chat with Next.js demanded query optimization to avoid lag.

Clerk webhooks for secure auth were tricky, requiring careful debugging of triggers.

OpenWeather API integration with CRON jobs on Vercel hit rate limits, needing efficient scheduling. Crafting a responsive pixel-art UI with MantineUI and Styled Components took multiple iterations.

We also struggled to avoid feature creep, prioritizing core features like gardening and trading to solve the main problem while ensuring everything worked on time.

Accomplishments that we're proud of 🏆

We’re thrilled with how Urbanteria’s turned out.

In just 48 hrs, we were able to build a dynamic web app using TypeScript and Next.js, that enables real-time gardening, trading, and chat via Supabase.

We're very happy with the 2D pixel UI look of the webapp and that we were able to integrate everything to make it functional including Clerk, OpenWeather API, CRON Jobs and more.

Despite the hackathon’s tight timeline, we delivered a sustainable platform that boosts urban gardening and community ties.

What we learned 📚

Urbanteria was a steep learning curve. We mastered Supabase for real-time data, optimizing queries for seamless interactions.

Clerk webhooks taught us secure auth, while OpenWeather API on Vercel honed our scheduling skills.

We also realised how hard it actually is to work on the pitch terms of ideation, content creation and editing.

What's next for Urbanteria 🚀

Urbanteria’s future is bright. We have ideas to potentially expand our features by adding AI plant care tips, a mobile app, and a barter marketplace to deepen community bonds.

Urbanteria can also be scaled Australia-wide, empowering urban gardeners to build greener, connected communities.