Skip to main content

Build your first app

Let's build a simple task management app from scratch.

What we'll build​

A task app with:

  • Add and delete tasks
  • Mark tasks as complete
  • Filter by status
  • Clean, modern UI

Step 1: Start a new project​

  1. Go to www.appifex.ai
  2. Sign in to your account
  3. Make sure Web is selected as the platform

Step 2: Write your prompt​

Enter this prompt:

Build a task management app with:
- Add new tasks with a text input and button
- Display tasks in a list with checkboxes
- Click checkbox to mark complete (strikethrough text)
- Delete button on each task
- Filter tabs: All, Active, Completed
- Show task count for each filter
- Clean minimal design with white background
- Use blue as the accent color

Click Send to start generation.

Step 3: Watch it build​

You'll see real-time progress:

  1. Thinking - AI plans the component structure
  2. Creating files - React components, styles, types
  3. Deploying - Pushing to GitHub and Vercel

This takes about 1-2 minutes.

Step 4: Test your app​

When complete:

  1. Click the live URL - Opens your deployed app
  2. Add some tasks - Try the input field
  3. Mark complete - Click checkboxes
  4. Test filters - Switch between All/Active/Completed

Step 5: Make improvements​

Let's add a feature. Type:

Add a "Clear completed" button that removes all completed tasks

Watch as AI updates your code and redeploys.

Step 6: Customize in the editor​

Click on a file in the file tree to edit manually.

Change the accent color:

Find the CSS file and change:

--accent-color: #3b82f6;  /* Change to any color */

Click Save & Deploy to see your changes.

Step 7: Add persistence​

Right now tasks disappear on refresh. Let's fix that:

Save tasks to localStorage so they persist after page refresh

Or for a proper backend:

Add a Python backend with PostgreSQL to store tasks.
Include user authentication so each user has their own tasks.

Congratulations!​

You've built and deployed a complete task management app. You can:

  • Share the URL with others
  • Continue adding features
  • View the code on GitHub
  • Add a mobile version

Next steps​