ANDY ZHANG
The Directory 00:00:00
← The directory
TypeScript · Web

Suffield Drive

A drive for Suffield students to access and share school resources.

Source ↗Live demo ↗

Suffield Drive connects a browser file workspace to WebDAV storage

Open Suffield Drive · Run your own · Security note

A WebDAV-backed file workspace built for sharing school resources. Suffield Drive adds a responsive browser, previews, search, batch actions, and drag-and-drop uploads on top of an existing WebDAV server.

The workspace

Browse Preview Organize
List or grid view, breadcrumbs, recursive search, name/size/date sorting Images, PDF, video, audio, DOCX, text, and code Upload, create folders, rename, move, delete, copy/cut, and ZIP downloads

The interface supports mouse, touch, keyboard shortcuts, context menus, drag-to-select, and folder uploads. A floating action bar keeps multi-file operations close to the current selection.

How data moves

browser
  ├── server-rendered directory listing ─┐
  ├── SWR list refresh                  ├── Next.js server ── WebDAV
  ├── server actions for mutations      │
  └── file and ZIP download routes ─────┘
  • app/page.tsx loads the first directory listing on the server.
  • FileBrowserClient keeps client-side directory data fresh with SWR.
  • Server actions handle uploads, folders, renames, moves, and deletion.
  • API routes stream individual files and build ZIP archives.

Run your own

Requirements

  • Node.js 20 or newer
  • A WebDAV-compatible backend such as Nextcloud or Koofr
git clone https://github.com/ChinesePrince07/andypandy-suffield-drive.git
cd andypandy-suffield-drive
npm install

Create .env.local:

WEBDAV_URL=https://your-server.example/dav/files/account/
WEBDAV_USERNAME=your-account
WEBDAV_PASSWORD=your-app-password

Start the development server:

npm run dev

Open http://localhost:3000.

Security boundary

Warning

The current “admin mode” is a client-side interface gate, not server-side authorization. Server actions use the configured WebDAV credentials. Do not expose a deployment with write-capable credentials to untrusted users. Prefer a private deployment or read-only WebDAV account until server-side authentication is added.

Keep .env.local out of version control and use an app-specific WebDAV credential where the provider supports one.

Preview support

Type Behavior
Images In-app image preview
PDF PDF.js viewer
DOCX Rendered with Mammoth
Video and audio Native browser playback where supported
Text and code In-app text preview
Other Office formats Download prompt

Browser codec support determines which media formats play inline.

Project map

app/
├── page.tsx          initial WebDAV listing
├── actions.ts        mutations and uploads
└── api/              list, file streaming, and ZIP routes

components/
├── file-browser/     browsing, previews, selection, and actions
├── layout/           header, search, and account controls
└── ui/               Radix/shadcn primitives

lib/
├── webdav.ts         configured WebDAV client
├── auth-context.tsx  client-side admin UI state
└── *-context.tsx     clipboard and confirmation state

Stack

Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · SWR · WebDAV · Radix UI · PDF.js · Mammoth · Archiver

Checks

npm run lint
npm run build