kjannette/kongruity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

huge push of backend and frontend to dos to finish wiring up and UI display

Browse Source
This commit is contained in:
KS Jannette
2026-02-11 14:40:45 -05:00
parent fcc8dbe9f7
commit b60faa42d4
11 changed files with 163 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
backend/config/index.js
View File

@@ -1,10 +1,5 @@
import dotenv from 'dotenv';
dotenv.config({ path: '.secrets' });
const config = {
port: process.env.PORT || 3001,
openaiApiKey: process.env.OPENAI_API_KEY,
};
export default config;

19
backend/routes/notes.routes.js
View File

@@ -2,6 +2,7 @@ import { Router } from 'express';
import { readFile } from 'fs/promises';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
import { clusterNotes } from '../services/clustering.service.js';
const router = Router();
@@ -9,14 +10,28 @@ const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const DATA_PATH = join(__dirname, '..', 'data', 'notes.json');
const loadNotes = async () => {
const raw = await readFile(DATA_PATH, 'utf-8');
return JSON.parse(raw);
};
router.get('/', async (req, res) => {
try {
const raw = await readFile(DATA_PATH, 'utf-8');
const notes = JSON.parse(raw);
const notes = await loadNotes();
res.json(notes);
} catch (err) {
res.status(500).json({ error: 'Failed to load notes' });
}
});
router.post('/cluster', async (req, res) => {
try {
const notes = await loadNotes();
const clusters = await clusterNotes(notes);
res.json(clusters);
} catch (err) {
res.status(500).json({ error: 'Clustering failed' });
}
});
export default router;

43
backend/services/clustering.service.js
View File

@@ -1,19 +1,46 @@
import Anthropic from "@anthropic-ai/sdk";
import anthropicApiKey from "../.secrets";
import { anthropicApiKey } from "../.secrets.js";
const client = new Anthropic({
apiKey: anthropicApiKey
apiKey: anthropicApiKey,
});
const prompt = `You are a helpful assistant that analyzes notes for semantic similarity. Each note is a json object with the
various attributes. For clustering purposes, the relvant attribute is "text". Analze the text attributes of the notes and return a json object with the following structure: {{$notes}}`;
const buildPrompt = (notes) => {
const notesJson = JSON.stringify(notes, null, 2);
return `You are an expert at analyzing text for semantic similarity and thematic patterns.
Below is a JSON array of sticky notes. Each note has an "id" and a "text" field. Analyze the "text" field of every note and group them into meaningful thematic clusters.
Return ONLY a valid JSON array with this exact structure — no markdown, no explanation, no extra text:
[
{
"label": "Short descriptive theme name",
"noteIds": ["note_001", "note_002"]
}
]
Rules:
- Every note must appear in exactly one cluster
- Each cluster must have a concise, descriptive label
- Group by semantic meaning, not by keywords
- Aim for the most natural number of groups given the data
Here are the notes:
${notesJson}`;
};
export const clusterNotes = async (notes) => {
const response = await client.messages.create({
model: "claude-opus-4-6",
model: "claude-sonnet-4-20250514",
max_tokens: 4096,
messages: [
{ role: "user", content: `${prompt}`}
]
{ role: "user", content: buildPrompt(notes) },
],
});
return response.content[0].text;
const raw = response.content[0].text;
return JSON.parse(raw);
};

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-react-app</title>
<title>Resias</title>
</head>
<body>
<div id="root"></div>

5
frontend/src/App.css
View File

@@ -4,8 +4,3 @@
padding: 2rem;
text-align: center;
}
.card {
padding: 2em;
}

24
frontend/src/api/api.tsx
View File

@@ -1,17 +1,35 @@
import { useQuery } from '@tanstack/react-query';
import type { Sticky } from '../types/types';
import { useQuery, useMutation } from '@tanstack/react-query';
import type { Sticky, Cluster } from '../types/types';
const API_BASE = 'http://localhost:3001/v1/notes';
const fetchStickies = async (): Promise<Sticky[]> => {
const response = await fetch('http://localhost:3001/v1/notes');
const response = await fetch(API_BASE);
if (!response.ok) {
throw new Error('Failed to fetch stickies');
}
return response.json();
};
const fetchClusters = async (): Promise<Cluster[]> => {
const response = await fetch(`${API_BASE}/cluster`, {
method: 'POST',
});
if (!response.ok) {
throw new Error('Failed to cluster stickies');
}
return response.json();
};
export const useGetStickies = () => {
return useQuery<Sticky[]>({
queryKey: ['stickies'],
queryFn: fetchStickies,
});
};
export const useClusterStickies = () => {
return useMutation<Cluster[]>({
mutationFn: fetchClusters,
});
};

13
frontend/src/components/button.tsx
View File

@@ -1,11 +1,14 @@
import { useState } from 'react';
type ClusterButtonProps = {
onClick: () => void;
isLoading: boolean;
};
const Button = () => {
const ClusterButton = ({ onClick, isLoading }: ClusterButtonProps) => {
return (
<button>
Click me
<button onClick={onClick} disabled={isLoading}>
{isLoading ? 'Clustering...' : 'Run Clustering'}
</button>
);
};
export default Button;
export default ClusterButton;

19
frontend/src/components/stickies.css
View File

@@ -5,3 +5,22 @@
justify-content: center;
padding: 24px;
}
.clusters-container {
display: flex;
flex-direction: column;
gap: 32px;
padding: 24px 0;
}
.cluster-group {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 16px;
}
.cluster-label {
margin: 0 0 16px 0;
font-size: 1.2em;
font-weight: 600;
}

45
frontend/src/components/stickies.tsx
View File

@@ -1,19 +1,58 @@
import { useGetStickies } from '../api/api';
import { useGetStickies, useClusterStickies } from '../api/api';
import type { Sticky as StickyType } from '../types/types';
import Sticky from './sticky';
import ClusterButton from './button';
import './stickies.css';
const Stickies = () => {
const { data, isLoading, error } = useGetStickies();
const { data: stickies, isLoading, error } = useGetStickies();
const { mutate: cluster, data: clusters, isPending } = useClusterStickies();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
const handleCluster = () => {
cluster();
};
const buildStickyMap = (): Map<string, StickyType> => {
const map = new Map<string, StickyType>();
stickies?.forEach((s) => map.set(s.id, s));
return map;
};
if (clusters) {
const stickyMap = buildStickyMap();
return (
<div>
<ClusterButton onClick={handleCluster} isLoading={isPending} />
<div className="clusters-container">
{clusters.map((group) => (
<div key={group.label} className="cluster-group">
<h3 className="cluster-label">{group.label}</h3>
<div className="stickies-grid">
{data?.map((sticky) => (
{group.noteIds.map((id) => {
const sticky = stickyMap.get(id);
return sticky ? <Sticky key={sticky.id} sticky={sticky} /> : null;
})}
</div>
</div>
))}
</div>
</div>
);
}
return (
<div>
<ClusterButton onClick={handleCluster} isLoading={isPending} />
<div className="stickies-grid">
{stickies?.map((sticky) => (
<Sticky key={sticky.id} sticky={sticky} />
))}
</div>
</div>
);
};

23
frontend/src/index.css
View File

@@ -2,30 +2,17 @@
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
@@ -46,22 +33,26 @@ button {
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}

5
frontend/src/types/types.tsx
View File

@@ -6,3 +6,8 @@ export type Sticky = {
author: string;
color: string;
};
export type Cluster = {
label: string;
noteIds: string[];
};