('');
+
+ // Always setup a new webrtcProvider when the session changes
+ useEffect(() => {
+ const newWebrtcProvider = createWebrtcProvider(session, isHost);
+ setWebrtcProvider(newWebrtcProvider);
+ setAwarenessStates(new Map(newWebrtcProvider.awareness.getStates()));
+ setValue(newWebrtcProvider.doc.getText('content').toString());
+
+ return () => {
+ if (newWebrtcProvider) {
+ newWebrtcProvider.disconnect();
+ newWebrtcProvider.destroy();
+ }
+ };
+ }, [session, isHost]);
+
+ const onEditorChange = React.useCallback((val: string) => {
+ setValue(val);
+ }, []);
+
+ // When the session ends, set status to 'ended' and navigate back to the home page
+ const onEndSession = () => {
+ if (!webrtcProvider) {
+ return;
+ }
+ setDocMapAndWaitForSync(webrtcProvider.doc, 'status', 'ended', true)
+ .then(() => {
+ navigate('/');
+ })
+ .catch((error) => {
+ // TODO: Handle error
+ });
+ };
+
+ // Handle webrtcProvider events
+ useEffect(() => {
+ const onStatus = (event: StatusEvent) => {
+ setIsConnected(event.connected);
+ };
+
+ const onPeers = (event: PeersEvent) => {
+ setPeers(event.webrtcPeers);
+ };
+
+ const onAwarenessUpdate = () => {
+ const awarenessStates = webrtcProvider?.awareness.getStates();
+ setAwarenessStates(new Map(awarenessStates));
+ };
+
+ webrtcProvider?.on('status', onStatus);
+ webrtcProvider?.on('peers', onPeers);
+ webrtcProvider?.awareness.on('update', onAwarenessUpdate);
+
+ return () => {
+ webrtcProvider?.off('status', onStatus);
+ webrtcProvider?.off('peers', onPeers);
+ webrtcProvider?.awareness.off('update', onAwarenessUpdate);
+ };
+ }, [setAwarenessStates, webrtcProvider, webrtcProvider?.awareness]);
+
+ // Initial loading state
+ if (!webrtcProvider || !isConnected || (!isHost && !peers.length)) {
+ return (
+
+ Waiting to connect to the host or existing peers...
+
+ If you cannot connect, either the host has gone offline or the secret
+ is incorrect.
+
+
+ );
+ }
+
+ // Session has been explicitly ended by the host
+ if (
+ isConnected &&
+ webrtcProvider &&
+ webrtcProvider?.doc.getMap('status').get('ended')
+ ) {
+ return (
+
+ The session has ended
+
+ );
+ }
+
+ // The host has gone offline
+ const hostId = findHostId(awarenessStates);
+ if (hostId && !isHost && !awarenessStates.get(hostId)) {
+ return (
+
+ The host has gone offline.
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default Session;
diff --git a/src/utils/clipboard.ts b/src/utils/clipboard.ts
new file mode 100644
index 0000000..f34d033
--- /dev/null
+++ b/src/utils/clipboard.ts
@@ -0,0 +1,5 @@
+export function copyToClipboard(text: string): void {
+ navigator.clipboard.writeText(text).catch((error) => {
+ // TODO: Show a toast notification to the user that the copy failed.
+ });
+}
diff --git a/src/utils/collab.ts b/src/utils/collab.ts
new file mode 100644
index 0000000..f4ab403
--- /dev/null
+++ b/src/utils/collab.ts
@@ -0,0 +1,91 @@
+import { uint32 } from 'lib0/random';
+import { WebrtcProvider } from 'y-webrtc';
+import { Doc } from 'yjs';
+
+import { type Session } from './session';
+
+interface AwarenessStateUser {
+ isHost: boolean;
+}
+
+export type AwarenessState = Map<
+ number,
+ {
+ [x: string]: AwarenessStateUser;
+ }
+>;
+
+export interface StatusEvent {
+ connected: boolean;
+}
+
+export interface PeersEvent {
+ webrtcPeers: Array;
+}
+
+const ROOM_ID_PREFIX = 'collabify-';
+
+// Example y.js colours
+export const usercolors = [
+ { color: '#30bced', light: '#30bced33' },
+ { color: '#6eeb83', light: '#6eeb8333' },
+ { color: '#ffbc42', light: '#ffbc4233' },
+ { color: '#ecd444', light: '#ecd44433' },
+ { color: '#ee6352', light: '#ee635233' },
+ { color: '#9ac2c9', light: '#9ac2c933' },
+ { color: '#8acb88', light: '#8acb8833' },
+ { color: '#1be7ff', light: '#1be7ff33' },
+];
+
+export const createWebrtcProvider = (session: Session, isHost: boolean) => {
+ const roomId = `${ROOM_ID_PREFIX}${session.roomId}`;
+
+ const ydoc = new Doc();
+ const webrtcProvider = new WebrtcProvider(roomId, ydoc, {
+ password: session.secret,
+ signaling: ['ws://localhost:4444'],
+ });
+
+ const userColor = usercolors[uint32() % usercolors.length];
+ webrtcProvider.awareness.setLocalStateField('user', {
+ color: userColor.color,
+ colorLight: userColor.light,
+ isHost,
+ name: 'Anonymous ' + Math.floor(Math.random() * 100),
+ });
+
+ return webrtcProvider;
+};
+
+export function setDocMapAndWaitForSync(
+ doc: Doc,
+ mapName: string,
+ key: string,
+ value: T,
+): Promise {
+ return new Promise((resolve, reject) => {
+ const updateHandler = () => {
+ doc.off('update', updateHandler);
+ resolve();
+ };
+
+ doc.on('update', updateHandler);
+ doc.getMap(mapName).set(key, value);
+
+ setTimeout(() => {
+ doc.off('update', updateHandler);
+ reject(new Error('Sync timeout'));
+ }, 5000);
+
+ updateHandler();
+ });
+}
+
+export function findHostId(awarenessState: AwarenessState) {
+ for (const [key, value] of awarenessState.entries()) {
+ if (value.user.isHost) {
+ return key;
+ }
+ }
+ return undefined;
+}
diff --git a/src/utils/random.test.ts b/src/utils/random.test.ts
new file mode 100644
index 0000000..12f6f96
--- /dev/null
+++ b/src/utils/random.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+
+import { generateSecureAlphanumericString } from './random';
+
+describe('generateSecureAlphanumericString', () => {
+ it('should generate a string of the correct length', () => {
+ const length = 10;
+ const result = generateSecureAlphanumericString(length);
+ expect(result).toHaveLength(length);
+ });
+
+ it('should only contain alphanumeric characters', () => {
+ const length = 20;
+ const result = generateSecureAlphanumericString(length);
+ expect(result).toMatch(/^[\dA-Za-z]+$/);
+ });
+
+ it('should handle zero length', () => {
+ const result = generateSecureAlphanumericString(0);
+ expect(result).toBe('');
+ });
+
+ it('should throw an error for negative lengths', () => {
+ expect(() => generateSecureAlphanumericString(-1)).toThrow();
+ });
+
+ it('each character should be from the defined character set', () => {
+ const charset =
+ 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ const length = 100;
+ const result = generateSecureAlphanumericString(length);
+ for (const char of result) {
+ expect(charset).toContain(char);
+ }
+ });
+
+ it('randomness test - check for non-repeating patterns in multiple runs', () => {
+ const results = new Set();
+ const sampleSize = 100;
+ for (let i = 0; i < sampleSize; i++) {
+ results.add(generateSecureAlphanumericString(10));
+ }
+ // Expecting unique results assumes a very low probability of collisions.
+ expect(results.size).toBeCloseTo(sampleSize, 0.9 * sampleSize);
+ });
+
+ it('generates very long strings without errors', () => {
+ const length = 1000;
+ const result = generateSecureAlphanumericString(length);
+ expect(result).toHaveLength(length);
+ expect(result).toMatch(/^[\dA-Za-z]+$/);
+ });
+});
diff --git a/src/utils/random.ts b/src/utils/random.ts
new file mode 100644
index 0000000..c594682
--- /dev/null
+++ b/src/utils/random.ts
@@ -0,0 +1,13 @@
+export function generateSecureAlphanumericString(length: number): string {
+ const charset =
+ 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ const charsetLength = charset.length;
+ const randomValues = crypto.getRandomValues(new Uint8Array(length));
+ let result = '';
+
+ for (let i = 0; i < length; i++) {
+ result += charset.charAt(randomValues[i] % charsetLength);
+ }
+
+ return result;
+}
diff --git a/src/utils/session.ts b/src/utils/session.ts
new file mode 100644
index 0000000..4a67c9e
--- /dev/null
+++ b/src/utils/session.ts
@@ -0,0 +1,41 @@
+import { generateSecureAlphanumericString } from './random';
+
+export type Session = {
+ roomId: string;
+ secret: string;
+};
+
+function generateRoomId(): string {
+ return generateSecureAlphanumericString(10);
+}
+
+function generateSecret(): string {
+ return generateSecureAlphanumericString(32);
+}
+
+export function createNewSession(): Session {
+ return {
+ roomId: generateRoomId(),
+ secret: generateSecret(),
+ };
+}
+
+export function encodeSessionWithoutSecret(session: Session): string {
+ return `${session.roomId}`;
+}
+
+export function encodeJoinUrlFragment(session: Session): string {
+ // We include the word "secret" in the URL to make it clear
+ // that the URL contains a secret when sharing.
+ return `secret=${session.secret}+${session.roomId}`;
+}
+
+export function decodeJoinUrlFragment(urlFragment: string): Session {
+ const encodedSessionWithSecret = urlFragment.split('secret=')[1];
+ const [secret, roomId] = encodedSessionWithSecret.split('+');
+ return { roomId, secret };
+}
+
+export function buildJoinUrl(session: Session): string {
+ return `${window.location.origin}/join#${encodeJoinUrlFragment(session)}`;
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..c61c2f7
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,82 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ['class'],
+ content: [
+ './pages/**/*.{ts,tsx}',
+ './components/**/*.{ts,tsx}',
+ './app/**/*.{ts,tsx}',
+ './src/**/*.{ts,tsx}',
+ './*.html',
+ ],
+ prefix: '',
+ theme: {
+ container: {
+ center: true,
+ padding: '2rem',
+ screens: {
+ '2xl': '1400px',
+ },
+ },
+ extend: {
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))',
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))',
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))',
+ },
+ success: {
+ DEFAULT: 'hsl(var(--success))',
+ foreground: 'hsl(var(--success-foreground))',
+ },
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: { height: '0' },
+ to: { height: 'var(--radix-accordion-content-height)' },
+ },
+ 'accordion-up': {
+ from: { height: 'var(--radix-accordion-content-height)' },
+ to: { height: '0' },
+ },
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out',
+ },
+ },
+ },
+ plugins: [require('tailwindcss-animate')],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0543102
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,37 @@
+{
+ "compilerOptions": {
+ "allowJs": true,
+ "allowImportingTsExtensions": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "incremental": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "noEmit": true,
+ "noImplicitOverride": true,
+ "noUnusedLocals": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "target": "es2017",
+ "types": ["vite/client"],
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "exclude": ["node_modules"],
+ "include": ["**/*.ts", "**/*.tsx"],
+ "ts-node": {
+ "transpileOnly": true,
+ "transpiler": "ts-node/transpilers/swc",
+ "files": true,
+ "compilerOptions": {
+ "module": "esnext",
+ "isolatedModules": false
+ }
+ }
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..a9f82e1
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,12 @@
+import path from 'node:path';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
+});