Skip to content

Initial app #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 33 additions & 128 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,139 +1,44 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# Coverage directory used by tools like istanbul
coverage
*.lcov
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions

# nyc test coverage
.nyc_output
# testing
/coverage

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# next.js
/.next/
/out/

# Bower dependency directory (https://bower.io/)
bower_components
# production
/build

# node-waf configuration
.lock-wscript
# misc
.DS_Store
*.pem

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# Dependency directories
node_modules/
jspm_packages/
# env files (can opt-in for committing if needed)
.env*

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# vercel
.vercel

# TypeScript cache
# typescript
*.tsbuildinfo
next-env.d.ts

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.*
!.env.example

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp
.cache

# Sveltekit cache directory
.svelte-kit/

# vitepress build output
**/.vitepress/dist

# vitepress cache directory
**/.vitepress/cache

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# Firebase cache directory
.firebase/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v3
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# Vite logs files
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
# data persistence
/data/
60 changes: 60 additions & 0 deletions CLAUDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# CodeSandbox SDK Usage

This project integrates with the CodeSandbox SDK to automatically create sandboxes when creating new projects.

## Documentation Reference

For comprehensive documentation on the CodeSandbox SDK, visit: https://codesandbox.io/docs/sdk

## How It Works

When a new project is created via the `/api/projects` endpoint, the system will:

1. Create the project record with the provided name
2. Attempt to create a new sandbox using the `sandbox-template@latest` template
3. Store the sandbox ID with the project for future reference

## Environment Setup

To enable sandbox creation, you need to set up your CodeSandbox API key:

1. Create a CodeSandbox account at https://codesandbox.io
2. Generate an API key at https://codesandbox.io/t/api
3. Set the environment variable: `CSB_API_KEY=your_api_key_here`

### GitHub Token Requirements

If using GitHub integration features, you'll need a GitHub token with the following permissions:
- Repository creation access
- Push access to repositories

Set the environment variable: `GITHUB_TOKEN=your_github_token_here`

## Template Configuration

The system uses `sandbox-template@latest` as the default template for creating new sandboxes. This template is defined in the `sandbox-template/` directory and contains a basic Vite + React setup.

## Error Handling

If sandbox creation fails (due to missing API key, network issues, or other errors), the project will still be created successfully, but without an associated sandbox ID. The error is logged for debugging purposes.

## Data Structure

Projects now include an optional `sandboxId` field:

```typescript
interface Project {
id: string;
name: string;
createdAt: string;
sandboxId?: string; // CodeSandbox ID when successfully created
}
```

## Implementation Details

- **File**: `app/api/projects/route.ts:16-18` - Sandbox creation logic
- **File**: `app/api/projects/store.ts:5` - Project interface with sandboxId
- **File**: `app/api/projects/store.ts:11` - Updated addProject function

The integration is designed to be non-blocking - if CodeSandbox is unavailable, project creation will still succeed.
Loading