Ready2Blob/.planning/research/STACK.md

Technology Stack

Project: Ready2Blob Researched: 2026-03-26 Confidence note: External verification tools were unavailable in this session. Version numbers reflect training data (knowledge cutoff August 2025). Verify all versions against npmjs.com before scaffolding.

---

Recommended Stack

Core Framework

Technology	Version	Purpose	Why
React	18.x	Component model, state management, rendering	Largest ecosystem, best-in-class multi-step form libraries all target React first. Hooks (useState, useReducer, useContext) provide exactly the right mental model for a wizard: local step state + shared config accumulator state. No SSR needed — this is 100% client-side rendering.
Vite	5.x	Build tooling, dev server, static asset bundling	Near-zero config for a React SPA. vite build produces a static dist/ folder deployable to GitHub Pages, Netlify, or any CDN with no server required. HMR makes iteration fast. Replaces CRA, which is abandoned. Replaces Webpack, which requires painful configuration for something this simple.
TypeScript	5.x	Type safety	rclone config generation involves composing structured data (backend type, required fields per backend, optional flags) into string templates. TypeScript catches the inevitable "wrong field name" bugs at compile time rather than at user download time. The marginal overhead is worth it for a tool where correctness of generated output is the entire product.

Styling

Technology	Version	Purpose	Why
Tailwind CSS	3.x	Utility-first styling	No design system to maintain — each step of the wizard is a one-off layout. Tailwind's inline classes mean styling stays co-located with markup, avoiding CSS file sprawl. For a tool likely built by one or two developers, it eliminates the "where does this class live?" question. Avoid CSS Modules (too much file switching) and styled-components (runtime overhead, no benefit here).

Form & Wizard State

Technology	Version	Purpose	Why
react-hook-form	7.x	Per-step form validation and field registration	The standard for React forms. Uncontrolled inputs with ref-based validation means no re-render on every keystroke — important when some wizard steps may have 10+ fields (e.g., S3 config). Native Zod integration via @hookform/resolvers allows schema-driven validation that mirrors the rclone backend field spec.
Zod	3.x	Schema definition and runtime validation	Per-backend field schemas (required vs optional, string format, enum values) map directly to Zod schemas. A backends/azure.ts, backends/s3.ts, etc. pattern lets each backend declare its own schema — react-hook-form validates against it per step. This is the correct abstraction: the schema IS the backend spec.

File Generation & Download

Technology	Version	Purpose	Why
Native Blob API	— (browser built-in)	Text file download (rclone.conf, .ps1 scripts)	No library needed. new Blob([content], { type: 'text/plain' }) + URL.createObjectURL() + programmatic anchor click is the standard pattern for single-file downloads. Zero dependency, works in all modern browsers. Using a library for this adds complexity without benefit.
JSZip	3.x	ZIP bundling of all generated files	When the user wants to download all files at once (rclone.conf + Intune script + RMM script), a ZIP is far better UX than three separate downloads. JSZip is the de-facto standard for client-side ZIP in browsers, actively maintained, no server required. file-saver is often paired with it for the saveAs() convenience but the Blob/anchor pattern works fine without it.

State Management

Technology	Version	Purpose	Why
React built-ins (useState / useReducer / useContext)	18.x	Wizard state, accumulated config object	No external state library needed. The wizard has one primary data structure: the accumulating rclone config object (backend type + per-backend fields + script options). A useReducer at the app root with a context provider gives all steps read/write access without prop drilling. This is a solved problem at this scale — Zustand/Redux are overkill.

Hosting / Deployment

Technology	Version	Purpose	Why
GitHub Pages or Netlify (free tier)	—	Static hosting	The output of vite build is a folder of HTML/CSS/JS. Any static host works. GitHub Pages is zero-cost and integrates directly with the repository. Netlify adds deploy previews for PRs, which is useful for validating config generation changes. No server needed at either.

---

Alternatives Considered

Category	Recommended	Alternative	Why Not
Framework	React 18	Vue 3	Vue is a reasonable choice but the wizard library ecosystem (react-hook-form, Formik) is React-first. No strong reason to diverge.
Framework	React 18	Svelte / SvelteKit	Svelte has no widely-adopted multi-step form library. Would require hand-rolling wizard state. The compile-time model is elegant but not worth the ecosystem tradeoff here.
Build tool	Vite	Create React App	CRA is officially deprecated by the React team. Not a valid choice for new projects in 2025.
Build tool	Vite	Next.js	Next.js is a server-framework. Using it for a pure static SPA adds file-based routing conventions, SSR plumbing, and deployment assumptions that are all irrelevant here. vite + react is simpler and more appropriate.
Styling	Tailwind CSS	Material UI / shadcn/ui	shadcn/ui is worth considering as a component library for accessible form elements (inputs, selects, checkboxes). It is built on Radix UI primitives and works with Tailwind. If the team wants pre-built accessible components rather than raw HTML + Tailwind, shadcn/ui is the right addition — not a replacement for Tailwind, but a layer on top.
Forms	react-hook-form	Formik	Formik is older and uses controlled inputs (re-render on every keystroke). react-hook-form is the current standard and has better performance and Zod integration.
ZIP	JSZip	fflate	fflate is faster and smaller than JSZip. Both are valid. JSZip has more documentation and community examples for the browser download pattern, making it easier to implement correctly without prior experience. If bundle size becomes a concern, swap to fflate.
State	useReducer + Context	Zustand	Zustand is excellent but unnecessary at this scale. No async state, no complex selectors needed. Adding a dependency for something React itself handles cleanly is not justified.

---

Recommended shadcn/ui Addition

Use shadcn/ui for form components. shadcn/ui is not a dependency — it is a code generator. Running npx shadcn-ui@latest add button input select checkbox copies accessible, Tailwind-styled components into your project. These components are owned by the project (not a node_module) and fully customizable. For a wizard with many form inputs, this provides:

• Accessible labels, focus states, error message patterns out of the box
• Consistent visual design without a custom design system
• Radix UI primitives under the hood (keyboard navigation, ARIA) at no extra runtime cost

This is the current 2025 best practice for React + Tailwind projects.

---

Installation

# Scaffold
npm create vite@latest ready2blob -- --template react-ts
cd ready2blob

# Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Forms and validation
npm install react-hook-form zod @hookform/resolvers

# ZIP generation
npm install jszip

# shadcn/ui setup (optional but recommended)
npx shadcn-ui@latest init
# Then add components as needed:
npx shadcn-ui@latest add button input select checkbox label

---

What NOT to Use

Technology	Why Not
Next.js	Server framework. Adds SSR/SSG complexity with zero benefit for a pure client-side tool.
Create React App	Officially deprecated. Abandoned by React team.
Redux / Redux Toolkit	Overkill for wizard state. useReducer + Context is sufficient.
Formik	Superseded by react-hook-form. Controlled inputs cause unnecessary re-renders.
Angular	Enterprise framework, large bundle, steep learning curve, wrong tool for a simple wizard.
Backend of any kind	Explicitly out of scope. All generation is string manipulation in the browser.
LocalStorage / IndexedDB	Out of scope per PROJECT.md — no persistence.

---

Confidence Assessment

Decision	Confidence	Basis
React 18 + Vite as core	HIGH	Industry-standard since 2023, no credible challenger for this use case
TypeScript	HIGH	Unambiguously correct for generated-output correctness
react-hook-form + Zod	HIGH	De-facto standard pairing for React forms as of 2024-2025
Tailwind CSS	HIGH	Dominant utility-CSS framework; strong fit for wizard UI
shadcn/ui	MEDIUM	Strong community adoption but version numbers evolve quickly; verify CLI syntax
JSZip for ZIP	MEDIUM	Stable and widely used, but fflate is a valid modern alternative — verify latest version on npm
Blob API for single-file download	HIGH	Native browser API, no version concern
Version numbers (all)	LOW	Training data cutoff August 2025; must verify on npmjs.com before scaffolding

---

Sources

• PROJECT.md: project requirements and constraints (pure frontend, no backend, static hosting)
• React documentation (react.dev) — training data, verify current version
• Vite documentation (vitejs.dev) — training data, verify current version
• react-hook-form documentation (react-hook-form.com) — training data, verify current version
• Zod documentation (zod.dev) — training data, verify current version
• JSZip (stuk.github.io/jszip) — training data, verify current version
• shadcn/ui (ui.shadcn.com) — training data, verify CLI commands
• MDN Web Docs: Blob API, URL.createObjectURL — browser built-in, no version concern