TUDU: A Quick Exercise In LLM-Driven SaaS
LLM-Assisted Task Management and Creation
I'm breaking down a take-home assessment I was recently given to create a task management app. I used the following tools:
- Next.js 14 with Server Actions
- TypeScript (end-to-end type safety)
- Prisma with PostgreSQL
- TanStack Query for state management
- Tailwind CSS
- Clerk Authentication
- Jest & React Testing Library
- Hello Pangea DnD (maintained fork of
react-beautiful-dnd) - Headless UI for accessible components
- Zod for runtime type validation
I studied various task management apps and strategies known to improve task completion. This led me to integrate an LLM to enhance product quality. With this implementation, users can scale administrative tasks efficiently and see clear, measurable improvements in productivity.
How It Works
A user can select an existing task or create a new one:
Clicking "Need help? Try AI suggestions" opens an overlay:
Here, users can:
- Add additional context to the task
- Get AI-powered suggestions
- Automatically break down complex tasks into smaller, manageable tasks
This reduces overwhelm and helps users itemize their work more effectively.
LLM Prompt Example
Below is an example of how I structured my strategic prompt to provide task suggestions and breakdowns based on user input.
Once the user submits their request, the results appear side-by-side for easy comparison:
Why This Matters for UX
A clear input-output comparison is critical for learning and improving how users create and manage tasks over time. The system:
✅ Defines "Success Criteria" to clarify task objectives
✅ Uses that context to back up its recommendations
If users opt for a task breakdown, the next section suggests an optimal way to divide the work:
Clicking "Create All Tasks" instantly generates the breakdown, allowing users to fine-tune and manage tasks immediately.
Task Management Features
After tasks are created, users can:
- Sort by created date or due date
- View tasks by status (To-Do, In Progress, Completed)
- Drag & Drop tasks to reorder within status categories
- Filter by categories, in addition to task completion status
- Quickly update task completion by clicking the task status label
Screenshots of Key Features
Drag & Drop Sorting
Task Filters
Task Status Button
Desktop View
For those on larger screens, here are some desktop screenshots:
Task Overlay
Smart Assistant UI
Task Breakdown
All Tasks View
Final Thoughts
This LLM-powered task manager enhances user productivity by:
✅ Providing intelligent suggestions for better task structuring
✅ Breaking down complex tasks into achievable steps
✅ Offering an intuitive UI with drag-and-drop, filtering, and quick status updates
Hope you enjoyed this breakdown! Let me know your thoughts or suggestions. 🚀