📷 Momento - An Open-source Photo Blog

An open-source photo blog to showcase my shots within my life journey. Buildt with Next.js 14, Auth.js v5, Hono.js, React Query, Tailwind CSS.

Demo App

https://shot-by-alv.duckdns.org/

Features

• Built-in auth
• Admin panel (/dashboard)
• Photo upload with EXIF extraction
• Infinite scroll
• A map to show where the photos are shot (also where have I been to as a traveler)
• A showcase only for film photos (35mm)
• CMD-K menu with photo search

Roadmap

• Authentication.

• Set up Drizzle & PostgreSQL database.

• Upload image using Uploadthing

• Read and format EXIF data

• Build ui

• Add Mapbox API and its layer

• Implement Grid photo gallery

• Implement db & ui for 35mm film photo

• Implement search/filter for CMD-K menu & /dashboard

• Get film simulation from Fujifilm's photos

• Cache photo data for better loading

• Implement page for polaroid photos

• Implement dark theme

• Upload photos to Cloudflare R2/ AWS S3

• Implements tags based on the photos for filtering

Steps to reproduce:

Clone the repo

git clone https://github.com/alvinle2901/photo-blog.git

Pre-requirements

DB

I used Vercel Storage for your database. It's free and easy to setup. Once you have your database setup, you will need to add the connection string to your .env.local file.

AUTH_DRIZZLE_URL="postgres://"
POSTGRES_URL="postgres://"

Generate the migration

bun run db:generate

Run the migrations

bun run db:migrate

Init User

Add env variables

USER_EMAIL=
USERNAME=
USER_PASSWORD=

bun run db:seed

Mapbox

To get a Mapbox token, you will need to register on their website. The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded.

NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

Install dependencies

npm install

ESLint and Prettier fix

npm run format

Start the app

npm run dev

Credits

• This project is inspired from Sam Becker's EXIF Photo Blog