Prerequisites
Required to hook everything up.
Installing the application ships the CareerChive user interface and default Supabase wiring.
You'll need to first:
- Install Node.js.
- Configure a Supabase project.
- Hook up Google OAuth 2.0 to enable admin. // Change to Cloudflare later
Install Node.js with npm
Download the 22 LTS Windows installer from nodejs.org. The installer includes npm.
Or, install fnm (fnm-windows.zip), then call:
fnm install 22
fnm use 22
Confirm that you have the right versions:
# Should return v22.23.2
node -v
# Should return 10.9.8
npm -v
Download the 22 LTS macOS installer from nodejs.org. The installer includes npm.
Or install nvm, restart the terminal, then call:
nvm install 22
nvm use 22
Confirm that you have the right versions:
# Should return v22.23.2
node -v
# Should return 10.9.8
npm -v
Create Supabase Project
Create an account and organization with Supabase, then on the Create a new project screen:
-
Enter in your Organization, Project name, and Database password.
-
Select a Region.
-
Under Security, check off:
- Enable Data API
- Enable automatic RLS
-
Click Create new project.
When your project is ready:
-
In the left sidebar, click Project Settings, then select API Keys.
-
Under Publishable and secret API keys, copy the Publishable key to your clipboard.
Hang on to this — we'll need to enter this into your
.env.localfile under yourNEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY:NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_<your-publishable-key> -
Under Publishable and secret API keys, copy the Secret key to your clipboard.
Hang on to this — we'll need to enter this into your
.env.localfile under yourSUPABASE_SECRET_KEY:SUPABASE_SECRET_KEY=sb_secret_<your-secret-key>
-
In the Settings left sidebar, select Data API.
-
Under Overview, copy the API URL to your clipboard. You'll need to clip the
rest/v1/portion from the end of the URL.Hang on to this — we'll need to enter this into your
.env.localfile and to hook up Supabase:NEXT_PUBLIC_SUPABASE_URL=https://<your-database-url>.supabase.co
Enable Cron Jobs
-
In the left sidebar, click Database, then select Extensions.
-
In Search for an extension, enter
pg_cron. -
Under the Enabled column, toggle the
pg_cronextension to the ON position. -
On the confirmation popup, select Enable.
Create Cloudflare R2 Project
If you do not already have a Cloudflare account with R2 activated, create an account with Cloudflare, then in the dashboard:
-
In the left sidebar, click Storage & databases, then select R2 Object Storage.
-
Click Add R2 subscription to my account.
-
Enter your billing information and click Activate R2.
-
Click Continue to R2.
-
In the left sidebar, click Storage & databases, then select R2 Object Storage.
-
Under Account Details, copy the Account ID to your clipboard.
Hang on to this — we'll need to enter this into your
.env.localfile under yourCLOUDFLARE_ACCOUNT_ID:CLOUDFLARE_ACCOUNT_ID=<your-account-id> -
Construct
R2_ENDPOINTfrom that same Account ID:R2_ENDPOINT=https://<your-account-id>.r2.cloudflarestorage.com
Under R2 Object Storage:
-
Click Create bucket.
-
Enter a Bucket name.
Hang on to this — we'll need to enter this into your
.env.localfile under yourR2_BUCKET:R2_BUCKET=<your-bucket-name> -
Select a Location.
-
Under Default Storage Class, select Standard.
-
Click Create bucket.
-
In the left sidebar, click Storage & databases, then select R2 Object Storage.
-
Under Account Details, click Manage API Tokens.
-
Select Create User API token:
- Enter the Token name.
- Under Permissions, select Object Read & Write.
- Under Specify bucket(s), select Apply to specific buckets only, then choose the bucket you just created.
-
Click Create API Token.
-
Copy the Access Key ID to your clipboard.
Hang on to this — we'll need to enter this into your
.env.localfile under yourR2_ACCESS_KEY_ID:R2_ACCESS_KEY_ID=<your-access-key-id> -
Copy the Secret Access Key to your clipboard.
Hang on to this — we'll need to enter this into your
.env.localfile under yourR2_SECRET_ACCESS_KEY:R2_SECRET_ACCESS_KEY=<your-secret-access-key> -
Click Finish.
What's Next
Fork the starter repository or drop the CareerChive kit into your existing Next.js app: