TypeDrop/index.html at main · niltonheck/TypeDrop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TypeDrop — Daily AI-Generated TypeScript Challenges</title>
  <meta name="description" content="A fresh TypeScript challenge every day, generated by AI. Focus on the type system, not algorithms. Open in StackBlitz or clone locally — no accounts, no setup.">
  <meta property="og:title" content="TypeDrop — Daily AI-Generated TypeScript Challenges">
  <meta property="og:description" content="A fresh TypeScript challenge every day, generated by AI. Focus on the type system, not algorithms. Open in StackBlitz or clone locally — no accounts, no setup.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://niltonheck.github.io/TypeDrop/">
  <meta property="og:image" content="https://niltonheck.github.io/TypeDrop/misc/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="TypeDrop — Daily AI-Generated TypeScript Challenges">
  <meta name="twitter:description" content="A fresh TypeScript challenge every day, generated by AI. Focus on the type system, not algorithms. Open in StackBlitz or clone locally — no accounts, no setup.">
  <meta name="twitter:image" content="https://niltonheck.github.io/TypeDrop/misc/og-image.png">
  <link rel="icon" href="misc/favicon.svg" type="image/svg+xml">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/0x-proto@latest/latin-400-normal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontsource/fonts/0x-proto@latest/latin-700-normal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a href="#challenge" class="skip-link">Skip to challenge</a>
  <main>
    <header>
      <h1>TypeDrop</h1>
      <p class="tagline">A new TypeScript challenge every day. Sharpen your types.</p>
    </header>

    <div class="about-callout">
      <p><strong>TypeDrop</strong> delivers a fresh TypeScript challenge every day, generated by AI. Pick a challenge, open it in StackBlitz (preferred) or CodeSandbox (or clone it locally), and make the tests pass. No accounts, no setup — just you and the type system.</p>
      <p><a href="https://github.com/niltonheck/typedrop" target="_blank" rel="noopener noreferrer">Learn more on GitHub &rarr;</a></p>
    </div>

    <!-- CHALLENGE_START -->
    <section class="challenge-card">
      <div class="challenge-header">
        <span class="challenge-date">2026-04-23</span>
        <span class="badge easy">Easy</span>
      </div>
      <h2>Typed Shopping Cart Aggregator</h2>
      <p>You're building the order summary engine for a small e-commerce storefront. Raw cart line items arrive as `unknown` JSON from the client; your engine must validate them, apply typed discount rules, and produce a strongly-typed order summary — with zero `any`.</p>
      <div class="challenge-goals">
        <h3>Goals</h3>
        <ul>
          <li>Define a generic `Result&lt;T, E&gt;` discriminated union and use it as the return type for all three functions.</li>
          <li>Implement `parseLineItem` to validate an `unknown` value into a `LineItem` with a computed subtotal, returning typed errors on failure.</li>
          <li>Implement `validateDiscount` to validate an `unknown` value into a `DiscountRule`, branching correctly on the `kind` discriminant.</li>
          <li>Implement `buildOrderSummary` to validate all inputs, apply ordered discount rules, and produce a fully-typed `OrderSummary`.</li>
        </ul>
      </div>
      <div class="code-block">
        <div class="code-block-header">
          <span class="dot red"></span>
          <span class="dot yellow"></span>
          <span class="dot green"></span>
          <span class="code-block-title">challenge.ts</span>
        </div>
        <pre><code class="language-typescript">// Key types you'll work with:

type Category = &quot;electronics&quot; | &quot;clothing&quot; | &quot;food&quot; | &quot;books&quot;;

type DiscountRule =
  | { kind: &quot;percentage&quot;; percent: number; category?: Category }
  | { kind: &quot;fixed&quot;; amountOff: number; minimumSubtotal: number };

type Result&lt;T, E&gt; = /* TODO */ never;

type CartValidationError =
  | { kind: &quot;empty_cart&quot; }
  | { kind: &quot;invalid_item&quot;; index: number; reason: string }
  | { kind: &quot;invalid_discount&quot;; index: number; reason: string };

// Main entry point:
function buildOrderSummary(
  rawItems: unknown[],
  rawDiscounts: unknown[]
): Result&lt;OrderSummary, CartValidationError&gt;
</code></pre>
      </div>
      <details class="challenge-hints-details">
        <summary>Hints (click to reveal)</summary>
      <div class="challenge-hints">
        <h3>Hints</h3>
        <ul>
          <li>Start with `Result&lt;T, E&gt;` — it's a two-member discriminated union on an `ok` boolean field; all three functions return it.</li>
          <li>To check if a value belongs to a union like `Category`, declare a `const VALID_CATEGORIES` tuple and use `Array.prototype.includes` with a type predicate.</li>
          <li>In `buildOrderSummary`, compute per-category subtotals with a `Record&lt;Category, number&gt;` accumulator before finding `topCategory`.</li>
        </ul>
      </div>
      </details>
      <div class="challenge-docs">
        <h3>Useful resources</h3>
        <ul>
          <li><a href="https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions" target="_blank" rel="noopener noreferrer">TypeScript Handbook — Discriminated Unions</a></li>
          <li><a href="https://www.typescriptlang.org/docs/handbook/2/narrowing.html" target="_blank" rel="noopener noreferrer">TypeScript Handbook — Narrowing (typeof / in / user-defined guards)</a></li>
          <li><a href="https://www.typescriptlang.org/docs/handbook/2/generics.html" target="_blank" rel="noopener noreferrer">TypeScript Handbook — Generics</a></li>
          <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes" target="_blank" rel="noopener noreferrer">MDN — Array.prototype.includes</a></li>
        </ul>
      </div>
      <div class="cta-row">
        <a class="cta-button cta-primary" href="https://stackblitz.com/github/niltonheck/typedrop/tree/challenge/2026-04-23" target="_blank" rel="noopener noreferrer">
          <img class="sb-icon" src="https://cdn.simpleicons.org/stackblitz/e0e0e0" alt=""> StackBlitz
        </a>
        <a class="cta-button" href="https://codesandbox.io/p/devbox/github/niltonheck/typedrop/tree/challenge/2026-04-23" target="_blank" rel="noopener noreferrer">
          <img class="csb-icon" src="https://cdn.simpleicons.org/codesandbox/e0e0e0" alt=""> CodeSandbox
        </a>
      </div>
      <div class="clone-section">
        <h3>Or clone locally</h3>
        <div class="clone-box">
          <code id="clone-cmd">git clone -b challenge/2026-04-23 https://github.com/niltonheck/typedrop.git</code>
          <button class="clone-copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('clone-cmd').textContent).then(()=>{this.textContent='Copied!';this.classList.add('copied');setTimeout(()=>{this.textContent='Copy';this.classList.remove('copied')},2000)})">Copy</button>
        </div>
      </div>
    </section>
    <!-- CHALLENGE_END -->

    <footer>
      <p>
        Challenges are AI-generated and open source.
        <a href="https://github.com/niltonheck/typedrop" target="_blank" rel="noopener noreferrer">View on GitHub</a>
        &middot;
        <a href="archive.html">Archive</a>
      </p>
      <p>
        Built with <svg class="inline-icon heart-icon" viewBox="0 0 24 24" fill="currentColor" aria-label="love"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> and <img src="https://cdn.simpleicons.org/anthropic/d4a27f" alt="Claude" class="inline-icon"> from <a href="https://www.youtube.com/watch?v=s9hl8i_yeUw" target="_blank" rel="noopener noreferrer"><img src="misc/pe-flag.jpg" alt="Peru" class="flag-icon"></a> by
        <a href="https://github.com/niltonheck" target="_blank" rel="noopener noreferrer">@niltonheck</a>
      </p>
      <p class="footer-note">
        This site uses <a href="https://www.goatcounter.com/" target="_blank" rel="noopener noreferrer">GoatCounter</a>, an open-source, privacy-friendly analytics tool, purely to satisfy curiosity about page visits. No personal data is collected, no cookies are used, and nothing is shared or used for training.
      </p>
    </footer>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-typescript.min.js"></script>
  <script data-goatcounter="https://niltonheck.goatcounter.com/count"
        async src="//gc.zgo.at/count.js"></script>
</body>
</html>