AH.
AH.

TAKE A LOOK AROUND

04 / Full-stack / Team collaboration SELECTED WORK

Connect

Good work starts with a conversation.

PROJECT STUDY
2026
WORKSPACE ACCESSCHANNELSSHARED DATAWORKSPACE UIConnectONE CONNECTED SYSTEMWORKSPACE ACCESSCHANNELSSHARED DATAWORKSPACE UIConnectONE CONNECTED SYSTEM
INPUT / PROCESS / APPLICATION / HUMAN CONTEXT
MY CONTRIBUTION

Independent workspace interface, application state, relational project models, and real-time architecture exploration.

PROJECT STATUS

Independent project · In development

01 / THE IDEA

Keep the conversation connected to the work.

02 / THE PROBLEM

Discussions need a shared place and a shared context.

Team discussions lose context when conversations and tasks live in separate places. Connect explores a workspace where a discussion can lead directly to a piece of work.

Channels, messages, tasks, and project membership need a shared model. A responsive interface should also distinguish local state from events received through a real-time service.

Connect: a workspace built around peopleThree illustrated team members connect to a shared workspace and its project and general channels. A workspace boundary defines membership.WORKSPACE MEMBERS01 / A PLACE FOR THE TEAMMEMBER AMEMBER BMEMBER CSHARED WORKSPACEMEMBERSHIP / ACCESS# GENERAL# PROJECTS# ENGINEERINGCHANNELS KEEP A CONVERSATION IN CONTEXT
PROJECT CONCEPT / EDITORIAL ILLUSTRATION
03 / THE APPROACH

Give conversations and projects a common model.

A team communication project combining channels, conversations, project tasks, and a real-time application architecture.

Connect: a conversation becomes workA drawn conversation sheet shows a project discussion leading to an attached task. The message and task retain a shared project context.02 / KEEP THE CONTEXT# PROJECT / CONVERSATIONAMEMBER AReady for a review?BMEMBER BLinking the task here.PROJECT TASK / SAMPLEReview the workflowDISCUSSION → A PIECE OF WORKILLUSTRATIVE CONVERSATION / FICTIONAL MEMBERS
PROJECT CONCEPT / EDITORIAL ILLUSTRATION

My part in the project.

  1. 01

    Designed channels, project discussions, and task-related interfaces.

  2. 02

    Worked on persistent message and project data relationships.

  3. 03

    Explored real-time updates and authentication boundaries.

04 / THE CONNECTED SYSTEM

Conversation with project context

A sequence of clear responsibilities. Select a stage to inspect its role in the project.

CONNECTED PROJECTConnect
LAYER 01

Workspace access

Authentication and membership define the workspace boundary.

05 / DECISIONS & CHALLENGES

The details between the pieces.

01

Keeping conversations linked to the work they describe.

02

Representing loading, empty, and local message states.

03

Maintaining clear workspace access boundaries.

Workspace scope

Channels / Conversations / Task panels / Presence states

06 / THE PRODUCT FLOW

One sequence.
Clear responsibilities.

A team communication project combining channels, conversations, project tasks, and a real-time application architecture.

Workspace → Channel → Conversation → Task → Activity

01 / THE FLOW

Workspace access

Authentication and membership define the workspace boundary.

02 / THE FLOW

Channels

Conversations are grouped around teams and projects.

03 / THE FLOW

Message events

A WebSocket-oriented architecture supports real-time events.

04 / THE FLOW

Shared data

PostgreSQL relates projects, tasks, messages, and membership.

05 / THE FLOW

Workspace UI

React brings conversations and project activity into one interface.

07 / RESULTS & CURRENT STATUS

A workspace built around the connections.

Independent development project. The portfolio demo uses fictional accounts and local browser state; it is not a live multi-user service.

WORK IN PROGRESS

Independent project.
In development.

VISIT MY GITHUB PROFILE
Connect: shared state and presenceA cloud-like collection of connected message, task, and membership documents represents the shared relational model, with explicit presence indicators around its edge.03 / CONNECT THE PIECESMESSAGESPROJECT TASKSONLINEONLINEAWAYMESSAGES / TASKS / MEMBERSHIP / PRESENCE
PROJECT CONCEPT / EDITORIAL ILLUSTRATION

THE TOOLS BEHIND IT

Next.js / TypeScript / Node.js / PostgreSQL / WebSockets

Explore the interactive preview

Representative interface built for this portfolio with synthetic data and local browser state.

08 / WHAT GOOD LOOKS LIKE

The goals guiding the work.

Three qualitative design goals for Connect, drawn from the project’s scope and engineering decisions.

DESIGN GOAL / 01CONTEXT

Keep discussions connected.

Relate channels, conversations, tasks, and project membership through a shared workspace model.

DESIGN GOAL / 02PRESENCE

Represent the current state.

Make presence and loading states legible while separating local changes from received events.

DESIGN GOAL / 03ACTION

Let a discussion lead to work.

Keep project tasks close to the conversations that describe them.

NEXT PROJECT / KEEP EXPLORINGRetail Vista

A clearer view of what happens in store.

CAMERA INPUTOBJECT DETECTIONAPPLICATION LAYERHUMAN REVIEWRetail VistaONE CONNECTED SYSTEMCAMERA INPUTOBJECT DETECTIONAPPLICATION LAYERHUMAN REVIEWRetail VistaONE CONNECTED SYSTEM
INPUT / PROCESS / APPLICATION / HUMAN CONTEXT
ALL PROJECTS LET’S BUILD SOMETHING