During quarantine, our team has found it hard to focus on studying and other personal improvement projects. We often video call each other to motivate each other and work at the same time, like a library. We had the idea to create a virtual library where users can sign on, and an incentive prevents them from clicking away from the window.

What it does

Accessing the login page allows you to create a unique username. Once you enter this your username will be displayed on the library's list of online users. When you are focused with this webpage open, your "plant" stays alive, but if you (or any of your friends currently in the library!) click away from the page, your plant dies and a notice is displayed. At a regular interval, if your plant is uninterrupted, it will grow and add to the number of "alive" plants. Counters for alive and dead are displayed on the library page to keep score!

How we built it

We used SQLite 3 as our database to store information between users. To get the information stored in the database, we used Flask to create APIs that the client side can call upon. We used Vue.js to show client side updates as well as making GET and POST requests to the API to add to the database. When the user is not focused on the window, the jQuery code detects that the user has navigated away, causing the plant to die. We used CSS to style the webpage.

Challenges we ran into

Two of our members had never used Vue.js or SQL before, so it was a challenge to get everything set up in the backend. We also had some problems making sure that the online users and alive/dead counts were updated regularly without the need to refresh the page.

Accomplishments that we're proud of

We created a fairly complex backend structure including several different components.

What we learned

Asynchronous programming is difficult!

What's next for leafy

Some ideas that we had for future development:

  • Hosting leafy on a server
  • Allowing the user to choose specific websites that will cause tree to die, e.g. Facebook, and otherwise letting the tree stay alive
  • Developing backend structures for keeping track of multiple rooms at once
  • Adding a password with username login to allow for personal accounts & tracking scores
  • Allowing the user to change the amount of time that the room wants to stay focused (altering the goal)
Share this project: