app-overview.mp4
- Photo upload with EXIF extraction
- Organize photos by tag and camera model
- Infinite scroll
- Built-in auth
- Light/dark mode
- Automatic OG image generation
- Support for Fujifilm simulations
- Click Deploy
- Add required storage (Vercel Postgres Vercel Blob)
- Add environment variables
NEXT_PUBLIC_SITE_TITLE
(e.g., My Photos)NEXT_PUBLIC_SITE_DOMAIN
(e.g., photos.domain.com)NEXT_PUBLIC_SITE_DESCRIPTION
(optional—mainly used for OG meta)
- Generate auth secret
- Add to environment variables:
AUTH_SECRET
- Add admin user to environment variables:
ADMIN_EMAIL
ADMIN_PASSWORD
- Visit
/admin
- Click "Choose File"
- Title your photo
- Click "Create"
- Clone code
- Run
pnpm i
to install dependencies - Set environment variable
AUTH_URL
locally (not in production) tohttp://localhost:3000/api/url
(this is a temporary limitation ofnext-auth
v5.0) - Run
vc dev
to start dev server, and utilize Vercel-stored environment variables
- Open project on Vercel
- Click "Analytics" tab
- Follow "Enable Web Analytics" instructions (
@vercel/analytics
is already part of your project)
NEXT_PUBLIC_PRO_MODE = 1
enables higher quality image storageNEXT_PUBLIC_GEO_PRIVACY = 1
disables collection/display of location-based dataNEXT_PUBLIC_PUBLIC_API = 1
enables public API available at/api
NEXT_PUBLIC_HIDE_REPO_LINK = 1
removes footer link to repoNEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1
prevents Fujifilm simulations showing up in/grid
sidebarNEXT_PUBLIC_GRID_ASPECT_RATIO = 1.5
sets aspect ratio for grid tiles (defaults to1
—setting to0
removes the constraint)NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM
keeps OG image text bottom aligned (default is top)
- Setup bucket
- Create S3 bucket with "ACLs enabled," and "Block all public access" turned off
- Setup CORS under bucket permissions:
[{ "AllowedHeaders": ["*"], "AllowedMethods": [ "GET", "PUT" ], "AllowedOrigins": [ "http://localhost:*", "https://{VERCEL_PROJECT_NAME}*.vercel.app" "{PRODUCTION_DOMAIN}", ], "ExposeHeaders": [] }]
- Store configuration
- Bucket name:
NEXT_PUBLIC_AWS_S3_BUCKET
- Bucket region:
NEXT_PUBLIC_AWS_S3_REGION
- Bucket name:
- Setup credentials
- Create IAM policy using JSON editor:
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:PutObject", "s3:PutObjectACL", "s3:GetObject", "s3:ListBucket", "s3:DeleteObject" ], "Resource": [ "arn:aws:s3:::{BUCKET_NAME}", "arn:aws:s3:::{BUCKET_NAME}/*" ] } ] }
- Create IAM user by choosing "Attach policies directly," and selecting the policy created above. Create access key under "Security credentials," choose "Application running outside AWS," and store credentials (
⚠️ Ensure access keys are not prefixed withNEXT_PUBLIC
):AWS_S3_ACCESS_KEY
AWS_S3_SECRET_ACCESS_KEY
- Create IAM policy using JSON editor:
Absent configuration, the default grid aspect ratio is
1
. It can be set to any number (for instance1.5
for 3:2 images) viaNEXT_PUBLIC_GRID_ASPECT_RATIO
or ignored entirely by setting to0
.
My images/content have fallen out of sync with my database and/or my production site no longer matches local development. What do I do?
Navigate to
/admin/configuration
and click "Clear Cache."
Navigate to
/admin/configuration
and click "Clear Cache." If this doesn't help, open an issue.
Fujifilm simulation data is stored in vendor-specific Makernote binaries embedded in EXIF data. Under certain circumstances an intermediary may strip out this data for a variety of reasons. For instance, there is a known issue on iOS where editing an image, e.g., cropping it, causes Makernote data loss. If your simulation data appears to be missing, try importing the original file as it was stored by the camera. Additionally, if you can confirm the simulation mode on camera, you can then edit the photo record and manually select it.
For a number of reasons, only EXIF orientations: 1, 3, 6, and 8 are supported. Orientations 2, 4, 5, and 7—which make use of mirroring—are not supported.