Minimal file storage app built with Next.js, Clerk, and Supabase.
- Upload, organize, and share files
- Favorites, trash, and restore
- Clean black & white UI
- Next.js 14
- Clerk
- Supabase
- Tailwind CSS
- Clone repo
- Install dependencies
- Add Clerk & Supabase keys to
.env.local - Run:
npm run devnpm install
### 2. Configure Supabase
1. Create a new Supabase project.
2. Go to **Storage** and create a bucket named `files`.
3. Open the **SQL Editor** and run the contents of `supabase.sql` to create the required tables and indexes.
### 3. Configure Clerk
1. Create a new Clerk application.
2. Enable **Organizations** in the Clerk dashboard.
### 4. Environment variables
Create a `.env.local` file in the project root:
```env
# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
CLERK_HOSTNAME=your-app.clerk.accounts.dev
CLERK_JWT_ISSUER_DOMAIN=https://your-app.clerk.accounts.dev
# Supabase
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=eyJ...
SUPABASE_STORAGE_BUCKET=files
npm run devOpen http://localhost:3000.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Create production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
src/
├── app/
│ ├── api/files/ # REST API routes (upload, list, delete, favorite)
│ ├── dashboard/ # Dashboard pages (files, favorites, trash)
│ │ └── _components/ # File browser, cards, table, search, upload
│ ├── layout.tsx # Root layout with Clerk + Background
│ ├── page.tsx # Landing page
│ ├── header.tsx # Navigation header
│ └── footer.tsx # Site footer
├── components/ui/ # shadcn/ui components
├── lib/
│ ├── file-types.ts # Shared type definitions
│ ├── utils.ts # Utility functions
│ └── supabase/server.ts # Supabase admin client
└── middleware.ts # Clerk auth middleware
MIT