Live Demo · Screenshots · Features · Getting Started

---

Table of Contents

Table of Contents

• Screenshot
• Features
  • Authentication and layout
  • Navigation
  • Files
  • Linked data
  • Sharing
  • Progressive Web App
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Development
  • Testing
  • Production build
  • Regenerating derived files
  • Docker
• How it works
  • Pod layout
  • Upload sequence
  • Sharing
  • Semantic classification
• Project structure
• Known issues
• Contributing
• License

---

Screenshot

Features

Authentication and layout

• Authentication: log in via any OIDC-compliant Solid identity provider (solidcommunity.net, inrupt.net, solidweb.org, or a self-hosted server)

• Layout choice: switch at runtime between the classic two-pane shell and the OneDrive style shell; the preference is persisted in localStorage

• Language switching: switch between English and German at runtime

Navigation

• OneDrive views: Home / Recent, My Files, Shared, Requests, and People; each view has its own toolbar, type filter chips, and a person and name filter; the Shared view has With you and By you tabs

• Pod navigation: browse the full Pod directory tree with breadcrumb navigation; per folder scroll position is preserved across browser back and forward

• URLs and history: the open folder is reflected in the query string (folder=…) and the active OneDrive view in view=…; copy the address bar to share a deep link, and use the browser back/forward buttons to move through your navigation history

Files

• File upload: accepts any file type. Users can upload through the dialog form, by dragging files onto the panel or a folder row, or from the OneDrive Create menu. The binary and a metadata document index.ttl are stored inside a dedicated container on the Pod, and an upload tray surfaces progress and per-file retry.

• Folder creation: the classic explorer uses an inline form, and the OneDrive shell opens a modal dialog. Both create LDP BasicContainers under the active folder.

• File adoption: renders files that existed on the Pod before the app was used, showing folder name and download button for containers lacking index.ttl

• Inline preview: images, videos, audio, PDFs, and text files preview directly in the browser, no request leaves the browser after the file is fetched

• Download: triggers a browser native download from the blob URL

• File info: a toggle on each file card shows type, size, upload date, modified date, and publisher name resolved from their Solid profile

• Selection actions: the OneDrive shell shows Share, Copy link, Delete, and Download in the page header, plus Move to and Rename stubs. Actions that no longer fit inline spill into a kebab dropdown at narrow viewports.

• Delete: removes the binary, index.ttl, the container, and the catalog entry; no orphaned resources remain

Linked data

• TBox-driven validation: SHACL shapes are loaded from public/tbox.ttl at form open time; required fields (name, uploadDate, publisher) are enforced before upload; missing fields are surfaced inline

• Semantic classification: MIME type is mapped to a schema.org class and written to index.ttl as rdf:type

• Catalog management: catalog.ttl is updated on every upload and cleaned up on every delete using SPARQL PATCH

Sharing

• Share / revoke access: each owned file can be shared with contacts from the user’s Solid profile; ACLs and per-contact shared catalogs are kept in sync

• Shared with Me: reads per contact shared catalogs first, then falls back to the contact’s main catalog

• Filtered system files: internal catalog and ACL helper files (.shared-*.ttl) are hidden from the normal file browser

Progressive Web App

• Desktop install: a linked web app manifest, an icon set (192, 512, and a 512 maskable variant), and a registered service worker make Solid.drive installable from Chrome and Edge; the installed app launches in its own standalone window

• Install control: the OneDrive topbar shows an Install app button only while the browser is offering an install prompt, and hides it again once the app is installed

• Base-path aware: the manifest’s start_url and scope, the service worker scope, and all asset links honour Vite’s BASE_URL, so the app installs correctly both at the origin root and behind the reverse proxy

• Offline shell: the service worker uses a network-first strategy, so online content is never stale while the app shell still boots offline

Tech Stack

Layer	Libraries/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 · Playwright (E2E)
CI	GitHub Actions (test coverage · Playwright · Docker)
Deployment	Docker · nginx

Getting Started

Prerequisites

• Node.js 20.x or later

Installation

git clone {github-repository}.git
cd Solid-Hello-World-Frontend-React
npm install

Usage

Development

npm run dev           # extract TBox and start dev server at http://localhost:5173

Testing

npm test              # unit tests once
npm run test:watch    # unit tests in watch mode
npm run test:coverage # unit tests with v8 coverage
npm run test:e2e      # Playwright end-to-end tests
npm run test:e2e:ui   # Playwright interactive UI mode

Production build

npm run build         # extract TBox, type check, and bundle
npm run preview       # serve the built bundle locally

Regenerating derived files

npm run tbox:extract  # refetch datashapes.org and rewrite public/tbox.ttl
npm run build:ldo     # recompile ShEx shapes -> TypeScript bindings in src/.ldo/

ℹ️	npm run dev and npm run build run tbox:extract automatically. Use the manual commands only after editing .shapes/ files or when the upstream ontology changes.

Docker

Run the published image:

docker run -p 40211:80 wseresearch/solid-hello-world-frontend-react

Or build and run locally:

docker build -t wseresearch/solid-hello-world-frontend-react:local .
docker run -p 40211:80 wseresearch/solid-hello-world-frontend-react:local

The app listens on port 80 inside the container; open http://localhost:5173/ in your browser.

How it works

Pod layout

Each uploaded file gets a dedicated container on the Pod. A DCAT catalog at the storage root keeps a queryable index:

Pod storage root/
|-- catalog.ttl                  <- DCAT catalog: one entry per file
`-- my-solid-app/
    |-- .shared-<webid>.ttl      <- per-contact shared catalog
    `-- photo-2024-01-01/        <- one container per uploaded file
        |-- photo.jpg            <- the binary
        `-- index.ttl            <- schema.org metadata

Upload sequence

pick file
  -> validate metadata against SHACL shapes (tbox.ttl)
    -> resolve schema.org class from MIME type
      -> create container
        -> upload binary
          -> write index.ttl
            -> append dcat:Dataset entry to catalog.ttl
              -> link catalog to WebID profile (first upload only)

ℹ️	If any step after the binary upload fails, the whole container is deleted, and no half-written resources are left on the Pod.

Sharing

Sharing happens at the file container level. Granting access updates the file’s ACL and mirrors its catalog entry into a per-contact shared catalog inside my-solid-app/. Revoking removes the recipient from the ACL and cleans up their shared catalog entry.

Semantic classification

MIME types are mapped to schema.org classes:

image/*

schema:ImageObject

video/*

schema:VideoObject

audio/*

schema:AudioObject

text/*, application/pdf, Word

schema:TextDigitalDocument

CSV, Excel

schema:SpreadsheetDigitalDocument

Anything else

schema:DigitalDocument

Project structure

solid.drive/
|-- src/
|   |-- .shapes/              # ShEx shapes (edit here)
|   |-- .ldo/                 # LDO bindings (auto-generated)
|   |-- app/                  # Root component, ClassicLayout, bootstrap hooks, i18n, locales
|   |-- config/               # Constants and env vars
|   |-- features/
|   |   |-- auth/
|   |   |-- file-explorer/
|   |   |-- onedrive-layout/  # OneDrive style shell: rail, top bar, views, hooks
|   |   |-- profile/
|   |   `-- sharing/          # WAC/ACL hooks
|   |-- infrastructure/       # Solid/RDF, no React
|   |   |-- inbox/
|   |   |-- solid/
|   |   |-- validation/
|   |   `-- wac/
|   |-- shared/               # Components, contexts, hooks, utils
|   |-- types/
|   `-- assets/
|-- public/
|   `-- tbox.ttl              # SHACL TBox (auto-generated)
|-- scripts/
|-- e2e/                      # Playwright tests
|-- .github/workflows/        # CI: test coverage, Playwright, Docker
|-- Dockerfile
|-- nginx.conf
|-- vite.config.ts
`-- vitest.config.ts

See src/README.adoc for the full layer map and dependency rules.
See src/.shapes/README.adoc for shape definitions.
See TESTER_GUIDE.adoc for manual QA steps.

Known issues

• inrupt.net blocks localhost redirects. The inrupt.net identity provider rejects OIDC redirect URIs pointing to localhost. Use solidcommunity.net or solidweb.org when testing locally.

Contributing

Contributions are welcome. Open a new issue to discuss a change, or send a pull request directly.

Before submitting, please:

1. Run npm run lint, npm test, and npm run test:e2e locally.

2. Keep coverage above the configured 80% thresholds.

3. Follow the per directory module convention (-file/, -test/, index-test/, README.adoc).

License

Released under the MIT License © Web & Software Engineering research group, Leipzig University of Applied Sciences.