Code Monkey home page Code Monkey logo

exif-photo-blog's Introduction

📷 EXIF Photo Blog

app-overview.mp4

Deploy with Vercel

Demo App

https://photos.sambecker.com

Features

  • 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

OG Image Preview

Installation

1. Deploy to Vercel

  1. Click Deploy
  2. Add required storage (Vercel Postgres + Vercel Blob)
  3. 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)

2. Setup Auth

  1. Generate auth secret
  2. Add to environment variables:
  • AUTH_SECRET
  1. Add admin user to environment variables:
  • ADMIN_EMAIL
  • ADMIN_PASSWORD

3. Upload your first photo

  1. Visit /admin
  2. Click "Choose File"
  3. Title your photo
  4. Click "Create"

4. Develop locally

  1. Clone code
  2. Run pnpm i to install dependencies
  3. Set environment variable AUTH_URL locally (not in production) to http://localhost:3000/api/url (this is a temporary limitation of next-auth v5.0)
  4. Run vc dev to start dev server, and utilize Vercel-stored environment variables

5. Add Analytics (optional)

  1. Open project on Vercel
  2. Click "Analytics" tab
  3. Follow "Enable Web Analytics" instructions (@vercel/analytics already included)

6. Add Speed Insights (optional)

  1. Open project on Vercel
  2. Click "Speed Insights" tab
  3. Follow "Enable Speed Insights" instructions (@vercel/speed-insights already included)

7. Optional configuration

  • NEXT_PUBLIC_PRO_MODE = 1 enables higher quality image storage for jpgs (will result in increased storage usage)
  • NEXT_PUBLIC_BLUR_DISABLED = 1 prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)
  • NEXT_PUBLIC_GEO_PRIVACY = 1 disables collection/display of location-based data
  • NEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1 prevents priority_order field affecting photo order
  • NEXT_PUBLIC_PUBLIC_API = 1 enables public API available at /api
  • NEXT_PUBLIC_HIDE_REPO_LINK = 1 removes footer link to repo
  • NEXT_PUBLIC_HIDE_FILM_SIMULATIONS = 1 prevents Fujifilm simulations showing up in /grid sidebar
  • NEXT_PUBLIC_HIDE_EXIF_DATA = 1 hides EXIF data in photo details and OG images (potentially useful for portfolios, which don't focus on photography)
  • NEXT_PUBLIC_GRID_ASPECT_RATIO = 1.5 sets aspect ratio for grid tiles (defaults to 1—setting to 0 removes the constraint)
  • NEXT_PUBLIC_OG_TEXT_ALIGNMENT = BOTTOM keeps OG image text bottom aligned (default is top)

Alternate storage providers

Only one storage adapter—Vercel Blob, Cloudflare R2, or AWS S3—can be used at a time. Ideally, this is configured before photos are uploaded (see Issue #34 for migration considerations). If you have multiple adapters, you can set one as preferred by storing "aws-s3," "cloudflare-r2," or "vercel-blob" in NEXT_PUBLIC_STORAGE_PREFERENCE.

Cloudflare R2

  1. Setup bucket
    [{
        "AllowedHeaders": ["*"],
        "AllowedMethods": [
          "GET",
          "PUT"
        ],
        "AllowedOrigins": [
           "http://localhost:3000",
           "https://{VERCEL_PROJECT_NAME}*.vercel.app",
           "{PRODUCTION_DOMAIN}"
        ]
    }]
    • Enable public hosting by doing one of the following:
      • Select "Connect Custom Domain" and choose a Cloudflare domain
      • OR
      • Select "Allow Access" from R2.dev subdomain
    • Store public configuration:
      • NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET: bucket name
      • NEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID: account id (found on R2 overview page)
      • NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN: either "your-custom-domain.com" or "pub-jf90908...s0d9f8s0s9df.r2.dev" (do not include "https://" in your domain)
  2. Setup private credentials
    • Create API token by selecting "Manage R2 API Tokens," and clicking "Create API Token"
    • Select "Object Read & Write," choose "Apply to specific buckets only," and select the bucket created in Step 1
    • Store credentials (⚠️ Ensure access keys are not prefixed with NEXT_PUBLIC):
      • CLOUDFLARE_R2_ACCESS_KEY
      • CLOUDFLARE_R2_SECRET_ACCESS_KEY

AWS S3

  1. 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 public configuration
      • NEXT_PUBLIC_AWS_S3_BUCKET: bucket name
      • NEXT_PUBLIC_AWS_S3_REGION: bucket region, e.g., "us-east-1"
  2. Setup private 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 with NEXT_PUBLIC):
      • AWS_S3_ACCESS_KEY
      • AWS_S3_SECRET_ACCESS_KEY

FAQ

Why are my thumbnails square?

Absent configuration, the default grid aspect ratio is 1. It can be set to any number (for instance 1.5 for 3:2 images) via NEXT_PUBLIC_GRID_ASPECT_RATIO or ignored entirely by setting to 0.

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."

I'm seeing server-side runtime errors when loading a page after updating my fork. What do I do?

Navigate to /admin/configuration and click "Clear Cache." If this doesn't help, open an issue.

Why aren't my Fujifilm simulations importing alongside EXIF data?

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.

Why do my images appear flipped/rotated incorrectly?

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.

exif-photo-blog's People

Contributors

sambecker avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.