StudyNest

• 

  The main ui

• 

  When "nest" create it show the id pop up so the host can copy share it to other

• 

  user can join the "nest"

• 

  Your fiend can join the nest

Inspiration

Our app inspire by study together discord where people could join the call and they can study together. Our widget change that concept a little bit instead of hearing and seeing other people. Now user who join the "nest" can just see people name and give emoji to rest of the room to stay motivated

What it does

Study Nest is a Pomodoro-based study timer that allows users to focus on work while staying socially connected. Users can create or join virtual “nests” where they can see participants, share emoji reactions, and stay motivated

Users can create or join a virtual study nest • Participants list shows who is in the session • Real-time notifications when a new user joins

Optional rain sound for a calming study atmosphere

How we built it

• React.js for UI
• useState, useEffect, useRef for state management and side effects
• UUID for unique session and participant IDs
• CSS Animations for floating emojis
• Audio API for notification and background sounds

Challenges we ran into

Since we started with a mock socket implementation, we had to simulate real-time events instead of using Socket.io. Managing dynamic updates without a backend was tricky.

Creating floating emoji animations that disappear after a few seconds while maintaining a recent emoji history was a fun but challenging UI task

Accomplishments that we're proud of

We successfully implemented a working Pomodoro cycle with customizable session durations and automatic transitions

From animated floating emojis to a clean timer display, the UI is both engaging and easy to use

What we learned

We explored the concept of WebSockets, which was completely new to us. Although we didn’t implement a full WebSocket-based system, this project gave us a solid foundation to build on. In the future, we plan to integrate a fully functional WebSocket setup that allows users to join sessions in real time.

Additionally, we learned a lot about brainstorming and project management—from refining our initial idea, designing the UI in Figma, and finally bringing it to life through code.

What's next for StudyNest

Integrate real-time WebSockets (Socket.io) for actual live sessions Persistent session storage (e.g., Firebase, database) User authentication for better session tracking

Built With

• github
• javascript
• react