Designing Before Coding: Building an AI Task System [Floxis #1]

1. Overview

In this article, I’ll document the development process of a personal project called Floxis (codename).

To improve my development skills, I’m building this project by thinking through the design from the start.

Floxis is a system that uses AI to structure natural language input and manage tasks (PersonalOS). In the future, I plan to extend it to support workflows and other features.

2. Repository

GitHub Repository

3. What I did in Floxis #1

• Defined the development scope
• Selected the tech stack
• Set up the initial project (Next.js / Supabase)

4. Defining the Development Scope

Floxis is intended to evolve into a system that manages tasks, habits, assets, and schedules in an integrated way.

However, for v0.1, I’m prioritizing building a minimal and stable foundation rather than expanding features.

4.1. What’s included in v0.1

• Task creation (manual + AI input)
• Task list display
• Completion management

4.2. What’s not included

• Habit tracking
• Asset management
• Schedule integration

4.3. Notes

AI will be integrated as part of the system, but its role and detailed design will be covered in a separate article.

5. Initial Project Setup

In Floxis #1, I set up the frontend, backend, and database to establish a minimal working system.

5.1. Creating the Next.js project

I created a Next.js project with the following settings:

• TypeScript: enabled
• ESLint: enabled
• App Router: enabled (current standard)
• React Compiler: disabled (prioritizing stability)

At this stage, I prioritized stability and ease of understanding over performance optimization.

5.2. Setting up the database with Supabase

I created a project in Supabase and defined the tasks table.

create table tasks (
  id uuid primary key default gen_random_uuid(),
  title text not null,
  title_original text,
  status text not null default 'pending'
    check (status in ('pending', 'completed')),
  due_date date,
  category text,
  created_at timestamp with time zone default now(),
  completed_at timestamp with time zone
);

5.3. Connecting Next.js and Supabase

• Installed @supabase/supabase-js
• Set up environment variables in .env.local
• Created a Supabase client

After that, I implemented data fetching on the top page and confirmed that data could be retrieved from the database.

5.4. Implementing task creation

Using Server Actions, I enabled adding tasks from the UI.

• Form submission → insert into DB
• Re-fetch the list using revalidatePath

This established the minimal loop of “create → display”.

5.5. Introducing migration management

I introduced migration management using the Supabase CLI to manage database changes as code.

• supabase init
• supabase link
• Created a baseline with db pull
• Committed migration files to Git

This ensures reproducibility and version control of the database schema.

6. What’s working after Floxis #1

At this point, the following minimal system is in place:

• Task creation
• Task list display
• Database connectivity
• Database schema versioning

7. Conclusion

Floxis #1 didn’t involve much code, but it established a minimal system that actually works.

By thinking through the design from the start, I feel I was able to clarify the foundation of the system.

In Floxis #2 and beyond, I’ll work on expanding the data structure, adding features, and integrating AI.