Form Patterns — Vanilla JavaScript SPA

A single authentication form. Built in plain JavaScript. Then rebuilt. Then rebuilt again — each time with a new layer of understanding.

---

The Idea

Instead of building many forms, I built one — and refused to move on until I understood every line. Each version adds a layer. Each layer teaches something a tutorial never could.

---

V1: Single-View Form ✅

Switching between login and signup inside a single route — without changing the URL. Built with a hash-based SPA router.

Three approaches explored:

• Callback functions (Props Drilling in React)
• Custom Events
• Shared State Object (Redux system in React)

Concepts along the way: State, circular dependency, shadowing, closure.

→ Full Case Study: Single-view Form

---

V2: Multi-Step Form ✅

A signup form spread across multiple steps — centralized navigation, prop drilling solved with named exports, dependency injection for Enter key handling, and data management across steps.

Concepts along the way: Centralized vs. decentralized navigation, named exports (Context API pattern), dependency injection, controlled circular dependency, callback wrapper, review step.

→ Full Case Study: Multi-steps Form

---

Want the Full Story?

Every bug, every decision, every lesson — explained step by step on my portfolio:

→ Falcon Stoop — Portfolio

---

Summary

Version	Explores
V1: Single-View	State, callbacks, architecture
V2: Multi-Step	Step management

---

Built in plain JavaScript. No dependencies.