Skip to content

Architecture

Jump to bottom
Parnian Hajian edited this page Apr 23, 2026 · 1 revision

Architecture

solid.drive follows a strict layered architecture that separates UI concerns from Solid protocol logic. The boundary between features and infrastructure is enforced by convention: infrastructure modules never import from features, and features talk to infrastructure through well-defined hooks and service functions.

Layer Overview

app/                               entry point · i18n setup · locale files
 │
 ├──▶ features/                   auth · file-explorer · profile · sharing
 │         │
 │         └──▶ infrastructure/   solid · inbox · validation · wac
 │
 └──▶ foundation/                 shared · config · types

Each layer has a clear responsibility:

Layer Responsibility

app

Application entry point. Mounts the root React component, configures i18next, and loads locale files.

features

Self-contained UI domains. Each feature owns its components, hooks, and local state. Features may import from infrastructure and shared but not from each other, with one documented exception described in the note below.

infrastructure

Protocol and service layer. No React, no UI. Handles all network communication, RDF parsing, and Solid-specific protocols. Infrastructure modules depend only on config, types, and each other.

foundation

Cross-cutting utilities. shared/ provides reusable components, contexts, and hooks. config/ is the single source of truth for constants and environment variables. types/ holds shared TypeScript types.
ℹ️
 The only permitted cross-feature import is file-explorer → features/sharing/hooks/useAclManager. All other cross-feature dependencies are prohibited.

Feature Map

Feature Responsibility

auth

Solid OIDC login and logout, provider selection, language switching. Manages the authenticated session and exposes the current user’s WebID to the rest of the app.

file-explorer

The main workspace. Browsing Pod containers, breadcrumb navigation, file upload with metadata, inline preview, download, delete, sharing via the Share panel, and the "Shared with Me" section.

profile

Viewing and editing the user’s Solid profile (name, avatar), managing the contacts list, and handling incoming access requests (approve and deny).

sharing

Low-level WAC/ACL hooks. Consumed exclusively by the file-explorer’s Share panel. Responsible for reading, writing, and updating .acl files on the Pod.

Infrastructure Modules

Module Responsibility

solid/

Core Solid operations: DCAT catalog CRUD, profile document patching, display name resolution, resource type guards, shared catalog naming conventions, and general RDF utilities.

inbox/

Solid LDP inbox integration. Reads incoming access request messages and rejection notifications, and writes outgoing access requests to other users' inboxes.

validation/

TBox loading from public/tbox.ttl, SHACL constraint validation at upload time, and the file type registry that maps MIME types to schema.org classes.

wac/

Web Access Control: discovers .acl resources, reads existing ACL entries, and writes new permissions for sharing and revocation.

Project Structure

solid.drive/
├── src/
│   ├── .shapes/          # ShEx shape definitions — edit here to change data shapes
│   ├── .ldo/             # Auto-generated LDO TypeScript bindings — do not edit
│   ├── app/              # Root React component, i18n configuration, locale files
│   ├── config/           # Application constants and environment variables
│   ├── features/
│   │   ├── auth/
│   │   ├── file-explorer/
│   │   ├── profile/
│   │   └── sharing/
│   ├── infrastructure/
│   │   ├── inbox/
│   │   ├── solid/
│   │   ├── validation/
│   │   └── wac/
│   ├── shared/           # Reusable components, React contexts, hooks, and utilities
│   └── types/            # Shared TypeScript type definitions
├── public/
│   └── tbox.ttl          # Auto-generated SHACL TBox — do not edit directly
├── scripts/              # Build-time scripts (TBox extraction, LDO generation)
├── Dockerfile
├── nginx.conf
├── vite.config.ts
└── vitest.config.ts

Tech Stack

Layer Libraries and Tools

Frontend

React 19 · TypeScript · Vite

Solid / Linked Data

@ldo/solid · @ldo/solid-react · ShEx · schema.org · DCAT · SHACL

Internationalisation

i18next · react-i18next · i18next-browser-languagedetector

Testing

Vitest · @testing-library/react · jsdom · @vitest/coverage-v8

Deployment

Docker · nginx

Clone this wiki locally