Your first project

In this tutorial you'll build a real, complete application: a task management app with user authentication, a database, real-time updates, and a responsive UI — then deploy it to production. It builds on the concepts from the Quickstart.

By the end you'll have touched every major part of the platform.

What you'll build

A modern task manager featuring:

• User authentication
• Real-time updates
• Database integration
• Responsive design
• A live production deployment

Step 1 — Project setup

From the Projects page in your dashboard, click New Project and select the React + TypeScript template for a modern setup with type safety. Name it task-manager.

The project is created from this configuration:

{
  "name": "task-manager",
  "framework": "react",
  "language": "typescript",
  "features": ["authentication", "database", "realtime"]
}

Step 2 — Understand the structure

Your project comes pre-configured:

task-manager/
  src/
    App.tsx          // Main component
    components/      // UI components
    pages/           // Application pages
    hooks/           // Custom React hooks
  package.json       // Dependencies
  tsconfig.json      // TypeScript config

Step 3 — Build core features

Start with a component to render a single task:

interface TaskProps {
  id: string;
  title: string;
  completed: boolean;
  onToggle: (id: string) => void;
}
 
export function TaskItem({ id, title, completed, onToggle }: TaskProps) {
  return (
    <div className="task-item">
      <input
        type="checkbox"
        checked={completed}
        onChange={() => onToggle(id)}
      />
      <span className={completed ? "completed" : ""}>{title}</span>
    </div>
  );
}

Then manage task state with a custom hook:

import { useState } from "react";
 
interface Task {
  id: string;
  title: string;
  completed: boolean;
}
 
export function useTasks() {
  const [tasks, setTasks] = useState<Task[]>([]);
 
  const addTask = (title: string) => {
    setTasks([...tasks, { id: Date.now().toString(), title, completed: false }]);
  };
 
  const toggleTask = (id: string) => {
    setTasks(tasks.map((task) =>
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };
 
  return { tasks, addTask, toggleTask };
}

Step 4 — Add a database

VibeCaaS automatically provisions a PostgreSQL database for your project. Install a client, configure environment variables, and create your schema.

npm install @supabase/supabase-js

VITE_SUPABASE_URL=your-project-url
VITE_SUPABASE_KEY=your-anon-key

CREATE TABLE tasks (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  title TEXT NOT NULL,
  completed BOOLEAN DEFAULT false,
  user_id UUID REFERENCES auth.users(id),
  created_at TIMESTAMP DEFAULT NOW()
);

See Environments & secrets for how environment variables are managed and encrypted.

Step 5 — Add authentication

Secure the app with built-in authentication. Email/password sign-up:

await supabase.auth.signUp({
  email: "user@example.com",
  password: "password123",
});

Or social login:

await supabase.auth.signInWithOAuth({ provider: "google" });

Step 6 — Deploy to production

Deploy with one click. VibeCaaS will:

• Build an optimized production bundle
• Deploy to a global CDN
• Configure your custom domain
• Provision an SSL certificate

Your app goes live at a URL like https://task-manager.vibecaas.app.

Enhance your project

Once the basics work, layer on more:

• Version control — built-in Git integration for tracking changes
• Collaboration — invite teammates to work in real time
• AI assistant — generate code and fix bugs faster
• Package management — install dependencies with one click

Congratulations

You've built and deployed your first VibeCaaS project. From here, explore AI agents for faster development, Deploying your app for advanced pipelines, and Working with projects to manage your growing workspace.