queering the map

マップをクエリする

Queering the Map は、個人が自分のクィア体験やストーリーを地球地図上の特定の場所に匿名でピン留めするコミュニティベースのプラットフォームです。

設定

プロジェクトのセットアップには 2 つのオプションがあります。フロントエンドのみで作業するためのクイック セットアップと、Supabase を使用した完全なセットアップです。

オプション 1: フロントエンドのみの作業のためのクイックセットアップ

このアプローチはより迅速であり、Supabase をセットアップせずにフロントエンドで作業できるようになります。このオプションを選択した場合、ポップアップにはテキストが表示されないことに注意してください。

1. npm ciを使用して依存関係をインストールします。
2. シード スクリプトを実行してモック データを生成します: npm run seed-data 。
3. .env.example .envにコピーします: cp .env.example .env 。

オプション 2: Supabase を使用した完全なセットアップ

このアプローチは、バックエンドでも作業したい場合に必要です。セットアップには時間がかかりますが、運用環境で使用するものと一致する完全な開発環境が提供されます。

1. npm installを使用して依存関係をインストールします。
2. 公式 CLI を使用して Supabase (ローカル) プロジェクトをセットアップします。
3. 環境変数を設定します。
   1. .env.exampleファイルを.envにコピーします (手動またはcp .env.example .envを使用)。
   2. supabase startの出力からSUPABASE_URLとSUPABASE_ANON_KEY取得します。
4. supabase db resetを使用して DB 移行をローカルで実行します。
5. Supabase からデータをフェッチします: npm run fetch-data 。

現像

開発サーバーを起動するには:

npm run dev

テスト

データベースをテストするには、postgres でpgTap拡張機能が有効になっていることを確認してください (詳細)。その後、 supabase test dbを実行できます。

本番環境向けのデプロイと構築

Supabase をリモート バックエンドとして使用するには、ローカル開発をリモート Supabase プロジェクトにリンクしていることを確認してください。

1. Supabase アカウントがあることを確認し、それを supabase cli に接続します: supabase login
2. 特定のリモート プロジェクトをリンクしますsupabase link --project-ref <project-ref> (詳細)
3. リモート DB supabase db pushで移行を実行する (詳細)
4. 環境変数SUPABASE_URLおよびSUPABASE_ANON_KEYがローカル コンテナーではなく、正しい運用プロジェクトを指していることを確認してください。これらは、Supabase プロジェクトのダッシュボード内から取得できます。

アプリの実稼働バージョンを作成するには:

npm run build

キャプチャ保護を設定する

ポイント送信のキャプチャ保護には、Cloudflare Turnstile を使用します。そこでウィジェットを作成したら、環境変数に正しい値を設定します。

PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY
CLOUDFLARE_TURNSTILE_SECRET

詳細については、このガイドを参照してください: https://developers.cloudflare.com/turnstile/get-started/。