π¨βπΌ Welcome to the Epic Task Manager! This is a real-world React application where you'll practice all the TypeScript skills you've learned in this workshop. You'll implement utility functions that power a task management dashboard.
What You'll Build
This app helps teams manage projects and tasks. You'll implement:
- Type definitions for projects, tasks, and users
- Discriminated unions for project status tracking
- Generic functions for filtering and updating tasks
- Type narrowing for handling user roles and assignments
- Union types for priorities and user roles
Getting Started
π¨ Open
and implement all the type definitions and utility functions. Each function has π¨ instructions explaining what to do.
π¨ Then open
and use your utility functions to make the app fully functional. Look for π¨ comments indicating where to use your functions.
Running the App
npm run dev
The app will start on
http://localhost:5173 (or another port if 5173 is busy).What to Implement
In utils.ts:
- Type Definitions - Create discriminated unions, type aliases, and interfaces
- formatProjectStatus - Handle different project status variants
- filterByPriority - Generic function to filter by priority
- getUserDisplayName - Handle null user values
- canManageTasks - Narrow user roles
- updateTaskProperty - Generic function with keyof constraints
- getTasksByAssignee - Handle null and string assignee IDs
- createProjectUpdate - Transition between project statuses
In app.tsx:
- Use
filterByPriorityto filter tasks - Use
getTasksByAssigneeto filter by assignee - Use
formatProjectStatusto display project status - Use
updateTaskPropertyto toggle task completion - Use
createProjectUpdateto transition project statuses
Tips
π° Start with the type definitions - they'll help TypeScript guide you as you implement the functions.
π° Use type narrowing (typeof, instanceof, or discriminated unions) to handle different cases safely.
π° Generic constraints ensure your functions work with any type that has the required properties.
π° Discriminated unions make it easy to handle different variants of a type safely.
No Tests, No Solutions
π This is practice time! There are no tests or solutions. Experiment, make mistakes, and learn. The goal is to build confidence by applying what you've learned.
