YJS TODO App

A TODO and time-tracking application built with YJS for synchronized state management across multiple devices.

Overview

This project consists of:

1. A core YJS-based state management library that handles tasks, projects, areas, and time tracking.
2. A React-based web UI that demonstrates the library's capabilities.

Getting Started

Installation

npm install

Development

npm run dev

This will start the development server, and the application will be available at http://localhost:3000.

Building

npm run build

Testing

npm test

Using as a Library

To use this package in another project:

Installation

npm install yjs-todos

Usage

import { YjsState, StateEvent } from "yjs-todos";

// Create a new state manager
const state = new YjsState();

// Listen for events
state.on(StateEvent.TASK_ADDED, (data) => {
  console.log(`New task added: ${data.task.title}`);
});

// Create an area
const areaId = state.createArea({ name: "Work" });

// Create a project
const projectId = state.createProject({
  name: "Website Redesign",
  areaId,
});

// Create a task
const taskId = state.createTask({
  title: "Design homepage",
  areaId,
  projectId,
});

Snapshots

// Save current state to local storage
const hash = await state.saveSnapshotToLocalStorage();

// Later load it back
state.loadSnapshotFromLocalStorage(hash);

Architecture

The application follows a clean architecture centered around a YJS-based state management system:

• src/: Core library code for YJS state management
• app/: React application that uses the library
• tests/: Tests for the core library

License

MIT