MoneyPlant

• 

  In-progress page for plant growth

• 

  Landing page

• 

  Store page

• 

  To-do List with interactable list items

Inspiration

We were inspired by the theme of this year's TechTogether, "Planting the Seeds," and productivity apps that gamify everyday tasks. We wanted to take a task that many people are intimidated by, and make managing finances more approachable and fun.

What it does

MoneyPlant is a web app that allows the user to create an account to enter in their financial info as well as the user's own goals for managing their finances, as well as general tasks. The user can add their bills, and mark the bills as complete once they are paid off, to gain currency. This currency can be used to purchase a variety of seeds, which will be added to the user's collection, and will grow over time into beautiful plants. Goals can also be marked as complete to earn bonus points. These points will boost the time that it takes to grow a plant, as well as offer various other bonuses. In the store, the user can purchase fun animal friends which will also provide similar boosts.

How we built it

We learned how to use React to create a website, and started with a template tutorial via Youtube. We found some royalty-free photography assets from the web to use, but most of our images are self-made. The illustrations were drawn from scratch to match the TechTogether style, and the background images were original photographs from the on-site location.

We then added features to the site, such as a sign-up and login module. We also started working on implementing the plant progression page.

Challenges we ran into

It was our team's first time using React, so learning how to structure and organize each component in our website, and how to put everything together, was a challenge, especially under the time crunch. We also wanted to implement some more interactive features, such as a working demo of how the plant will change over time, but we were not able to figure out how to write the React components in time.

Accomplishments that we're proud of

We are proud that we were able to create a functioning website with React, and modify it to fit the goals of our initial idea.

What we learned

We learned how to use React, and how to plan and manage our time, especially when working with multiple people.

What's next for MoneyPlant

We hope to deploy the website, and add a database to the backend to support user accounts and data. We also wished to incorporate the CapitolOne API to help the users track finances. In addition, we will need to add more to the design of the site in the future.

Built With

• css3
• html5
• javascript
• react.js