LoreLeaf | Devpost

Productivity Track

Inspiration

Students often flock to libraries to study in a peaceful, academically structured environment, as well as witness other students studying, motivating them to study alongside their peers. Libraries are not always accessible, however, which is why we built an online library where students can not only study in a library-like environment, but also see others studying alongside them, as well as utilize tools such as a Pomodoro Timer to make their sessions more productive, meaningful, and engaging.

What it does

LoreLeaf's library allows students to choose their avatar and take a seat in the pixelated library, while simultaneously seeing other users studying alongside them.

A Pomodoro Timer button is introduced on the bottom left of the screen, which users are encouraged to use in order to utilize their time effectively. This Pomodoro Timer can be increased in increments of 5 minutes, with 20 minutes being the shortest amount of time allowed for a cycle. Once the timer is complete., the tomato icon will shake and glow, signaling to the user that it is time for a break.

There is a tree in the middle of the library that grows depending on the amount of points all users have contributed. Each point is earned by the amount of Pomodoro cycles a student has completed, motivating students to not only work together, but work productively. This point system creates a reward system within the program, encouraging users to study further to see the next stage of a dynamic tree.

The library stores user data, such as their username, the amount of time the user has been sitting in the library, and how many points a user has contributed to the growth of a tree in the center of a library, and displays non-confidential information to other users, creating an environment where users feel a sense of community while contributing to the growth of the tree in the middle.

Additionally, there is a cat moving around the room at all times, which may motivate some students to come back to visit it. The cat is purely added for aesthetic purposes, and we plan to add more features to it in upcoming updates.

How we built it

Frontend

Built with Next.js and TypeScript for type-safe, performant rendering.
The room renders entirely on a positioned canvas, and every object has absolute coordinates.
Avatar movement uses an A* pathfinding algorithm with a collision detection system.
Sprite animations are handled frame by frame using setInterval and CSS background-position.

Multiplayer

Supabase Realtime powers all live features.
Seat occupancy syncs via Postgres Changes. Any insert or delete in room_seats (DB in Supabase) instantly updates all connected clients.
The shared cat uses a custom host election system. The visible client with the active tab runs the cat brain and broadcasts position to all others.

Backend

100% Supabase with no custom server.
PostgreSQL stores profiles, seats, points, study sessions, and tree progression.
Row Level Security policies protect every table.
Supabase Authentication handles login and session management.

Productivity features

Pomodoro timer built by the team with a custom pixel art skin.
Points system rewards focused study time with tree growth.
The shared tree grows as the whole community accumulates study points.

Deployment

Hosted on Vercel with automatic preview deployments per branch.
GitHub for source control and team collaboration.

Strategizing

We used a Kanban board to keep our ideas tidy, and our thoughts organized. We checked in with each other every day, similar to the Scrum Method, and made sure we were all making good progress throughout the entire project.

Challenges we ran into

Initially, choosing our tech stack for our backend was an area we were a little lost on. We were unsure of how to implement a server, and cautious of high fees, as we are a team of college students working on this for fun. Instead of a server, we decided to utilize Supabase's real time feature which allows for users to be in a live environment without the fees and stress of an actual live server.

We also unexpectedly struggled implementing the live cat quite a bit. Implementing a cat to walk on everyone's screen was a straightforward task, however, making sure it stayed in sync across all screens was quite difficult for us. The cat would be hosted on a single user's open tab, but when the host user switched tabs, the cat would stutter and freeze on other user's screens. We ended up using a heartbeat system where the cat's host would get transferred if the original host was not on LoreLeaf's tab for more than 2 seconds. This way, they cat appears smooth and in sync across all screens and devices.

Accomplishments that we're proud of

We are very proud that we were able to implement such an intense project in a short amount of time. For most of us, this is our first hackathon, but we have completed other projects in the past. LoreLeaf was made with a ton of passion, and is an idea the entire team created and cultivated. We are very grateful that we are able to create and develop as much as we have.

We are also very proud of the cat!!

What we learned

This project has helped us delve deeper into how a database works, and how live environments can be established without a true server behind the scenes. It was our first time working with Supabase, and we are sure we will work with it again in the future. Instead of dividing the tasks into a frontender and backender, we decided to switch off frontend and backend development between developers when needed. If someone needed help in the backend, a frontender would help, and the opposite was true as well. This created a very strong learning environment where we were all able to develop as full-stack developers. Each one of us had a say in both the front and backend development of LoreLeaf.

What's next for LoreLeaf

Although this project was designed for a hackathon, we still wish to develop LoreLeaf further and implement additional features, such as allowing users to enter what they are studying, and displaying that to other users. We would also love to implement some customization features for both the avatar and the cat, allowing users to change their appearance or pet whenever they please. LoreLeaf may seem complete, but our team still has many ideas for its future!

Team Contributions

Britaney Do: UI/UX, Live environment, Library Design, Deployment
Richard Le: UI/UX, Pomodoro Timer Feature, Tree Progression Feature
Israel Zavala: Database Architecture, RLS Policies, User Authentication