Essential Features Cookbook

🎯 Overview

This cookbook provides practical "recipes" for using Kolega Studio's essential features. Each recipe includes what it does, when to use it, exact steps, and best practices for thread management.

🚀 Publishing Your Application

Recipe: Deploy to Live URL

What it does: Takes your development app live on the internet

When to use: After thorough testing, when ready to share

Result: Live URL at https://[your-unique-project-id].kolegaapps.com

Quick Publish (Current Version)

1. Test thoroughly in Preview tab

2. Click green "Publish" button (top bar)

3. Wait for deployment (10-15 minutes)

4. Receive notification when complete

5. Access your live URL

Advanced Publishing (Specific Version)

1. Go to Project Settings tab (⚙️)

2. Navigate to "Revisions" section

3. View all GitLab commits

4. Select specific version to publish

5. Click "Publish" for that version

6. Wait for notification

Behind the scenes:

• Code optimized for production

• Frontend and backend deployed

• SSL certificate configured automatically

• Professional subdomain assigned

• GitLab commit created

🔐 Environment Variables

Recipe: Add Secret API Keys

What it does: Securely stores sensitive configuration

When to use: API keys, secrets, tokens

Security: Values encrypted (shown as •••••••)

Steps

1. Click ⚙️ Project Settings tab

2. Find "Environment Variables" section

3. Click "Add Variable"

4. Enter variable name (e.g., STRIPE_API_KEY)

5. Enter value (e.g., sk_live_abc123...)

6. Click "Save"

7. CRITICAL: Reset sandbox immediately

Pre-configured Variables

• DATABASE_NAME - MongoDB database identifier

• MONGODB_URI - Connection string (encrypted)

Common Variables to Add

EMAIL_API_KEY=your_sendgrid_key STRIPE_SECRET_KEY=sk_live_your_key JWT_SECRET=your_secret_token OPENAI_API_KEY=sk-your_key 

⚠️ Important: Always restart sandbox after adding/updating environment variables

📁 File Uploads & Assets

Recipe: Add Images and Files

What it does: Uploads project-wide assets

When to use: Logos, images, PDFs, data files

Limits: 50MB per file, any file type

Scope: Available across ALL threads

Steps

1. Click 📁 Project Files tab

2. Drag and drop files OR click "Browse"

3. Wait for upload completion

4. See file count update

Using Uploaded Files

1. Refer to project files when you want them to be used in a Chat/Thread conversation

Thread-Specific vs Project Files

• Thread uploads (chat window): Only for that thread

• Project Files (tab): Available everywhere

• Use Project Files for all permanent assets

🧵 Thread Management

Recipe: Optimize outcomes with Threads

What it does: Manages context windows efficiently

When to use: Always - for every project

Result: Better and more predictable outcomes

Creating Thread Strategy

1. Planning Thread: Implementation plan

2. Feature Threads: One per major feature

3. Testing Thread: Quality assurance

4. Polish Thread: UI refinements

5. Bug Fix Threads: Separate for complex issues

When to Start New Thread

• Context window warning appears

• Starting new feature/phase

• After completing major milestone

• Different type of work (coding vs testing)

• Thread reaches 80% capacity

Bridging Thread Context

Starting new thread: 

"Previous work complete: [summary from last thread] Continuing with Phase X of implementation_plan.md [Brief context of what's needed]" 

📱 Responsive Design Testing

Recipe: Test Mobile and Desktop Views

What it does: Preview on different screen sizes

When to use: Throughout development

Available modes: Mobile (📱) and Desktop (🖥)

Steps

1. In Preview tab, locate top toolbar

2. Click 📱 for mobile view:

   • Narrow viewport

   • Touch simulation

   • Mobile layout

3. Click 🖥 for desktop view:

   • Full width

   • Desktop interactions

   • Standard layout

Testing Checklist

• [ ] Navigation works on mobile

• [ ] Text readable on small screens

• [ ] Buttons tap-friendly (44px minimum)

• [ ] Forms usable on all sizes

• [ ] Images scale appropriately

• [ ] No horizontal scroll on mobile

🔄 Sandbox Management

Recipe: Restart Development Environment

What it does: Refreshes workspace, clears cache

When to use: After env variables, when stuck

Visual indicator: Green/Yellow/Red orb

Steps

1. Check status orb (top bar, near project name)

2. Click orb to see status

3. Click "🔄 Reset Sandbox" (red text)

4. Watch status: Green → Yellow → Loading → Green

5. Wait for "Sandbox is running" (10-30 seconds)

When to Restart

• Required: After environment variable changes

• Preview stops updating

• Backend shows disconnected

• Clear cached data

• Major configuration changes

• Agent recommendations

What's Preserved

• All code and files

• Database data

• Environment variables

• Project settings

• GitLab commits

🌙 Working with Dark/Light Mode

Recipe: Theme Switching

What it does: Changes entire interface theme

When to use: Based on preference/lighting

Persistence: Saved automatically

Steps

1. Locate moon/sun icon (top right)

2. Click 🌙 for dark mode

3. Click ☀️ for light mode

4. Changes apply instantly

What Changes

• Background colors

• Text contrast

• Panel themes

• Code syntax highlighting

• All UI elements

🔔 Managing Notifications

Recipe: Stay Updated on Activity

What it does: Shows project/system updates

When to use: Check regularly

Visual cue: Red badge with count

Steps

1. Click bell icon (top bar)

2. Review notifications:

   • Project creation

   • Deployment status

   • Domain purchases

   • System updates

3. Toggle "All"/"Unread" tabs

4. Click "Mark all read"

🐛 Reporting Issues

Recipe: Submit Bug Reports

What it does: Direct feedback to Kolega team

When to use: Bugs or feature requests

Includes: Optional file attachments

Steps

1. Click 🐛 bug icon

2. Select issue type:

   • Bug/Error

   • Feature Request

   • Other feedback

3. Provide details:

   • What you expected

   • What happened

   • Steps to reproduce

4. Attach files (optional):

   • Max 5 files

   • 10MB each

   • Screenshots helpful

5. Submit for tracking ID

Good Bug Report Example

Title: Preview not updating after code changes Steps: 

1. Made change to App.tsx 
2. Saved file 
3. Preview didn't refresh Expected: Automatic update Actual: Manual refresh needed [Attached: screenshot.png] 

💾 Version Control & Backup

Recipe: GitLab Integration

What it does: Automatic version control

When to use: Happens automatically

Access: Project Settings → Revisions

Automatic Features

• Commits on every significant change

• Complete history maintained

• Can restore any version

• Branch management (Pro tier)

Download Project ZIP

1. Open ⚙️ Project Settings

2. Navigate to "Revisions"

3. Click "📥 Download ZIP"

4. Save to computer

5. Contains all code and config

GitHub Integration (Pro Tier)

1. Account → Integrations

2. Add GitHub credentials

3. Connect existing repositories

4. Push/pull from Kolega Studio

🖥 Using Dev Tools

Recipe: Preview Terminal Commands

What it does: Show’s execution of agent Command-line interactions

When to use: Debugging, Testing

Recipe: Monitor System Logs

What it does: Shows system activity

When to use: Debugging, monitoring

Location: Dev Tools → System Logs

Understanding Logs

[INFO] - Normal operations 
[SUCCESS] - Completed actions 
[ERROR] - Problems needing attention 
[WARNING] - Potential issues 

📱 Mobile App Development (Pro Tier)

Recipe: Setup Expo Go

What it does: Enables React Native development

Prerequisites: Pro tier subscription

❗Publishing Apps in the App Store / Google Play

In order to publish your app to the App Store/Google Play Store you will need to register for a developer account with Apple and/or Google/

One-Time Setup

1. Create free Expo account

2. Generate Access Token

3. Account → Integrations → Add Expo token

4. Download Expo Go on phone

5. Select "Mobile App" template for new projects

Development Workflow

1. Build in Kolega Studio

2. QR code appears in Preview

3. Scan with phone camera

4. App opens in Expo Go

5. Test on real device

6. Shake phone for Expo menu

⚡ Quick Feature Reference

🚨 Common Issues & Solutions

💡 Pro Tips Collection

Credit Efficiency

1. Always use threads to keep context small

2. Upload assets once to Project Files

3. Set environment variables before coding

4. Plan before coding

5. Test before requesting changes

Development Speed

1. Plan before you build

2. Use agent summaries for context

3. Reference .md plans by name consistently

4. Monitor logs while building

5. Use browser agent for testing

Quality Assurance

1. Test after each phase

2. Check database before assuming issues

3. Verify environment variables loaded

4. Use investigation agent for code review

5. Mark completed tasks in plan

Remember: Mastering these features, especially thread management and planning, is key to successful and efficient development in Kolega Studio.