TaskMaster Pro
Fullstack task manager with professional architecture and a focus on real teams.
Timeline
2 Weeks
Role
Full Stack Developer
The Problem
Many product teams manage work with tools that don't fit their real flow, causing operational friction, lost visibility, and scalability issues as the team grows.
- ✕Inflexible roles and permissions that don't reflect the real team structure.
- ✕Information overload that hinders adoption by non-technical profiles.
- ✕Lack of clear visibility into the real status of work and bottlenecks.
- ✕Difficulty scaling projects and teams without losing control or traceability.
- ✕Dependency on multiple tools to cover basic needs (tasks, communication, tracking).
The Solution
I designed and developed a SaaS fullstack platform that centralizes task, team, and project management, prioritizing clean architecture and a fluid user experience.
Kanban Board
Intuitive task visualization with drag-and-drop functionality.
Internationalization (i18n)
Full support for Spanish and English, with automatic language detection.
Project Management
Organize your tasks into different projects for better tracking.
Team Management
Collaborate with other users within specific projects.
Notification System
Stay up to date with updates on your tasks and mentions.
Secure Authentication
JWT-based login and registration with route protection.
Search and Filtering
Quickly locate tasks by title, status, or priority.
Automatic Task Priority Classification
Auto-management of task priority (low, medium, high) can be enabled in settings based on the configured time margin.
Premium Design
Modern, responsive interface with fluid animations (Framer Motion).
Tech Stack
React 18
Frontend
Vite
Frontend
TypeScript
Frontend
Zustand
State
TanStack Query
Data
TailwindCSS
Styling
Radix UI
UI
Framer Motion
Animations
i18next
i18n
Node.js
Backend
Express
Backend
PostgreSQL
Database
Prisma
ORM
Zod
Validation
Technical Challenges
Kanban State Management
Maintaining task order consistency after multiple drag-and-drop moves and syncing with the DB.
interface TaskMove {
taskId: string;
sourceCol: string;
destCol: string;
newIndex: number;
}
// Optimistic update logic
const moveTaskOptimistic = (move: TaskMove) => {
set((state) => {
const sourceCol = state.columns[move.sourceCol];
const destCol = state.columns[move.destCol];
// ... logic to splice task from source and insert to dest
return { columns: { ...state.columns, [move.destCol]: newDest }};
});
// Sync with backend in background
api.updateTaskPosition(move).catch(revertState);
};Board Performance
Efficient rendering of hundreds of tasks using virtualization and selective memoization.