/photography-website-nextjs14

An open-source Photo Blog📸🌟 built using Next.js 14, Drizzle, postgresql, Auth.js V5, Shadcn/ui and Hono.js.

Primary LanguageTypeScript

ALL NEW WEBSITE COMING SOON

page

page

page

page

page

Deploy

I recommend using Vercel to deploy your app.

Deploy with Vercel

DB

I recommend using 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

This will generate a migration SQL file: drizzle/migrations/0000_migration.sql

Run the migrations

bun run db:migrate

Init User

Add env variables

USER_EMAIL=
USERNAME=
USER_PASSWORD=
bun run db:seed

Mapbox

Mapbox Tokens

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=

Securing Mapbox Token

Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused.

  • Create separate tokens for development (often times on http://localhost), public code snippet (Gist, Codepen etc.) and production (deployed to https://mycompany.com). The public token should be rotated regularly. The production token should have strict scope and URL restrictions that only allows it to be used on a domain that you own.

Uploadthing

Add env variables

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

If you don't already have a uploadthing secret key, sign up and create one from the dashboard!

Auth.js

Setup Environment

The only environment variable that is mandatory is the AUTH_SECRET. This is a random value used by the library to encrypt tokens and email verification hashes. (See Deployment to learn more). You can generate one via running:

npx auth secret

Alternatively, you can use the following openssl command, which should be available on all Linux / Mac OS X systems.

openssl rand -base64 33

Then add it to your .env.local file:

AUTH_SECRET=secret

Star History

Star History Chart