Photography Blog 📸

A modern, open-source photography blog platform built with the latest web technologies. Share your photography journey with style and efficiency.

✨ Features

• 📱 Responsive design for all devices
• 🖼️ Automatic EXIF data extraction from photos
• 🔐 Secure authentication with Better Auth
• ☁️ Cloud storage with Cloudflare R2
• 🎨 Beautiful UI with Shadcn/ui components
• 🚀 Lightning-fast performance
• 📍 Location-based photo organization
• 🌐 SEO optimized
• 🎯 API powered by tRPC

📸 Screenshots

🌈 Support Theme

• 🌈 Dark
• 🌈 Light

🛠️ Tech Stack

• Framework: Next.js 15
• Database: Neon (Serverless Postgres)
• ORM: Drizzle
• Authentication: Better Auth
• UI Components: Shadcn/ui
• API Layer: tRPC
• Storage: Cloudflare R2
• Deployment: Vercel

🚀 Getting Started

Prerequisites

• Node.js 20+
• bun (recommended) or npm
• Neon Database
• Cloudflare R2 Account
• Mapbox Account

Environment Variables

Create a .env file in the root directory:

# Database
DATABASE_URL=your_database_url

# Auth
# You can generate a random secret using `openssl rand -base64 32`
BETTER_AUTH_SECRET=
BETTER_AUTH_URL=http://localhost:3000 #Base URL of your app

NEXT_PUBLIC_APP_URL='http://localhost:3000'

# Cloudflare R2
CLOUDFLARE_R2_ENDPOINT=
CLOUDFLARE_R2_ACCESS_KEY_ID=
CLOUDFLARE_R2_SECRET_ACCESS_KEY=
CLOUDFLARE_R2_BUCKET_NAME=
CLOUDFLARE_R2_PUBLIC_URL=

# Mapbox
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

Replace your-domain.com with your actual domain name. This is required for Cloudflare Image Optimization to work correctly.

Installation

1. Clone the repository:

git clone https://github.com/your-username/photography-website.git
cd photography-website

2. Install dependencies:

bun install

3. Set up the database:

bun db:push

4. Start the development server:

bun run dev

Initial User Registration

When you first deploy the application, you'll need to create an admin user. You can do this by visiting:

http://localhost:3000/sign-up

Note: After the first admin user is created, the /sign-up route will be disabled for security purposes. Any subsequent attempts to access the sign-up page will automatically redirect to the sign-in page (/sign-in).

Custom Domain Configuration

Before deploying, you need to update the custom domain in image-loader.ts:

// image-loader.ts
return `https://your-domain.com/cdn-cgi/image/${paramsString}/${normalizeSrc(
  src
)}`;

Visit http://localhost:3000 to see your application.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Feel free to open issues and pull requests.

💖 Support

If you find this project helpful, please give it a ⭐️ on GitHub!

⭐️ Star History

📝 Changelog

• 2025-02-13: tRPC instead of Hono.js
• 2025-01-12: Better Auth instead of Next Auth

🏃‍♂️ Todo

• Home page with tRPC
• Discover page with tRPC
• Dashboard photos & photo id page with tRPC
• Blog page with tRPC
• Travel page with tRPC