Local setup

Set up your local development environment for Wrkks

Prerequisites

Before setting up Wrkks locally, ensure you have the following installed:

• Node.js 20.x or higher
• pnpm (package manager)
• Git

Environment variables

Wrkks requires several environment variables to run properly. Create a .env.local file in the root directory:

.env.local

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY=your_supabase_anon_key

# OpenRouter AI
OPENROUTER_API_KEY=your_openrouter_api_key
OPENROUTER_MODEL_NAME=your_model_name

# Base URL
NEXT_PUBLIC_BASE_URL=http://localhost:3000

The .env* files are gitignored by default. Never commit your environment variables to version control.

Installation steps

1. Clone the repository

   Clone the Wrkks repository to your local machine:

   git clone https://github.com/your-org/wrkks.git
   cd wrkks
   
2. Install dependencies

   Install all required dependencies using pnpm:

   pnpm install
   

   This will install all dependencies listed in package.json, including:

   • Next.js 16.1.6
   • React 19.2.3
   • Clerk for authentication
   • Supabase for database
   • OpenAI SDK for AI features
3. Configure environment variables

   Copy the environment variables template and fill in your values:

   cp .env.example .env.local
   

   Edit .env.local with your actual API keys and credentials.

4. Run the development server

   Start the Next.js development server:

   pnpm dev
   

   The application will be available at http://localhost:3000.

Service setup

Clerk authentication

1. Create a free account at Clerk
2. Create a new application
3. Copy the publishable key and secret key to your .env.local
4. Configure sign-in methods (email, OAuth providers, etc.)

Supabase database

1. Create a free account at Supabase
2. Create a new project
3. Copy the project URL and anon key to your .env.local
4. Set up the database schema:

create table users (
  id uuid primary key default uuid_generate_v4(),
  clerk_user_id text unique not null,
  username text unique not null,
  email text not null,
  resume jsonb,
  style text default 'simple',
  islive boolean default false,
  created_at timestamp with time zone default now()
);

OpenRouter AI

1. Sign up at OpenRouter
2. Generate an API key
3. Add the key and your preferred model name to .env.local

OpenRouter requires credits to process resume parsing. Make sure your account has sufficient balance.

Development commands

Command	Description
pnpm dev	Start development server on port 3000
pnpm build	Build production bundle
pnpm start	Start production server
pnpm lint	Run ESLint to check code quality

Verify installation

To verify your setup is working correctly:

1. Visit http://localhost:3000 - you should see the Wrkks homepage
2. Click “Build My Website” - authentication should work
3. Upload a PDF resume - parsing should work if OpenRouter is configured
4. Check the console for any errors

Troubleshooting

Port already in use

If port 3000 is already in use, you can specify a different port:

pnpm dev -p 3001

Module not found errors

Clear the Next.js cache and reinstall dependencies:

rm -rf .next node_modules
pnpm install
pnpm dev

PDF parsing fails

The application uses pdf-parse-new as a server-side external package. Ensure this is configured in next.config.ts:

next.config.ts

serverExternalPackages: ["pdf-parse-new"]

Next steps

Once your local environment is set up:

• Review the Architecture to understand the codebase structure
• Explore Components to learn about key React components
• Check API Routes to understand the backend endpoints