🔤 Character Frequency Counter — React + TypeScript

A simple app that takes in a word and outputs the frequency of each character, rendered in a vertical list.

---

🚀 Live Demo & Boilerplate

Use this CodeSandbox template to create or reset the app quickly:

👉 React + TypeScript Template

---

✨ Features

• Controlled input field for user-typed word
• Click-to-calculate character frequency
• Dynamic rendering of characters and counts
• Clean functional component structure
• Minimal styling, focused on clarity

---

🛠 Technologies

• React (with Hooks)
• TypeScript
• JavaScript Debugging Tools
• Browser DevTools
• CodeSandbox (cloud IDE)

---

🐞 Debugging Guide

To follow the data flow step-by-step:

1. Open DevTools Console

   • See console.log() messages as you type or click

2. Use debugger keyword

   • In calculateFrequencies, add debugger; to pause execution
   • Step through code line by line (F10 or ⬇️ button in DevTools)

3. Install React DevTools

   • View and inspect component state live
   • See how inputText and frequencies change on interaction

4. Add breakpoints in Chrome

   • In the Sources tab, click any line number to break there
   • Hover variables to inspect values
   • Use the Scope pane to see local variables

---

📚 Next Steps & Ideas

• 🔠 Add sorting (A–Z or frequency high-to-low)
• 🚫 Ignore whitespace or punctuation
• 🔄 Add a reset button
• ✅ Write unit tests using Jest or React Testing Library
• 🎨 Use Tailwind CSS or styled-components for styling
• 🧩 Refactor to use index.tsx as an entry point

---

✅ Quick Start (Local with Vite)

If you're not using this repo directly or a CodeSandbox fork, here’s how to set up the app from scratch using Vite:

npm create vite@latest character-frequency -- --template react-ts
cd character-frequency
npm install
npm run dev