Behind
the interface.
Two main cases on visual editing and data integration. A smaller third case examines the distinction between encryption and authorization.
Explore the cases ↘One document, three representations.
Frame connects an editable component tree, its canvas representation and the exported code. Changes in one layer should not unexpectedly alter the result in another.
Editable document
Component node tree and properties that define the page structure.
Canvas and responsive
Interaction, dimensions and views that reflect the editable state.
Code generation
Turn the document into an exportable page and compare it against the canvas.
- Resizing elements or moving them between containers can produce unexpected shifts and size changes. The canvas and exported code can also interpret the same design differently.
- Separate the document node tree and its state from canvas rendering and code generation. Compare dimensions, positions and responsive behavior in both outputs.
- The editor connects node manipulation, responsive views and exportable page generation. I am verifying consistency between the document model, canvas and generated output.
Frame is private code; this case focuses on the document model, transformations and consistency across representations.
export function DemoBlockRenderer({
block,
selectedId,
onSelect,
assetUrls = {},
editorInteraction,
}: {
block: DemoBlock;
selectedId?: string;
onSelect?: (blockId: string) => void;
assetUrls?: Record<string, string>;
editorInteraction?: DemoEditorInteraction;
}) {
const base = block.style;
const tablet = {
...base,
padding: Math.min(base.padding, 36),
gridColumns: Math.min(base.gridColumns, 2),
...block.responsive.tablet,
};
const mobile = {
...tablet,
padding: Math.min(tablet.padding, 24),
gridColumns: 1,
...block.responsive.mobile,
};
const automaticText = automaticTextStyle(block);
const childLayoutDisplay = block.type === "Grid" ? "grid" : "flex";
const style = {
...responsiveVariables("base", base, automaticText, childLayoutDisplay),
...responsiveVariables("tablet", tablet, automaticText, childLayoutDisplay),
...responsiveVariables("mobile", mobile, automaticText, childLayoutDisplay),
} as CSSProperties;From an external data source to a searchable tool.
The dashboard collects European funding calls and provides ways to examine, filter and export them.
External API
Retrieve European funding calls.
Data processing
Normalize and categorize relevant fields.
Exploration
Provide search, filtering, exports and selective persistence.
- External sources can provide substantial and heterogeneous data. A usable application needs to retrieve, normalize and present that data with clear ways to find relevant records.
- Query the source via a Node/Express API and expose the results through a searchable, filterable, paginated interface. Use PostgreSQL to store company records and levels of interest.
- The application integrates an external calls API, supports filtering and CSV/Excel export, and provides persistence for companies and interests. Public source links appear below.
Public source: query routes, UI and persistence can be inspected in the linked files. Classification uses rules rather than an AI model.
Encrypting data does not replace access authorization.
A notes application needs to distinguish between protecting content and restricting which records each user can access.
Client
Encrypt the note content in the browser.
API authentication
Identify the user and scope their requests.
PostgreSQL
Query records belonging to that user.
- Encryption and authorization operate at different layers. Content can be encrypted while an authorization flaw still exposes another user’s records.
- Keep content encryption in the client and scope API queries to the authenticated user.
- Read, update and delete operations use the user identifier to restrict which records they operate on.
Smaller case: public repository with notes routes and client encryption logic. A learning project, not a security-audited system.
Let’s talk about software, data and ideas.
If my background matches your project or you would like to learn more about the decisions behind my work, you can reach out or explore my public repositories.