File upload setup

.env.example

@@ -6,7 +6,20 @@ DOCKER_DATABASE_NAME="startui"
 DOCKER_DATABASE_USERNAME="startui"
 DOCKER_DATABASE_PASSWORD="startui"
 
+DOCKER_MINIO_API_PORT="9000"
+DOCKER_MINIO_UI_PORT="9001"
+DOCKER_MINIO_USERNAME="minioadmin"
+DOCKER_MINIO_PASSWORD="minioadmin"
+
+# S3
+S3_ENDPOINT="http://127.0.0.1:${DOCKER_MINIO_API_PORT}"
+S3_BUCKET_NAME="start-ui-bucket"
+S3_ACCESS_KEY_ID="startui-access-key"
+S3_SECRET_ACCESS_KEY="startui-secret-key"
+S3_REGION="default"
+
 # PUBLIC CONFIG
+VITE_S3_BUCKET_PUBLIC_URL="${S3_ENDPOINT}/${S3_BUCKET_NAME}"
 VITE_BASE_URL="http://localhost:${VITE_PORT}"
 # Use the following environment variables to show the environment name.
 VITE_ENV_NAME="LOCAL"

docker-compose.yml

@@ -4,13 +4,55 @@ services:
     env_file:
       - .env
     ports:
-      - '${DOCKER_DATABASE_PORT:-5432}:5432'
+      - "${DOCKER_DATABASE_PORT:-5432}:5432"
     environment:
       POSTGRES_DB: $DOCKER_DATABASE_NAME
       POSTGRES_USER: $DOCKER_DATABASE_USERNAME
       POSTGRES_PASSWORD: $DOCKER_DATABASE_PASSWORD
     healthcheck:
-      test: ['CMD-SHELL', 'pg_isready -U $DOCKER_DATABASE_NAME']
+      test: ["CMD-SHELL", "pg_isready -U $DOCKER_DATABASE_NAME"]
       interval: 10s
       timeout: 5s
       retries: 5
+
+  minio:
+    image: minio/minio:RELEASE.2025-07-23T15-54-02Z-cpuv1
+    ports:
+      - "${DOCKER_MINIO_API_PORT}:9000"
+      - "${DOCKER_MINIO_UI_PORT}:9001"
+    environment:
+      - MINIO_ROOT_USER=${DOCKER_MINIO_USERNAME}
+      - MINIO_ROOT_PASSWORD=${DOCKER_MINIO_PASSWORD}
+    volumes:
+      - minio:/data/minio
+    command: minio server /data/minio --console-address :${DOCKER_MINIO_UI_PORT}
+    healthcheck:
+      test: ["CMD", "mc", "ready", "local"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  createbucket:
+    image: minio/mc:RELEASE.2025-08-13T08-35-41Z-cpuv1
+    profiles:
+      - init
+    depends_on:
+      minio:
+        condition: service_healthy
+    entrypoint: [""]
+    command: [
+        "sh",
+        "-c",
+        '
+        mc alias set default http://minio:9000 "${DOCKER_MINIO_USERNAME}" "${DOCKER_MINIO_PASSWORD}";
+        mc admin user add default ${S3_ACCESS_KEY_ID} ${S3_SECRET_ACCESS_KEY};
+        mc admin policy attach default readwrite --user ${S3_ACCESS_KEY_ID};
+        mc mb --ignore-existing default/${S3_BUCKET_NAME} 2>/dev/null;
+        mc anonymous set download default/${S3_BUCKET_NAME};
+        echo ''Bucket configuration completed successfully'';
+        ',
+      ]
+    restart: "no"
+
+volumes:
+  minio:

package.json

@@ -32,7 +32,7 @@
     "test:ui": "vitest",
     "e2e": "dotenv -- cross-env playwright test",
     "e2e:ui": "dotenv -- cross-env playwright test --ui",
-    "dk:init": "docker compose up -d",
+    "dk:init": "docker compose --profile init up -d",
     "dk:start": "docker compose start",
     "dk:stop": "docker compose stop",
     "dk:clear": "docker compose down --volumes",
@@ -45,6 +45,8 @@
     "@base-ui-components/react": "1.0.0-beta.1",
     "@bearstudio/ui-state": "1.0.2",
     "@better-auth/expo": "1.3.27",
+    "@better-upload/client": "3.0.2",
+    "@better-upload/server": "3.0.2",
     "@fontsource-variable/inter": "5.2.8",
     "@headlessui/react": "2.2.9",
     "@hookform/resolvers": "5.2.2",

prisma/schema.prisma

@@ -94,6 +94,7 @@ model Book {
   genre     Genre?   @relation(fields: [genreId], references: [id])
   genreId   String
   publisher String?
+  coverId   String?
 
   @@unique([title, author])
   @@map("book")

src/components/ui/upload-button.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta } from '@storybook/react-vite';
+import { UploadIcon } from 'lucide-react';
+
+import { UploadButton } from '@/components/ui/upload-button';
+
+export default {
+  title: 'Upload Button',
+} satisfies Meta<typeof UploadButton>;
+
+export const Default = () => {
+  return (
+    <UploadButton
+      uploadRoute="bookCover"
+      inputProps={{
+        accept: 'image/png,image/jpeg,image/gif',
+      }}
+      onUploadSuccess={(file) => console.log('uploaded file', file)}
+    />
+  );
+};
+
+export const WithChildren = () => {
+  return (
+    <div className="flex space-x-2">
+      <UploadButton
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
+      >
+        <UploadIcon />
+        Upload a new file
+      </UploadButton>
+
+      <UploadButton
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
+      >
+        Upload a new file
+        <UploadIcon />
+      </UploadButton>
+
+      <UploadButton
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
+      >
+        Upload a new file
+      </UploadButton>
+    </div>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <div className="flex space-x-2">
+      <UploadButton
+        disabled
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
+      >
+        <UploadIcon />
+        Upload a new file
+      </UploadButton>
+
+      <UploadButton
+        disabled
+        uploadRoute="bookCover"
+        onUploadSuccess={(file) => console.log('uploaded file', file)}
+      >
+        Upload a new file
+        <UploadIcon />
+      </UploadButton>
+    </div>
+  );
+};