Draft Planner is an Angular and TypeScript-based application designed for Fantasy Football enthusiasts to efficiently plan and organize their drafts. The app provides a user-friendly interface to manage players and draft selections in a structured way.
Players Library: Browse and view available players.
Drag-and-Drop Draft Area: Easily organize draft picks with a drag-and-drop interface.
Backup Area: Save and restore draft picks to prevent data loss.
Component-Based Architecture: Designed for reusability and efficient management of UI components.
DraftPlanner uses the Sleeper API to fetch real-time NFL player data and ADP (Average Draft Position) rankings.
- On App Load: All player data is fetched and cached when you open the app
- Manual Refresh: Click the Refresh button to get the latest ADP rankings and stats during your draft
- No Limits: Refresh as many times as you want—Sleeper's free API has no rate limits
When app is opened, all players are loaded from the API once and stored in the component's memory.
- Virtual Scrolling - Only 8-10 visible player cards are rendered at a time
- Change Detection - Only updates the screen when data actually changes
- Card Reuse - Reuses existing player cards instead of recreating them
- Server/Client Separation - API calls happen in the browser, not on the server
The app automatically falls back to local CSV data (2024 season stats)
Player Trading: Enable in-season player trading functionality.
TypeScript
Angular
HTML, CSS, and modern frontend practices
