ReLeaf

Landing page
Login Page
Dashboard
Property Overview & Analysis
Co2 Emission by Category
Cost Breakdown by Category
Monthly Bills & manageable data
My Properties cards
Add new Property
Saved Analyses page
Carbon Footprint Calculator

Inspiration

We wanted to create a user-friendly yet informative web application that makes reading and interpreting data simple. Property managers or owners are the target audience of our application, as energy consumption and cost analysis per property are quantitative data that are very relevant in the real estate field. As we move towards the future, it is also imperative to ensure that our carbon footprint is being managed and steps are actively taken to reduce it, hence why our application focuses on these two main metrics; cost and carbon footprint per property.

What it does

ReLeaf is a property management web application that provides and simplifies carbon emission and energy consumption data and analytics at the click of a few buttons. The main features include a properties dashboard that combines the metrics of all of the user's properties as well as the individual properties' dashboard, data input & analytics, pie charts, bar graphs, a built-in carbon emission calculator, and personalized recommendations for reducing carbon emissions and increasing cost-saving.

How we built it

We used React.js, TypeScript/ JavaScript, and Tailwind CSS for styling.

Challenges we ran into

Initially designing our project as a mobile app in Figma and even setting up a ReactNative app, we realized that implementing it would be much more efficient as a website using React.js. We did end up using our mobile app Figma design as the basis of our web application, but not having time to create a proper web-based Figma resulted in styling being a bit of a challenge. We had to revise our carbon emission formula as well to ensure it provided accurate results. We also struggled a little bit with gathering accurate data for bills and costs, but we created data sets our app could utilize.

Accomplishments that we're proud of

We're proud that even though we initially ran into some setbacks, we were able to create a fully functional frontend that we are very happy with and can demo! We also worked hard on the dynamic/self-adjusting graphs that take in data and then present the data in a simple, easy-to-read format. We're also proud of our user-centric design that focuses on accessibility, smooth flow throughout, and a consistent color scheme.

What we learned

Some of us learned how to use a new framework, React.JS, and others used Figma for the first time! The overall experience required us to all learn some type of new technology and it was a great way to expand our skillsets while creating a tangible product in 24 hours.

What's next for ReLeaf

In the future, we'd like to launch a mobile app for ReLeaf, which would provide data right at one's fingertips. We'd also like to dive into AI and use an AI-driven chatbot that assists in real-time and provides property owners with advice and guidance.