How to Use FocusCloud: A Complete Step-by-Step Guide

The cloud IDE that lets you build, deploy and ship full-stack apps — all from your browser

---

Introduction

FocusCloud is a cloud development platform that gives you a complete coding environment in your browser. No installations. No configuration. No DevOps headaches. Whether you are a seasoned developer wanting zero-setup productivity, or a founder who wants to ship an app without hiring a team, this guide walks you through every feature from start to finish.

---

Getting Started

Step 1: Create Your Account

1. Go to focuscloud.dev
2. Click Get Started Free or Register
3. Fill in your name, email and password — or sign up with Google or GitHub in one click
4. You are automatically placed on the Starter plan (free, no credit card required)
5. You land on your Dashboard

Tip: The first user to register on any FocusCloud template app automatically becomes the admin. Keep your credentials safe.

---

Step 2: Understand Your Dashboard

Your Dashboard is your home base. It shows:

• Your Projects — all your code projects and deployed apps
• Template Cards — 15 pre-built apps you can deploy instantly
• Token Balance — how many AI tokens you have left this month
• Quick Actions — create a new project or deploy a template

The left sidebar gives you quick access to settings, billing, and documentation.

---

Feature 1: The Cloud IDE

Creating Your First Project

1. Click New Project on the Dashboard
2. Give your project a name (e.g. “my-portfolio”)
3. Choose a runtime: Node.js, Python, Go, Rust, PHP, Java, and more
4. Click Create Project
5. Your project opens in the IDE instantly

The IDE Layout

The FocusCloud IDE has four main sections:

Left Panel — File Explorer

• Browse, create, rename and delete files and folders
• Click any file to open it in the editor
• Right-click for a context menu

Centre — Code Editor

• Powered by Monaco (the same engine as VS Code)
• Full syntax highlighting for 50+ languages
• IntelliSense autocomplete
• Find and replace, multi-cursor editing, keyboard shortcuts

Top Bar

• Files tab — file explorer
• Git tab — version control
• Review tab — AI code review
• AI Assistant tab — chat with AI about your code
• Database tab — view and manage your database
• Time Travel tab — restore previous versions
• Preview tab — live preview of your running app

Bottom Panel

• Terminal output and logs
• Run button to execute your app

Writing and Running Code

1. Click Create first file or the + button in the explorer
2. Name your file (e.g. index.js)
3. Write your code in the editor
4. Click Run (or press the play button)
5. Output appears at the bottom of the screen

Viewing App Output

FocusCloud provides full real-time output for your running apps. Every console.log, error message and server log appears in the output panel at the bottom of the IDE. You can see exactly what your application is doing without needing a terminal.

---

Feature 2: AI Assistant

The AI Assistant is your built-in coding partner. It reads your actual project files so it understands exactly what you are building.

Chat Mode

1. Click AI Assistant in the top tab bar
2. Make sure Chat is selected (not Vibe)
3. Type any question about your code:
   • “Why is this function returning undefined?”
   • “How do I add authentication to my Express app?”
   • “Explain what this code does”
   • “Write a function that filters this array by date”
4. The AI responds with explanations and code snippets
5. Click Apply to [filename] on any code block to insert it directly into your file

AI Code Review

1. Click the Review tab
2. Click Start Review
3. The AI scans every file in your project
4. It flags bugs, security issues, performance problems and style inconsistencies
5. Each finding shows the exact file and line number
6. Click any finding to jump to that location in your code

Pro tip: Run a code review before every deployment to catch problems before your users do.

---

Feature 3: Vibe Coding — Generate Full Apps with AI

Vibe Coding is FocusCloud’s most powerful feature. Describe your app in plain English and the AI generates a complete full-stack application.

How to Vibe Code

1. Open any project and click AI Assistant
2. Switch to Vibe mode (top right of the AI panel)
3. Describe your app in the text box. Be specific:
   • “A task management app where users can create projects, add tasks with deadlines, assign them to team members, and track status”
   • “A restaurant booking system with table availability, customer reservations, staff management and email confirmations”
4. Click Generate App
5. The AI may ask 2-3 clarifying questions about your requirements — answer them
6. Click Build it now
7. Watch as the AI generates your complete app — frontend, backend, database schema, authentication, all in real time
8. When complete, you see a list of all files written

What Gets Generated

Every Vibe-coded app includes:

• React frontend with Tailwind CSS styling
• Node.js + Express backend with REST API
• PostgreSQL database with Drizzle ORM
• Authentication — register, login, password reset, JWT tokens
• CRUD operations for all your data entities
• Error handling and loading states
• Mobile responsive design

Refining Your App

After generation, you can keep chatting with the AI to make changes:

• “Add a dark mode toggle”
• “Make the dashboard show a chart of monthly sales”
• “Add email notifications when a task is completed”
• “Change the colour scheme to blue and white”

Each change updates the relevant files without regenerating everything from scratch.

---

Feature 4: Pre-Built Templates

If you need a specific type of app, FocusCloud’s 15 production-ready templates get you there in under 60 seconds.

Available Templates

Free Templates (all plans)

• Task Manager
• Budget Tracker
• Kanban Board
• Link in Bio
• Quiz Builder
• Class Manager
• Content Calendar
• Booking System

Pro Templates (Builder plan and above)

• School Management System
• Inventory Manager
• Invoice Generator
• CRM (Customer Relationship Manager)
• Proposal Builder
• Subscription Manager
• Slides Presentation Tool

Deploying a Template

1. Go to your Dashboard
2. Scroll to the Templates section
3. Click on any template card
4. Give your app a name (this becomes your subdomain)
5. Click Deploy Template
6. In under 60 seconds your app is live with:
   • Full authentication (register/login/password reset)
   • Database already set up
   • API endpoints ready
   • Live HTTPS URL

Using Your Template App

After deployment, visit your app URL and:

1. Register — the first account is automatically the admin
2. Log in with your credentials
3. Start using all the features immediately
4. Share the URL with your team, clients or users

---

Feature 5: Database Sandbox

Every FocusCloud project gets its own isolated PostgreSQL database.

Viewing Your Database

1. Click the Database tab in the IDE
2. See all your tables listed on the left
3. Click any table to browse its data
4. Use the query editor to run custom SQL

Database Auto-Setup

When you use Vibe Coding or deploy a template, the database schema is automatically created and pushed. You never need to write migration scripts manually.

Database Security

Each project’s database runs in its own isolated container with its own credentials. Projects cannot access each other’s data.

---

Feature 6: Git Integration

FocusCloud has built-in Git so you can version control your code without leaving the browser.

Using Git

1. Click the Git tab in the IDE
2. See all changed files listed
3. Enter a commit message
4. Click Commit
5. Push to a connected GitHub/GitLab repository

Connecting to GitHub

1. Go to Settings in the sidebar
2. Click Integrations
3. Connect your GitHub account
4. Select a repository to link to your project

---

Feature 7: One-Click Deployment

Every project can be deployed to a public HTTPS URL with one click.

Deploying Your App

1. Open your project in the IDE
2. Click the Deploy button in the top right
3. Wait 10-30 seconds while FocusCloud:
   • Builds your application
   • Sets up the server
   • Configures HTTPS
   • Creates your subdomain
4. Click the Live button to open your deployed app

Your app URL looks like: https://your-project-name-abc123.focuscloud.dev

Managing Deployments

• Click Undeploy to take your app offline (stops the server, saves resources)
• Click Deploy again to bring it back
• Your data and files are always preserved

Custom Domains (Pro and Enterprise)

Contact support to connect your own domain (e.g. app.yourbusiness.com) to your FocusCloud deployment.

---

Feature 8: Time Travel

Made a mistake? Time Travel lets you restore any previous version of your project.

Using Time Travel

1. Click the Time Travel tab
2. Browse through your project’s history
3. See exactly what changed in each version
4. Click Restore to roll back to any point
5. Your files are restored instantly — no data loss

---

Feature 9: AI Code Review

Get a professional code review in minutes, not days.

Running a Code Review

1. Click the Review tab
2. Click Start AI Review
3. The AI analyses every file for:
   • Security vulnerabilities
   • Performance bottlenecks
   • Code quality issues
   • Potential bugs
   • Best practice violations
4. Review the findings panel
5. Click any finding to jump to the exact line
6. Click Fix with AI to automatically apply the suggested fix

---

Feature 10: Collaboration

Sharing Your Project

1. Go to Settings in your project
2. Click Collaboration
3. Invite team members by email
4. Set their role: Viewer, Editor, or Admin
5. They receive an email invitation and can join your project

Real-Time Editing

Multiple users can work on the same project simultaneously. Changes appear in real time for all collaborators.

---

Managing Your Account

Token Usage

AI tokens power the AI Assistant, Vibe Coding, and Code Review. You can see your current balance in the top bar of the IDE (the water glass icon — it empties as you use tokens).

• Starter — 100K tokens/month
• Builder — 1M tokens/month
• Pro — 10M tokens/month
• Enterprise — 50M tokens/month

Tokens reset on your billing anniversary each month. Pro and Enterprise plans carry unused tokens forward (rollover).

Upgrading Your Plan

1. Click Settings in the sidebar
2. Click Billing
3. Choose your new plan
4. Enter payment details (Stripe — secure, no card stored on FocusCloud servers)
5. Upgrade takes effect immediately

Top-Up Packs

Need more tokens mid-month? Buy a top-up pack from the Billing page. Packs never expire and stack with your monthly allowance.

---

Tips for Getting the Most from FocusCloud

For Vibe Coding:

• Be specific in your descriptions. More detail = better output
• Include information about who will use the app and what they need to do
• After generation, use Chat mode for smaller changes rather than regenerating
• Review generated code with the AI Review feature before deploying

For Templates:

• Name your app something memorable — it becomes your subdomain
• The first registered user is admin. Set up your account before sharing with others
• Use the password reset flow to test your email setup

For Developers:

• The AI Assistant reads your files — ask it questions about your specific code, not generic questions
• Use Code Review before every deployment
• Connect GitHub to keep your code backed up off-platform

For Teams:

• Set up roles carefully — Admins can delete projects
• Use Time Travel as your safety net when making big changes
• The Enterprise plan includes priority support with faster response times

---

Getting Help

• Documentation: focuscloud.dev/docs
• Email Support: support@focuscloud.dev
• In-app AI: Ask the AI Assistant any question about using FocusCloud

---

FocusCloud Systems Inc. | focuscloud.dev | support@focuscloud.dev

You Think it, We Create it.