CareerChive

Drop CareerChive into your existing Next.js app.

Install with npm

Install with npm

Drop CareerChive into your existing Next.js app.

Check Dependencies

Ensure you have your required dependencies, which Next.js and React should already satisfy:

From your terminal at your application project root run:

npm ls next react react-dom @supabase/supabase-js

Installing

Install CareerChive Package

From your existing Next.js app root, install career-chive from GitHub:

npm install career-chive@github:beck-chan/career-chive @supabase/supabase-js

Set Up Environment Variables

  1. Copy the .env.example file to .env.local:

    cp node_modules/career-chive/.env.example .env.local

  1. Fill in values from your Supabase project and Cloudflare R2 bucket:

    # Supabase project URL
NEXT_PUBLIC_SUPABASE_URL=https://<your-database-url>.supabase.co

# Supabase publishable key (browser-safe, RLS still applies)
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_<your-publishable-key>

# Server Data API secret. (Never NEXT_PUBLIC_)
SUPABASE_SECRET_KEY=sb_secret_<your-secret-key>

# Cloudflare Account ID
CLOUDFLARE_ACCOUNT_ID=<your-account-id>

# Cloudflare R2 Bucket  
R2_BUCKET=<your-bucket-name>  

# Cloudflare R2 Access Key ID
R2_ACCESS_KEY_ID=<your-access-key-id>

# Cloudflare R2 Secret Access Key
R2_SECRET_ACCESS_KEY=<your-secret-access-key>

# Cloudflare R2 Endpoint
R2_ENDPOINT=https://<CLOUDFLARE_ACCOUNT_ID>.r2.cloudflarestorage.com

Set Up Schema & Login

1. Run Installation Schema

  1. Copy the contents of schema.sql to your clipboard.

  2. Within Supabase, select SQL Editor from the left sidebar, then paste in the contents of schema.sql.

  3. Click Run to execute the schema.

  4. If you receive a Potential issue detected popup, click Run query to execute the schema.

Configuring the Application

Define CareerChive Path

Set NEXT_PUBLIC_CAREERCHIVE_PATH in your .env.local to determine the slug where CareerChive is served:

Default configuration is CareerChive as the site at the root of your domain. Omit The easiest way to do this is just to connect your CareerChive GitHub repository to a Vercel project, or set it to /:

NEXT_PUBLIC_CAREERCHIVE_PATH=/

Add CareerChive Pages

Next only serves pages from your app/ directory. Re-export the packaged entrypoints:

  1. Create the Archive page at app/page.tsx:

    import { Suspense } from "react";
import {
 CareerChiveArchivePage,
 careerchiveArchiveMetadata as metadata,
} from "career-chive";

export { metadata };

export default function Page({
 searchParams,
}: {
 searchParams: Promise<{ org?: string; iso?: string }>;
}) {
 return (
   <Suspense fallback={null}>
     <CareerChiveArchivePage searchParams={searchParams} />
   </Suspense>
 );
}

  2. Create the Overview page at app/overview/page.tsx:

    export {
 CareerChiveOverviewPage as default,
 careerchiveOverviewMetadata as metadata,
} from "career-chive";

  3. Create the Search page at app/search/page.tsx:

    export {
 CareerChiveSearchPage as default,
 careerchiveSearchMetadata as metadata,
} from "career-chive";

  4. Create the Organizations page at app/organizations/page.tsx:

    import { Suspense } from "react";
import {
 CareerChiveOrganizationsPage,
 careerchiveOrganizationsMetadata as metadata,
} from "career-chive";

export { metadata };

export default function Page({
 searchParams,
}: {
 searchParams: Promise<{ add?: string; org?: string; edit?: string }>;
}) {
 return (
   <Suspense fallback={null}>
     <CareerChiveOrganizationsPage searchParams={searchParams} />
   </Suspense>
 );
}

  5. Create the Login page at app/login/page.tsx:

    import { Suspense } from "react";
import {
 CareerChiveLoginPage,
 careerchiveLoginMetadata as metadata,
} from "career-chive";

export { metadata };

export default function Page() {
 return (
   <Suspense fallback={null}>
     <CareerChiveLoginPage />
   </Suspense>
 );
}

  6. Create the Attachments route at app/api/attachments/route.ts:

    export { GET, POST } from "career-chive/attachments";
export const runtime = "nodejs";

  7. Create the Not Found page at app/not-found.tsx:

    export {
 CareerChiveNotFound as default,
 careerchiveNotFoundMetadata as metadata,
} from "career-chive";

Configure Next.js

Wrap Config

withCareerChiveConfig adds transpilePackages so Next can compile the GitHub-installed package. It externalizes the Amazon Web Services (AWS) SDK used for uploads and inlines FLAG_PRIVATE and FLAG_CHIVEBOT for client components.

In your next.config.ts (or next.config.js), wrap your existing config with withCareerChiveConfig:

import type { NextConfig } from "next";
import { withCareerChiveConfig } from "career-chive/config";

const nextConfig: NextConfig = {
  // your existing options
};

export default withCareerChiveConfig(nextConfig);

Add Stylesheet and Frame

Import career-chive/styles.css in your root layout (app/layout.tsx) to apply the CareerChive theme:

import type { Metadata } from "next";
import { CareerChiveLayout, careerchiveMetadata } from "career-chive";
import "career-chive/styles.css";

export const metadata: Metadata = {
  title: "CareerChive",
  description:
    "Gain oversight over your professional accomplishments and experiences at work.",
  icons: careerchiveMetadata.icons,
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>
        <CareerChiveLayout>{children}</CareerChiveLayout>
      </body>
    </html>
  );
}

Run Development Server

To preview your application locally, run:

# Serves by default at `http://localhost:3000` 
npm run dev

Serve Your CareerChive

To build the application locally for private use:

# Linter check for errors
npm run lint
# Compile
npm run build
# Serve build 
npm run start

What's Next

Enable your ChiveBot and configure your settings and organizations:

Enable CareerChive Chatbot

Settings & Organizations