Typedrello

Boost your productivity

Purpose

• Benchmark Trello Web Application
• Gradual adoption of TypeScript in a Vanilla JavaScript App

  ﹡ Previous version(with Vanilla JavaScript)

Key Features

• List

  • Create new List in order
  • Edit List Card Title

• Card

  • Create new Card in List
    • Each Card's content can be modified in Modal

• DND(Drag and Drop) Lists or Cards

  • only works on Desktop (﹡ will-update TouchEvent on Tablet and Mobile)

💿 Preview GIF

Technical Challenges

• Migrating an existing Vanilla JavaScript App to TypeScript
• Implemented SPA using Vanilla TypeScript without any libraries or frameworks
• Built with Custom Core Library such as React Reconciliation with TypeScript
• Designed a CBD library based on the implemented Diffing(Reconciliation) algorithm, using Class (ES6+) syntax
• Implemented various DOM event interactions using Event Delegation
• Define Components as declarative views with state

Key Learning

WIP

🎛️ Tech Stacks

HTML CSS TypeScript Prettier Eslint