Study Stream

Project 03

A full-stack productivity web app inspired by the Pomodoro method, combining shared focus sessions, real-time chat, course spaces, and personal learning analytics.

ReactMongoDBAgora APIReal-time chatSession stateLearning analytics

Role

Full-stack systems, realtime UX, product design

Highlights

  • Pomodoro-inspired focus sessions with clear session state
  • Real-time chat and course spaces for study groups
  • Personal learning analytics for repeat study habits

Case Study

42:18
ReadyFocusingMuted

Minh joined the room

Group focus started

Break in 12 minutes

Product mockup

Focus room state

A product-style mockup showing timer, participant state, and quiet realtime feedback inside one shared study room.

Portfolio artifact: product-style mockup from legacy Study Stream notes. Production outcomes, retention, and source links are not claimed here.

State

Room lifecycle

Lobby, ready, focus, break, and complete states give the group a shared rhythm.

Realtime

Calm presence

Participants can feel accountable without turning the room into a chat-heavy feed.

Retention

Repeat study habits

Course spaces and analytics support return sessions without making the core focus flow heavier.

Problem

Students need accountability, but social study tools can become noisy enough to break focus.

Role

Owned realtime UX framing, full-stack system direction, session lifecycle, and product presentation.

Decisions

  • Make session state obvious before adding more features.
  • Use presence for accountability, not entertainment.
  • Keep feedback quiet enough to preserve focus.

Current state

A focused systems story around realtime state, room lifecycle, and calm collaborative productivity.

Lesson

Realtime UX is useful when it lowers coordination cost without demanding attention.

Problem

Studying with other people can help accountability, but collaboration tools often pull attention in the wrong direction. Too much chat, activity, or status noise can make the product compete with the work it is supposed to protect.

Study Stream treats focus as the main product, with realtime features supporting that focus instead of becoming the center.

System

The experience is built around rooms and sessions. A room gives the group a shared place; a session gives the group a shared state. The important transitions are simple: join, ready, focus, break, complete.

Legacy notes connect the product to React, MongoDB, Agora API, realtime chat, course spaces, and learning analytics. In the portfolio, the strongest story is not the number of features. It is how those features are contained so the user can keep studying.

Key Decisions

  • Make the timer and room state the visual anchor.
  • Use participant presence to create accountability without loud social mechanics.
  • Keep chat available but secondary to the focus session.
  • Support course spaces and learning analytics as follow-up surfaces, not interruptions.
  • Design feedback as calm state changes rather than constant notifications.

Tradeoff

Minimal realtime UI can feel less expressive than a broader collaboration app. That is intentional. For a focus product, fewer interaction paths can be a product advantage.

The technical challenge is that simple UI still requires careful state modeling. Joins, leaves, readiness, session starts, breaks, and completion all need to stay understandable to every participant.

Reflection

Study Stream gives the portfolio a clear realtime UX story. It shows product judgment around collaboration boundaries, not only the ability to add live features.

The lesson: realtime systems should make shared state obvious, then get out of the way.