teta.so
Sign in

Your First Project

This tutorial walks you through building a complete task manager application. You will use all three editing modes, connect a Supabase database, add user authentication, and deploy to production. By the end, you will have a working full-stack app.

What You Will Build

A task manager with the following features:

  • Add, delete, and mark tasks as complete
  • Clean, minimal interface with a dark mode toggle
  • Persistent storage using a Supabase Postgres database
  • User authentication with email and password
  • Production deployment on Vercel

Step 1: Create the Project

From the Teta dashboard, click New Project. Name it "task-manager" and select SvelteKit. Click Create and wait for the sandbox to provision (10-30 seconds). Once the preview shows the default SvelteKit page, you are ready.

Step 2: Build the Core UI with Chat

Click the chat input and type your first prompt:

Build a task manager with add, delete, and complete functionality. Use a clean minimal design with a centered container, a text input with an "Add" button at the top, and a list of tasks below. Each task should have a checkbox to mark it complete, the task text, and a delete button. Completed tasks should have a strikethrough style. Use a light gray background with white task cards.

Press Enter and watch the AI work. It will:

  1. Create or modify src/routes/+page.svelte with the task manager UI
  2. Add Svelte 5 reactive state for the task list
  3. Style the components with scoped CSS
  4. Wire up add, delete, and toggle-complete handlers

The preview panel updates as files are saved. In 30-60 seconds, you should see a functional task manager. Try adding a few tasks, completing them, and deleting them to verify everything works.

Step 3: Review What the AI Built

Open the Code panel and look at the generated files. The AI typically creates:

  • src/routes/+page.svelte — Main page with the task list component and local state
  • Possibly src/lib/components/TaskItem.svelte — Individual task component if the AI chose to extract it

Read through the code. Notice how the AI uses Svelte 5 runes ($state, $derived) for reactivity and standard SvelteKit patterns for the page structure. Understanding what was generated helps you give better follow-up prompts.

Step 4: Add Dark Mode via Chat

Send a follow-up message:

Add a dark mode toggle in the top-right corner of the page. Use a sun/moon icon that switches between light and dark themes. Dark mode should use a near-black background with light text and slightly lighter card backgrounds. Persist the preference to localStorage so it remembers across sessions.

The AI modifies the existing page to add:

  • A toggle button with icon switching
  • CSS custom properties for theming (light and dark palettes)
  • A localStorage read on mount and write on toggle
  • Smooth transitions between themes

Check the preview. Click the toggle to verify both themes look correct.

Step 5: Fine-Tune with the Visual Editor

Activate the Visual Editor using the toggle in the top bar. Now click different elements in the preview to adjust their styling:

  1. Click the page heading — In the properties panel, increase the font size to 2rem and adjust the font weight to 700.
  2. Click a task card — Add 4px of border radius for softer corners. Increase the padding to 16px on all sides.
  3. Click the "Add" button — Change the background color to your preferred accent color. Adjust the padding so it matches the input field height.
  4. Click the input field — Set the border to 1px solid with a light gray color. Add 8px of border radius.

Each change is applied immediately and persisted. The visual editor is the fastest way to dial in spacing, colors, and typography without writing prompts or CSS.

Step 6: Connect Supabase for Persistent Storage

Right now, tasks are stored in local component state and disappear on page refresh. To make them persistent, send this prompt:

Connect to Supabase. Create a tasks table with columns: id (uuid, primary key, default gen_random_uuid()), title (text, not null), completed (boolean, default false), created_at (timestamptz, default now()), and user_id (uuid, references auth.users). Enable row-level security so users can only see and modify their own tasks. Update the page to fetch tasks from Supabase on load, insert new tasks, update completion status, and delete tasks. Use a SvelteKit server load function for the initial fetch.

The AI will:

  1. Create the tasks table in your connected Supabase project
  2. Set up RLS policies for user-scoped access
  3. Add a +page.server.ts load function to fetch tasks
  4. Modify +page.svelte to use the loaded data and call Supabase for mutations
  5. Configure the Supabase client if not already set up

After the AI finishes, check the console panel for any errors. If the Supabase connection is not yet configured, the AI will prompt you to add your Supabase URL and anon key to the environment variables.

Step 7: Add Authentication

Tasks are now tied to a user_id, so you need authentication. Send this prompt:

Add user authentication with email and password. Create a login page at /login and a signup page at /signup. Both should have clean forms matching the app's design. Add a logout button in the header. Redirect unauthenticated users to /login. After login, redirect to the task manager. Use Supabase Auth with server-side session handling.

The AI creates:

  • src/routes/login/+page.svelte — Login form
  • src/routes/signup/+page.svelte — Registration form
  • src/hooks.server.ts — Server hook for session management
  • Auth helpers and middleware for route protection
  • A logout button in the existing header

Test the full flow: sign up with a test email, verify you land on the task manager, add some tasks, log out, log back in, and confirm your tasks are still there.

Step 8: Test Everything

Before deploying, run through a complete test in the preview:

  1. Sign up with a new email and password
  2. Add 3-4 tasks with different names
  3. Complete one or two tasks (verify strikethrough styling)
  4. Delete a task (verify it disappears)
  5. Toggle dark mode (verify it persists after page refresh)
  6. Log out and log back in (verify tasks are still there)
  7. Test on tablet and phone using the device switcher

If anything is broken, describe the issue in chat and the AI will fix it. For example:

The completed task strikethrough is not showing in dark mode. The text color blends with the strikethrough line. Fix the styling so completed tasks are clearly distinguishable in both themes.

Step 9: Deploy

Click the Deploy button in the top bar. Teta builds your project for production and deploys it to Vercel. Within a minute, you get a live URL.

Make sure to set your Supabase environment variables (PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_ANON_KEY) in the deployment settings if they are not already configured.

Your task manager is now live. Share the URL, connect a custom domain, or keep iterating.

Tips for Working with Teta

Be Specific in Prompts

Vague prompts produce vague results. Instead of "make it look better," try "increase the heading font size to 2rem, add 24px padding to the container, and use a blue accent color (#0A84FF) for buttons." The more detail you provide, the closer the first result matches your vision.

Iterate in Small Steps

Build your app one feature at a time. A single prompt that asks for "a complete e-commerce platform with user accounts, product catalog, shopping cart, checkout, and admin dashboard" will produce worse results than building each feature individually across 5-8 focused prompts.

Use the Right Tool for the Job

  • Chat for new features, logic, database setup, and structural changes
  • Visual editor for spacing, colors, typography, and quick design adjustments
  • Code editor for debugging, complex logic, package installation, and configurations that require precision

Check the Console

When something does not work, the console panel often tells you why. Build errors, runtime exceptions, and network failures all appear there. Include the error message in your next chat prompt for faster fixes.

Use Follow-Up Context

The AI remembers your entire conversation. You do not need to re-explain your app. Just say "change the button color to blue" instead of "in the task manager we built earlier, find the Add button component and change its background color to blue." Short, direct follow-ups work best.

FAQ

How complex can apps get with Teta?

There is no hard limit. Users have built multi-page applications with authentication, database CRUD, API integrations, file uploads, and complex business logic. The practical limit depends on the complexity of any single feature — the AI handles individual features well, and you can compose them into a full application incrementally. For very large projects, the code editor gives you full manual control when needed.

Can I add npm packages?

Yes. Open the integrated terminal in the code panel and run npm install <package-name>. The AI can also install packages automatically when you request features that need them. For example, asking "add a chart showing task completion over time" will prompt the AI to install a charting library like Chart.js and wire it up.

What if the AI makes a mistake?

It happens. You have several options: describe the issue in chat and the AI will fix it, undo the change using git in the code editor (the AI creates commits as it works), or edit the code directly in VS Code. For visual issues, the visual editor lets you override styles without touching code. The supervised approval mode also lets you review each file change before it is applied.

Can I undo changes?

Yes. The AI creates git commits as it works, so you have a full history of every change. Open the code panel, use the terminal to run git log to see the history, and git revert or git checkout to undo specific changes. You can also ask the AI in chat: "undo the last change" or "revert the dark mode feature."