Projects
SaaSFull-stack case study

Knoxt.io

A full-stack freelancer project management SaaS for managing clients, collaborative projects, Kanban tasks, notes, project knowledge, notifications, and deployment-ready workflows.

React 18TypeScriptViteReact RouterApollo ClientGraphQLTailwind CSS

Key features

Client CRMProject RBACKanban boardHierarchical notesProject MemorySecure sharing
Knoxt.io DevOps Roadmap project overview and drag-and-drop Kanban board

Project at a glance

Timeline

Built as a solo full-stack product from 04/2026 to 07/2026, with roughly 42 commits and a monorepo containing React, NestJS, Prisma, and shared packages.

Role

Worked as full-stack developer and project owner, covering product modeling, frontend flows, GraphQL API design, database schema, authorization, tests, Dockerization, and deployment pipeline.

Scale

The current implementation includes 27 PostgreSQL models, 84 backend GraphQL operations, around 75 frontend GraphQL query and mutation definitions, and 23 test files.

Product Goal

Designed for freelancers who need one workspace for customers, projects, tasks, notes, collaboration, and reusable project knowledge instead of spreading work across disconnected tools.

Main Features

Core product flows and engineering choices.

Architecture

Monorepo designed for product growth

The codebase separates product apps from reusable packages so the React SPA, NestJS API, Prisma schema, shared types, and UI utilities can evolve without turning into one large application folder.

  • apps/web for the React product surface
  • apps/api for the NestJS GraphQL API
  • packages/database, types, config, ui, graphql, and utilities

Customers

Client CRM connected to delivery work

Freelancers can keep customer records close to the projects, notes, and delivery context they belong to, instead of treating contacts as a disconnected address book.

  • CRUD customer profiles with email, phone, company, and status
  • Soft delete, pagination, detail pages, and related project lists
  • Customer links across projects and notes for better context

Collaboration

RBAC, invitations, and Kanban in one workflow

Project membership is enforced in the backend and reflected in the UI, while Kanban interactions stay fast through order keys instead of rewriting every task after drag-and-drop.

  • Viewer, Editor, Admin, and Owner permissions
  • Invitation token flow with SMTP and in-app notifications
  • Custom columns, assignment, tags, priorities, and due dates

Notes

A workspace for structured project knowledge

The notes module works like a lightweight project wiki with hierarchy, rich editing, search, recovery, and secure sharing, so delivery decisions do not disappear into chat threads.

  • Parent-child note trees with drag-and-drop movement
  • TipTap rich-text editing, autosave, tags, pins, and breadcrumbs
  • Permission sharing, subtree sharing, and hashed public links

Memory

Project Memory for decisions and follow-up

Knoxt.io separates reusable delivery knowledge from ordinary task tracking by modeling decisions, meetings, action items, requirements, and activity history.

  • Decision logs with reason, impact, and lifecycle status
  • Meetings with summaries, recording URLs, and participants
  • Action items and requirements with filters, search, and task conversion

Quality

Production pipeline with security gates

The deployment path checks code quality, database schema safety, tests, Docker images, secrets, dependencies, and server SHA before production is updated.

  • 72 backend test cases verified in the reviewed environment
  • Dependency audit, Trivy secret scan, and container scan
  • Fast-forward VPS deployment with health checks

Product screens

Knoxt.io in use.

Real screens from the landing page, sharing flow, document editor, and project Kanban workspace.

Knoxt.io landing page introducing its documentation-first project workspace
Knoxt.io landing page introducing its documentation-first project workspace
Knoxt.io project knowledge sharing with member roles and a public read-only link
Knoxt.io project knowledge sharing with member roles and a public read-only link
Knoxt.io hierarchical document workspace with rich-text and Markdown editing
Knoxt.io hierarchical document workspace with rich-text and Markdown editing
Knoxt.io DevOps Roadmap project overview and drag-and-drop Kanban board
Knoxt.io DevOps Roadmap project overview and drag-and-drop Kanban board

Architecture

Architecture overview

Architecture overview

Web AppReact + Vite
API ServerNestJS
PostgreSQLDatabase
Redis Cache
Storage
SMTP / Auth

Monorepo structure

apps/

web# React + Vite
api# NestJS + GraphQL

packages/

database
ui
config
utils

Tech stack

Frontend

React, TypeScript, Vite, Apollo Client, Radix UI

Backend

Node.js, NestJS, GraphQL, Prisma

Database

PostgreSQL, Prisma ORM

DevOps

Docker, Nginx, GitHub Actions

Permissions

RBAC is clearer as a matrix.

Permission
Viewer
Editor
Admin
Owner
View project
Edit tasks and notes
Invite members
Manage roles
Delete project

Architecture

Monorepo and backend domain structure

  • Organized the system as a pnpm/Turborepo monorepo with apps for web and API plus reusable packages for database, shared types, configuration, UI, GraphQL, and utilities.
  • Split backend domains around authentication, users, customers, projects, tasks, notes, project knowledge, notifications, and AI sessions.
  • Used a resolver-service-repository flow for selected domains, injecting repository interfaces through tokens so business logic stays testable and less coupled to Prisma.

Security

Authentication, validation, and authorization

  • Implemented email/password authentication with bcrypt cost factor 12, JWT authentication, Passport guards, and Google ID token verification on the backend.
  • Linked Google accounts to existing users by email and automatically accepted pending project invitations after signup or Google login.
  • Added global validation that strips unknown fields, rejects undeclared input, transforms payloads, validates environment variables at startup, and hides internal GraphQL errors in production.

Collaboration

Projects, members, invitations, and Kanban

  • Built project CRUD with active, on-hold, completed, and archived states, customer linking, date tracking, recent notes, pinned notes, attachments, and soft delete.
  • Implemented Viewer, Editor, Admin, and Owner roles with the backend as the source of permission truth and frontend controls hidden or disabled based on role.
  • Developed a drag-and-drop Kanban board with custom columns, assignment, due dates, tags, priorities, task modal create/edit flows, and orderKey-based sorting to avoid rewriting every task on reorder.

Notes

Hierarchical note workspace and secure sharing

  • Built independent and project/customer-linked notes with parent-child hierarchy, drag-and-drop movement, TipTap rich-text editing, tables, task lists, Markdown support, and autosave.
  • Added optimistic concurrency through version and expectedVersion values to detect conflicting note updates.
  • Supported pinning, tags, case-insensitive search, breadcrumbs, fullscreen editing, soft delete, trash restore, attachment metadata, direct sharing by viewer/editor permission, subtree sharing, and secure public links that store only hashed random tokens.

Knowledge

Project Memory for decisions and delivery context

  • Modeled structured project knowledge with decision logs, meetings, action items, requirements, activity logs, and role-based access.
  • Supported meeting summaries, recording URLs, internal or external participants, action item owners, due dates, status tracking, and conversion from action item to Kanban task.
  • Added unified search and filters across decisions, meetings, requirements, status, priority, and date ranges.

Quality

Testing, CI/CD, and production readiness

  • Added tests for auth service, project authorization, project service, task service and repository, ordering algorithm, notes, note sharing, Project Knowledge, health checks, SMTP invitation template, Kanban board, Project Memory UI, auth context, and landing page.
  • Verified 72 backend test cases passing in the reviewed environment, with the logging suite blocked by sandbox network binding rather than business assertions.
  • Built a GitHub Actions pipeline for frozen dependency install, Prisma validation and client generation, Docker Compose validation, lint, type-check, test coverage, builds, tracked-file cleanliness, dependency audit, Trivy secret scanning, image scanning, and SHA-verified VPS deployment.

CI/CD

CI/CD pipeline, lessons, and outcomes

CI/CD Pipeline

1

Install with frozen lockfile

2

Prisma validate and generate

3

Lint and type-check

4

Run automated tests

5

Build Docker images

6

Trivy security scan

7

SHA-verified VPS deploy

72

Backend tests passed

23

Test files

100%

Automated deployment

What I learned

  • Designing scalable monorepo boundaries.
  • Building secure SaaS permissions with backend enforcement.
  • Keeping complex product flows readable with tests and DX.

Outcome

  • Delivered a functional SaaS foundation for real client work.
  • Improved developer productivity with shared packages and automation.
  • Created a reliable release path with quality and security checks.
Knoxt.io | Bui Thuy Ngoc