Frontend Study Overview

This repository now targets modern frontend development in the order JavaScript → TypeScript → Angular → React. Use this overview to navigate the stack-specific folders and understand how notes, practice prompts, and generators fit together.

1. How the stacks are organized

• notes/ — Core references and explanations per stack (javascript/, typescript/, angular/, react/) plus shared, framework-agnostic topics in shared/.
• practice/ — Exercises, questions, and drills that mirror the structure of notes/ for each stack.
• Generators — The study, flash card, and exercise sites read directly from notes/ and practice/; code fences use frontend languages (javascript, typescript, jsx, tsx, html, css).

2. Learning order

1. JavaScript fundamentals — runtime model, language basics, browser APIs, DOM, performance and networking.
2. TypeScript — typing system, configuration, generics, utility types, tooling (tsconfig, eslint, bundlers).
3. Angular — standalone components, modules, routing, RxJS patterns, forms, state.
4. React — hooks, state management, routing, performance, testing.
5. Shared topics — accessibility, security, performance, responsive design, micro frontends, testing strategy, build tooling, CI/CD.

3. What to expect in each stack

• Overview file — roadmap and prerequisites for the stack.
• Core concepts — language/runtime fundamentals or framework basics.
• Architecture & patterns — how to structure apps, manage state, and reason about data flow.
• Tooling & testing — linting, formatting, bundling, unit/integration/e2e testing.
• Performance & resilience — optimization, observability, and reliability techniques.
• Architecture foundations — shared guidance in notes/shared/frontend-architecture.md to align patterns across stacks.

4. Shared topic spotlight

• Micro frontends — see notes/shared/micro-frontends.md for composition options and ownership boundaries.
• Scalable and responsive design — see notes/shared/scalable-responsive-design.md for layout, tokens, and testing guidance.

5. How to contribute content

• Add new Markdown under the relevant stack folder and keep headings meaningful for generators.
• Mirror new note files with practice prompts in the matching practice/<stack>/ folder.
• Use code fences with accurate languages (javascript, typescript, jsx, tsx, html, css) so syntax highlighting renders correctly.
• Favor small, focused documents over monoliths; link across stacks when a topic is shared (e.g., shared/accessibility.md).

6. Next steps in the migration

• Flesh out JS and TS fundamentals first, then layer Angular and React specifics.
• Migrate legacy backend content into frontend analogues (architecture patterns, testing strategies, error handling).
• Update generators to surface stack filters and frontend code highlighting.