Your First Project

This tutorial walks you through creating a complete project from scratch, including AI-assisted development, preview deployments, and team collaboration.

Create a New Project

From Dashboard

1. Sign in to auth.coditect.ai
2. Click New Project in the top navigation
3. Choose a creation method:

Method	Best For
Start from Template	Quick start with pre-configured setup
Import from GitHub	Existing repositories
Blank Project	Custom configurations

Using CLI

# Create from template
coditect project create my-app --template react-typescript

# Import from GitHub
coditect project import https://github.com/username/repo

# Create blank project
coditect project create my-app --blank

Project Templates

React + TypeScript (Recommended for Beginners)

A modern React application with TypeScript, Vite, and Tailwind CSS.

Includes:

• React 18 with TypeScript
• Vite for fast builds
• Tailwind CSS for styling
• ESLint + Prettier configured
• Sample components

Python API

A FastAPI backend with automatic OpenAPI documentation.

Includes:

• FastAPI framework
• SQLAlchemy ORM
• Pydantic validation
• Docker configuration
• Sample endpoints

Full Stack

Complete application with React frontend and Python backend.

Includes:

• Monorepo structure
• Frontend + Backend packages
• Shared types
• Docker Compose setup
• Development proxy

Launch Your Workstation

After project creation:

1. Click Open Workstation on your project card
2. Wait for initialization (30-60 seconds on first launch)
3. The cloud IDE opens with your project ready

IDE Overview

┌─────────────────────────────────────────────────────────────┐
│  [File] [Edit] [View] [Go] [Run] [Help]     [Preview] [▶]  │
├─────────────┬───────────────────────────────────────────────┤
│             │                                               │
│  Explorer   │              Editor                           │
│             │                                               │
│  📁 src     │  import { useState } from 'react';           │
│   📄 App.tsx│                                               │
│   📄 main.ts│  function App() {                            │
│  📁 public  │    const [count, setCount] = useState(0);    │
│             │    return (                                   │
│             │      <div>                                    │
│             │        <h1>Count: {count}</h1>               │
│             │        <button onClick={() =>                │
│             │          setCount(c => c + 1)}>              │
│             │          Increment                            │
│             │        </button>                              │
│             │      </div>                                   │
│             │    );                                         │
│             │  }                                            │
├─────────────┴───────────────────────────────────────────────┤
│  Terminal    Problems    Output    AI Chat                  │
│  $ npm run dev                                              │
│  VITE v5.0.0 ready in 234ms                                │
│  ➜ Local: http://localhost:5173/                           │
└─────────────────────────────────────────────────────────────┘

AI-Assisted Development

Code Completion

As you type, the AI suggests completions:

// Type a function signature, AI completes the body
function calculateDiscount(price: number, percent: number): number {
  // AI suggests: return price * (1 - percent / 100);
}

AI Commands

Shortcut	Action
Tab	Accept suggestion
Esc	Dismiss
Cmd/Ctrl + K	Open AI chat
Cmd/Ctrl + L	Explain selected code
Cmd/Ctrl + Shift + R	Refactor selection

Chat with AI

Open the AI panel (Cmd/Ctrl + K) and ask questions:

You: How do I add authentication to this React app?

AI: I can help you add authentication. For a React app, I recommend using
    a library like Auth0 or Clerk. Here's a quick setup with Auth0:

    1. Install the SDK:
       npm install @auth0/auth0-react

    2. Wrap your app with the provider:
       [code example...]

Build and Preview

Start Development Server

# Terminal in workstation
npm run dev

Preview Deployment

Click the Preview button to deploy a shareable preview:

1. Click Preview in the toolbar
2. Select environment (Development/Staging)
3. Wait for deployment (~30 seconds)
4. Share the preview URL: https://preview-abc123.coditect.dev

Preview deployments:

• Auto-update on file save
• Expire after 24 hours (configurable)
• Include all environment variables
• Support authentication bypass for testing

Version Control

Initialize Git (if not from template)

git init
git add .
git commit -m "Initial commit"

Connect to GitHub

1. Click Source Control in sidebar
2. Click Publish to GitHub
3. Choose public or private repository
4. Confirm repository name

Commit Changes

1. Stage files in Source Control panel
2. Enter commit message
3. Click Commit (or Cmd/Ctrl + Enter)

# Or via terminal
git add .
git commit -m "Add authentication feature"
git push

Project Configuration

Environment Variables

1. Go to Project Settings → Environment
2. Add variables:

VITE_API_URL=https://api.example.com
DATABASE_URL=postgres://localhost:5432/mydb
SECRET_KEY=your-secret-key

Variables are:

• Encrypted at rest
• Available in build and runtime
• Scoped by environment (dev/staging/prod)

Build Settings

// coditect.json
{
  "name": "my-app",
  "framework": "react",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install"
}

Collaboration

Share Your Project

1. Go to Project Settings → Sharing
2. Add team members by email
3. Set permissions:
   • Editor: Full access
   • Viewer: Read-only

Real-Time Collaboration

When multiple users are editing:

• Cursors show collaborator names
• Changes sync in real-time
• Conflicts auto-resolve

Code Review

1. Create a branch for your feature
2. Make changes and commit
3. Click Create Pull Request
4. Request review from team members
5. Merge after approval

Next Steps

Congratulations on creating your first project! Continue learning:

• API Reference - Integrate CODITECT APIs
• User Guides - Deep dive into features
• Team Administration - Manage your team

---

Time to complete: ~15 minutes