Ron
Proyek

Wander(squad)

Wander(squad) is a modern, all-in-one team workspace combining Projects, Tasks, CRM, and Knowledge Pages. Built with Next.js and Supabase, it helps teams streamline their workflows, track deals, and collaborate in real time—all from a single, fast, and responsive dashboard.

11 Jun 2026Live
Next.jsReactTypeScriptSupabaseTailwind CSS

Overview

Wander(squad) 🤝

Wander(squad) is an all-in-one workspace application for teams who want:

  • Centralized project and task management
  • Integrated CRM to track sales pipelines and deals
  • Collaborative knowledge base with rich-text pages
  • Real-time activity feeds and updates
  • A fast, modern, and unified dashboard experience

Key Features

  • Organize work into dedicated workspaces and projects
  • Manage tasks efficiently using Kanban boards and lists
  • Track deals and sales opportunities with an integrated CRM pipeline
  • Create and edit knowledge pages using a powerful rich-text editor
  • Monitor team activity and recent updates through an activity feed
  • Seamless user authentication and role management

Tech Stack

  • Framework: Next.js (React 19) + TypeScript
  • Backend & Database: Supabase (PostgreSQL, Auth, Realtime)
  • Styling: Tailwind CSS + shadcn/ui
  • State Management: Zustand
  • Rich Text Editor: Tiptap
  • Drag and Drop: dnd-kit

Architecture

Wander(squad) follows a modern, serverless architecture that separates concerns across the client, server, and database layers for maximum performance and real-time capabilities.

graph TD
    Client[Client Component UI] -->|State Management| Zustand[(Zustand Store)]
    Client -->|User Interactions| Actions[Next.js Server Actions]
    Actions -->|Mutations| SupabaseDB[(Supabase PostgreSQL)]
    SupabaseDB -->|Real-time Updates| Client
    SupabaseAuth[Supabase Auth] -->|JWT| Client
    Client -->|Rich Text Editing| Tiptap[Tiptap Engine]
    Client -->|Drag & Drop| DndKit[dnd-kit]

1. Client Layer (React 19 & Next.js)

  • UI Components: Built using Tailwind CSS and shadcn/ui for accessible, consistent design.
  • Complex Interactions:
    • dnd-kit powers the drag-and-drop experience in the Kanban boards for tasks and CRM pipelines.
    • Tiptap serves as the headless rich-text editor engine for Knowledge Pages.
  • State Management: Zustand handles complex client-side state (like optimistic UI updates for drag-and-drop) while Next.js handles server state.

2. Server Layer (Next.js App Router)

  • Data Fetching: Utilizes React Server Components (RSC) to fetch data securely on the server, reducing the JavaScript bundle size shipped to the client.
  • Mutations: Server Actions are used for form submissions and data mutations, providing a seamless development experience without needing manual API routes.

3. Backend & Database (Supabase)

  • PostgreSQL Database: Acts as the single source of truth with Row Level Security (RLS) ensuring users only access their workspace's data.
  • Real-time: Supabase's realtime subscriptions can be utilized to push updates instantly to the client when tasks or deals are modified.
  • Authentication: Integrated Supabase Auth handles secure user sessions and workspace invitations.