Building a Todo App with ByteMason

This guide walks you through creating a full-stack todo application with authentication, categories, and due dates.

Project Setup

# Create new project
berry new todo-app
cd todo-app
 
# Generate specification
berry plan "Create a todo app with user authentication, categories, and due dates. Users should be able to create, update, delete todos and organize them by categories. Each todo should have a title, description, due date, category, and completion status."

Understanding the Generated Specification

The specification will include:

1. Database Schema:

   • Users table (handled by Supabase Auth)
   • Todos table
   • Categories table

2. API Endpoints:

   • CRUD operations for todos
   • Category management
   • User preferences

3. UI Components:

   • Authentication forms
   • Todo creation/edit forms
   • Category management
   • Todo list with filters

Database Setup

# Configure Supabase
berry db setup ./spec/specification.json
 
# Push migrations
berry db push

Code Generation

# Generate application code
berry code ./spec/specification.json

Customizing the Generated App

1. Modify Theme

// app/globals.css
:root {
  --primary: #2563eb;
  --secondary: #64748b;
}

2. Add Custom Features

// app/components/TodoItem.tsx
export function TodoItem({ todo }) {
  // Add your custom logic here
}

Testing Your Application

# Install dependencies
npm install
 
# Start development server
npm run dev

Common Issues and Solutions

• Build Errors: Run berry repair to fix common issues
• Database Sync: Use berry db push after schema changes
• UI Updates: Modify shadcn components in components/ui

Next Steps

• Add more features like sharing and collaboration
• Implement real-time updates using Supabase subscriptions
• Add email notifications for due dates