Getting Started

Manual Setup

Step-by-step guide to manually set up Nuda Kit for local development.

This guide walks you through the complete manual setup process for Nuda Kit. Make sure you've completed all the Prerequisites before starting.

Backend Setup

Step 1: Environment Configuration

After downloading Nuda Kit, navigate to the backend folder and create your environment files.

1. Create the main .env file:

cp .env.example .env

2. Create the test environment file:

Create a .env.test file with minimal configuration for running tests:

NODE_ENV=test
DB_DATABASE=test
The test database is automatically created by the Docker setup. The .env.test file overrides only the necessary variables.

Step 2: Configure Environment Variables

Open backend/.env and configure the following sections based on your needs:

Social Authentication (Optional)

If you want to enable social login, add credentials for your preferred providers:

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:3333/auth/google/callback

# GitHub OAuth
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GITHUB_CALLBACK_URL=http://localhost:3333/auth/github/callback

# Facebook OAuth
FACEBOOK_CLIENT_ID=your_facebook_client_id
FACEBOOK_CLIENT_SECRET=your_facebook_client_secret
FACEBOOK_CALLBACK_URL=http://localhost:3333/auth/facebook/callback
See Social Login for detailed instructions on setting up each provider.

AI Integration (Optional)

If you plan to use AI features, add your API key for at least one provider:

# OpenAI
OPENAI_API_KEY=sk-your_openai_api_key

# Google AI (Gemini)
GOOGLE_API_KEY=your_google_api_key

# Anthropic (Claude)
ANTHROPIC_API_KEY=your_anthropic_api_key
See Vercel AI SDK for more details on AI configuration.

Stripe Configuration

Add your Stripe secret key to enable billing features:

STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key
Getting Your Stripe Secret Key
  1. Go to stripe.com and sign in (or create an account)
  2. In the Stripe Dashboard, ensure you're in Test mode (toggle in the top-right)
  3. Click Developers in the left sidebar
  4. Click API keys
  5. Under Standard keys, click Reveal test key next to your Secret key
  6. Copy the key (starts with sk_test_)
Never commit your secret key to version control! The .env file is already in .gitignore.
For complete Stripe setup including webhooks and production configuration, see Stripe Configuration.

Step 3: Configure Plans

Before running seeders, configure your subscription plans in backend/database/seeders/plan_seeder.ts:

await Plan.createMany([
  {
    name: 'Pro',
    key: 'pro',
    stripePriceId: 'price_xxx', // Add your Stripe Price ID
    mode: PlanMode.SUBSCRIPTION,
    isActive: true,
  },
  {
    name: 'Ultimate',
    key: 'ultimate',
    stripePriceId: 'price_xxx', // Add your Stripe Price ID
    mode: PlanMode.SUBSCRIPTION,
    isActive: true,
  },
])

Getting Stripe Price IDs

  1. Go to the Stripe Dashboard
  2. Navigate to Product catalogProducts
  3. Create a new product or select an existing one
  4. Under Pricing, create a price (recurring for subscriptions)
  5. Copy the Price ID (starts with price_)

You can add, remove, or rename plans as needed for your application.

See Plans & Products for detailed information on configuring plans.

Step 4: Start Docker Services

Start the development infrastructure using Docker Compose:

cd etc/docker
docker compose -f docker-compose-development.yml up -d

This starts the following services:

ServiceContainerPortPurpose
PostgreSQLnudakit_postgres5432Primary database
Redisnudakit_redis6379Queue processing
MailHognudakit_mailhog1025, 8025Email testing
Stripe CLInudakit_stripe-Webhook forwarding
Make sure Docker Desktop is running before executing this command.

Step 5: Get Stripe Webhook Secret

After Docker starts, retrieve the webhook signing secret from the Stripe CLI container:

docker compose -f docker-compose-development.yml logs stripe

Look for a line like:

> Ready! Your webhook signing secret is whsec_xxxxxxxxxxxxx

Copy the whsec_xxx value and add it to your backend/.env:

STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx
The webhook secret changes each time the Stripe container restarts. Update your .env if you restart Docker.

Step 6: Install Dependencies

Open a terminal in the backend folder and install npm packages:

cd backend
npm install

Step 7: Generate Application Key

Generate a secure application key for encryption:

node ace generate:key

This will output a key. Copy it and add it to your .env file as APP_KEY, or the command may update it automatically.


Step 8: Run Database Migrations

Create the database tables:

node ace migration:run

Step 9: Seed the Database

Populate the database with your configured plans:

node ace db:seed --files "./database/seeders/plan_seeder.ts"

Step 10: Verify Setup

Run the test suite to ensure everything is configured correctly:

node ace test

If all tests pass, your backend is properly configured!


Step 11: Start the Development Server

Start the AdonisJS development server:

node ace serve --watch

The backend API will be available at http://localhost:3333.


Step 12: Start Queue Workers

Open separate terminals for each queue worker:

Terminal 1 - User Deletions Queue:

node ace queue:listen --queue=user_deletions

Terminal 2 - Emails Queue:

node ace queue:listen --queue=emails
Testing Emails Locally: Open http://localhost:8025 to access MailHog, where all emails sent during development are captured.

Frontend Setup

With the backend running, you can now set up the frontend application.

Step 1: Environment Configuration

Navigate to the frontend folder and create your environment file:

cd frontend
cp .env.example .env

The .env file contains the API base URL that points to your backend:

API_BASE_URL=http://localhost:3333
The default value points to the local backend. Update this for production deployments.

Step 2: Install Dependencies

Install the npm packages:

npm install

Step 3: Configure Plans Display

Update the plans configuration in frontend/app/types/plan.ts to match the plans you seeded in the backend.

The file contains the display information for each plan (name, description, icon, and features):

import { SparkleIcon, FlameIcon, RocketIcon } from 'lucide-vue-next';

export const PlansConfig = [
    {
        name: 'Pro',
        key: 'pro', // Must match the key in your backend seeder
        description: 'For growing businesses',
        icon: FlameIcon,
        features: [
            'Up to 100,000 clients',
            'Advanced management tools',
            'Priority support',
            'API access',
        ]
    },
    {
        name: 'Ultimate',
        key: 'ultimate', // Must match the key in your backend seeder
        description: 'For large enterprises',
        icon: RocketIcon,
        features: [
            'Unlimited clients',
            'Enterprise features',
            'Dedicated support',
            'Custom integrations',
        ]
    }
];
Important: The key field must exactly match the key values in your backend/database/seeders/plan_seeder.ts. This is how the frontend matches display information with plan data from the API.

You can customize:

  • name — Display name shown in the UI
  • description — Short tagline for the plan
  • icon — Lucide icon component
  • features — List of features displayed on pricing cards

Step 4: Start the Development Server

Start the Nuxt development server:

npm run dev

Step 5: Verify the Setup

Open your browser and navigate to http://localhost:3000 to see the frontend application.

Congratulations! If you can see the landing page and navigate the UI, your Nuda Kit is fully configured and ready for development.

Quick Reference

Here's the complete setup sequence for easy copy-pasting:

Backend

# 1. Environment setup
cd backend
cp .env.example .env
# Edit .env with your configuration

# 2. Start Docker services
cd ../etc/docker
docker compose -f docker-compose-development.yml up -d

# 3. Get webhook secret from logs and add to .env
docker compose -f docker-compose-development.yml logs stripe

# 4. Backend setup
cd ../../backend
npm install
node ace generate:key
node ace migration:run
node ace db:seed --files "./database/seeders/plan_seeder.ts"

# 5. Verify and run
node ace test
node ace serve --watch

# 6. In separate terminals, run queue workers
node ace queue:listen --queue=user_deletions
node ace queue:listen --queue=emails

Frontend

# 1. Environment setup
cd frontend
cp .env.example .env

# 2. Install and run
npm install
npm run dev

# 3. Open http://localhost:3000

Troubleshooting

Backend Issues

IssueSolution
Docker containers won't startEnsure Docker Desktop is running
Database connection refusedCheck PostgreSQL container is running: docker ps
Stripe webhook secret not foundWait a few seconds for the container to initialize, then check logs again
Migrations failVerify database credentials in .env match Docker Compose settings
Tests fail with database errorsEnsure .env.test exists with DB_DATABASE=test
Emails not appearing in MailHogCheck the emails queue worker is running

Frontend Issues

IssueSolution
API requests failingEnsure backend is running on http://localhost:3333
Plans not displaying correctlyVerify key values in plan.ts match your backend seeder
Port 3000 already in useStop other processes or change port with npm run dev -- --port 3001

Next Steps

Stripe Configuration

Complete Stripe setup for production.

Social Login

Configure OAuth providers.

AI Integration

Set up AI features with Vercel AI SDK.

Frontend Development

Learn about the frontend architecture.