Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ecarry/photography-website-nextjs14
An open-source Photo BlogπΈπ built using Next.js 14, Drizzle, postgresql, Auth.js V5, Shadcn/ui and Hono.js.
https://github.com/ecarry/photography-website-nextjs14
authjs drizzle-orm honojs nextjs14 postgresql shadcn-ui
Last synced: 7 days ago
JSON representation
An open-source Photo BlogπΈπ built using Next.js 14, Drizzle, postgresql, Auth.js V5, Shadcn/ui and Hono.js.
- Host: GitHub
- URL: https://github.com/ecarry/photography-website-nextjs14
- Owner: ECarry
- Created: 2023-09-25T06:35:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-25T08:06:00.000Z (14 days ago)
- Last Synced: 2024-10-25T10:36:49.224Z (13 days ago)
- Topics: authjs, drizzle-orm, honojs, nextjs14, postgresql, shadcn-ui
- Language: TypeScript
- Homepage: https://p.ecarry.me
- Size: 46.6 MB
- Stars: 71
- Watchers: 3
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ALL NEW WEBSITE COMING SOON
## Deploy
I recommend using [Vercel](https://vercel.com/) to deploy your app.
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FECarry%2Fphotography-website-nextjs14&project-name=photography-website&repository-name=photography-website&demo-url=https%3A%2F%2Fp.ecarry.me&demo-image=https%3A%2F%2Fgithub.com%2FECarry%2Fphotography-website-nextjs14-full-stack%2Fblob%2Fmain%2Fscreen%2Fdashboard-photos.png)
## DB
I recommend using [Vercel Storage](https://vercel.com/) 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.
```.env.local
AUTH_DRIZZLE_URL="postgres://"
POSTGRES_URL="postgres://"
```### Generate the migration
```sh
bun run db:generate
```This will generate a migration SQL file: `drizzle/migrations/0000_migration.sql`
### Run the migrations
```sh
bun run db:migrate
```## Init User
### Add env variables
```.env.local
USER_EMAIL=
USERNAME=
USER_PASSWORD=
``````sh
bun run db:seed
```## Mapbox
### Mapbox Tokens
To get a Mapbox token, you will need to register on [their website](https://www.mapbox.com/). 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.
```.env.local
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](https://docs.mapbox.com/help/troubleshooting/how-to-use-mapbox-securely/#access-tokens) that only allows it to be used on a domain that you own.
## Uploadthing
### Add env variables
```.env.local
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
```If you don't already have a uploadthing secret key, [sign up](https://uploadthing.com/sign-in) and create one from the [dashboard](https://uploadthing.com/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](https://authjs.dev/getting-started/deployment) to learn more). You can generate one via running:
```sh
npx auth secret
```Alternatively, you can use the following `openssl` command, which should be available on all Linux / Mac OS X systems.
```sh
openssl rand -base64 33
```Then add it to your `.env.local` file:
```.env.local
AUTH_SECRET=secret
```## Star History
[![Star History Chart](https://api.star-history.com/svg?repos=ECarry/photography-website-nextjs14&type=Date)](https://star-history.com/#ECarry/photography-website-nextjs14&Date)