feat(prototype): add upload manager and docker ci

- add prototype upload, list, view, and delete api routes
- add prototype manager ui with search, modal, and theme toggle
- add filesystem-backed zip extraction and serving logic
- switch project to pnpm with updated lockfile and tooling
- add multi-stage dockerfile with standalone next.js output
- add github actions to lint, build, and publish docker images
This commit is contained in:
siujamo committed 2026-08-31 13:43:59 +08:00
1 parent 0c592225e4
commit ed72045f5e
30 files changed
+5369 -6899

No files matched your search

+72 -22
View File
@@ -1,36 +1,86 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
This is a Next.js + Tailwind CSS based Axure prototype manager.
## Getting Started
## Tech Stack
First, run the development server:
- Next.js (App Router, TypeScript)
- Tailwind CSS (atomic utility classes)
- Node runtime API Routes
- Local filesystem persistence (`data/prototypes`)
- Package manager: **pnpm**
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
## Features
- Prototype card navigation homepage
- Upload Axure prototype ZIP package manually
- Auto-parse and register prototype (ZIP must contain `start.html`)
- Open prototype in **new tab**
- Dark mode toggle (stored in `localStorage`)
- Delete uploaded prototype
## Directory Structure
```text
app/
api/prototypes/
route.ts # list + upload
[id]/route.ts # delete
[id]/[...path]/route.ts # serve prototype files
layout.tsx
page.tsx
components/
AddPrototypeModal.tsx
PrototypeCard.tsx
ThemeToggle.tsx
lib/
prototype.ts
store.ts
data/
prototypes/
index.json # runtime metadata (auto-generated)
<prototype-id>/... # unzipped Axure files
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Start Development
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
```bash
pnpm install
pnpm dev
```
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
Open `http://localhost:3000`.
## Learn More
## Build & Run Production
To learn more about Next.js, take a look at the following resources:
```bash
pnpm build
pnpm start
```
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Docker (multi-stage, pnpm)
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
Build image:
## Deploy on Vercel
```bash
docker build -t prototype-manager:latest .
```
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Run container:
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
```bash
docker run --rm -p 3000:3000 -v prototype-manager-data:/app/data prototype-manager:latest
```
Notes:
- Image uses Next.js `output: "standalone"` and `pnpm` in multi-stage build.
- Runtime data is written to `/app/data/prototypes`; mount a volume to persist uploads.
## Upload Requirements
- Only `.zip` is accepted
- ZIP must include `start.html`
- Keep Axure relative assets (`resources`, `data`, `images`, etc.) in original structure
## Notes on Deployment
This project writes files at runtime (upload/unzip), so it must run in a writable Node environment (self-hosted server/VM/container with persistent volume).