Photo Blog with Admin Panel

Photo Blog with Admin Panel
Type: Code
Framework: Next.js
CSS: Tailwind
Database: Vercel Blob

The “EXIF Photo Blog” is an application for managing and showcasing photos, with a focus on extracting and utilizing EXIF data from images. Below are the key features and installation instructions for this application:

Features:

  1. Photo Upload with EXIF Extraction: Allows you to upload photos while extracting and utilizing EXIF data from them.
  2. Organize Photos by Tag and Camera Model: Provides the capability to organize photos based on tags and camera models.
  3. Infinite Scroll: Supports infinite scrolling for browsing through photos.
  4. Built-in Authentication: Includes built-in authentication for secure access.
  5. Light/Dark Mode: Offers both light and dark themes for user preference.
  6. Automatic OG Image Generation: Automatically generates OG (Open Graph) images for sharing on social media.
  7. Support for Fujifilm Simulations: Provides support for Fujifilm camera simulations.

Installation:

1. Deploy to Vercel:

  • Click the “Deploy” button.
  • Add the required storage (Vercel Postgres + Vercel Blob).
  • Set 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:

  • Generate an auth secret.
  • Add it to environment variables as AUTH_SECRET.
  • Add an admin user to environment variables:
    • ADMIN_EMAIL
    • ADMIN_PASSWORD

3. Upload Your First Photo:

  • Visit /admin.
  • Click “Choose File” to upload a photo.
  • Provide a title for your photo.
  • Click “Create.”

4. Develop Locally:

  • Clone the code.
  • Run pnpm i to install dependencies.
  • Set the environment variable AUTH_URL locally (not in production) to http://localhost:3000/api/url (temporary limitation of next-auth v5.0).
  • Run vc dev to start the development server, utilizing Vercel-stored environment variables.

5. Add Analytics (Optional):

  • Open the project on Vercel.
  • Click the “Analytics” tab.
  • Follow the instructions to enable web analytics (already part of your project).

6. Optional Configuration:

  • Several optional environment variables can be set to configure the application according to your preferences.

Alternate Storage Providers:

You can choose between different storage adapters, such as Vercel Blob, Cloudflare R2, or AWS S3. Only one storage adapter can be used at a time. Make the configuration before uploading photos.

  • Cloudflare R2:
    • Setup a Cloudflare R2 bucket and configure CORS.
    • Enable public hosting for your bucket.
    • Store public configuration variables.
    • Setup private credentials for API access.
  • AWS S3:
    • Create an S3 bucket with specific settings.
    • Configure CORS for the bucket.
    • Store public configuration variables.
    • Create an IAM policy and user with access keys for private credentials.

Frequently Asked Questions (FAQ):

  • The FAQ section provides answers to common questions related to square thumbnails, content synchronization, server-side runtime errors, Fujifilm simulations, and image orientation.

This application is a powerful tool for managing and showcasing photos, especially for photographers who want to leverage EXIF data and organize their photos effectively. You can find the application and its source code on GitHub.

Please refer to the GitHub repository and documentation for more detailed information and updates.

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.