All projects

Makeable Projects

A small studio workspace designed around shared context and useful conversations.

My Role in this Project

  • Product scope and collaboration workflow
  • Interface and responsive interaction design
  • Full-stack application development
  • Project access and file-sharing architecture

Technologies Used

  • Next.js, React, TypeScript, Tailwind CSS
  • Postgres with versioned workspace data
  • Backblaze B2 private file storage
  • Resend and React Email
  • Cloudflare Turnstile and email-code sign-in

Current Scope

  • Project message boards and threaded feedback
  • Chat, written documents, files, and folders
  • Owner, member, partner, and client access
  • Mentions and notification preferences
  • Responsive light and dark interfaces

A closer look.

Explore the screens. Select an image to view it full size.

The project index groups nine fictional studio and client engagements, with search, starred projects, and visible collaborators.
A project brings chat, decisions, documents, and recent activity into one shared overview.
The message board keeps review requests and decisions in durable threads, with a pinned design update.
A storefront review keeps the proposal, client feedback, and implementation response together.
Written briefs and sample image, video, PDF, and Word files share a library with folders and file-type filters.
A bundled fictional visual-direction image opens beside its file details and discussion controls.
A client handoff folder keeps the relevant document within its project’s shared file library.
The creative brief records the audience, scope, review criteria, and handoff expectations in one readable document.
Project chat handles quick coordination while longer decisions remain on the message board.
Workspace members, collaborators, and project-specific clients have visible roles and access scopes.
Activity gathers updates across projects, connecting each event back to its original content.
The same project workspace uses the app’s existing dark palette.
The project index adapts to a single-column phone layout with the same navigation and project context.
On a phone, the full review thread stays readable with client feedback directly beneath the original message.

Makeable Projects · 1 / 14

The project index groups nine fictional studio and client engagements, with search, starred projects, and visible collaborators.

The project index groups nine fictional studio and client engagements, with search, starred projects, and visible collaborators.

The rationale

Keep the conversation close to the work.

Client work produces more than deliverables. It produces questions, feedback, decisions, and the small bits of context that explain why something changed. I wanted a shared home for those conversations, with enough structure to find the answer later and little ceremony around contributing.

Makeable Projects takes a familiar, Basecamp-inspired approach: give each project its own place, then separate quick chat from durable messages and reference material. The overview brings those tools together. A review belongs on the message board, a brief belongs in Docs & files, and a quick coordination question can stay in chat.

Written documents and uploaded files share the same library. Folders, file previews, comments, and readable document pages help the conversation stay attached to the material being discussed. Project colors and a compact navigation system make the wider workspace easy to scan, while phone layouts and light and dark themes carry the same structure across devices.

The backend supports a single workspace with project-specific access for studio members, partners, and clients. Postgres stores the collaboration records, private B2 storage holds uploaded files, and email codes handle sign-in. Revision checks protect against stale saves; updates use polling rather than live sockets. Those are deliberate boundaries for this version, not claims of a large-scale collaboration platform.

These screenshots use nine fictional projects, twelve fictional people, and related messages, documents, chats, and sample files in an isolated local demonstration. No client records or live workspace data are shown. The app also contains a Sidekick drafting interface that currently generates local sample drafts; an AI API integration remains future work.