A modern, open-source photography blog platform built with the latest web technologies. Share your photography journey with style and efficiency.
- 📱 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
- 🌈 Dark
- 🌈 Light
- 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
- Node.js 20+
- bun (recommended) or npm
- Neon Database
- Cloudflare R2 Account
- Mapbox Account
Create a .env.local 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.
This project is configured for automatic deployment to Vercel when you push to the main or master branch.
-
Connect your repository to Vercel:
- Go to Vercel Dashboard
- Click "New Project"
- Import your GitHub repository
- Configure your environment variables
-
Set up GitHub Secrets: Go to your GitHub repository → Settings → Secrets and variables → Actions, and add:
VERCEL_TOKEN=your_vercel_token VERCEL_ORG_ID=your_org_id VERCEL_PROJECT_ID=your_project_id -
Get Vercel credentials:
# Install Vercel CLI npm i -g vercel # Login to Vercel vercel login # Get your project info vercel link
-
Environment Variables for Production: Add these to your Vercel project settings:
DATABASE_URL=your_production_database_url BETTER_AUTH_SECRET=your_auth_secret BETTER_AUTH_URL=https://your-domain.vercel.app NEXT_PUBLIC_APP_URL=https://your-domain.vercel.app CLOUDFLARE_R2_ENDPOINT=your_r2_endpoint CLOUDFLARE_R2_ACCESS_KEY_ID=your_r2_access_key CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_r2_secret_key CLOUDFLARE_R2_BUCKET_NAME=your_bucket_name CLOUDFLARE_R2_PUBLIC_URL=your_r2_public_url NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token
- Clone the repository:
git clone https://github.com/your-username/photography-website.git
cd photography-website- Install dependencies:
bun install- Set up the database:
bun db:push- Start the development server:
bun run devWhen 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).
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.
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Feel free to open issues and pull requests.
If you find this project helpful, please give it a ⭐️ on GitHub!
- 2025-02-13: tRPC instead of Hono.js
- 2025-01-12: Better Auth instead of Next Auth
- Home page with tRPC
- Discover page with tRPC
- Dashboard photos & photo id page with tRPC
- Blog page with tRPC
- Travel page with tRPC