Skip to content

Port frontend from Svelte 5 to React 19 + Vite + Tailwind + Zustand#4

Open
prabhatexit0 wants to merge 1 commit into
mainfrom
react-port
Open

Port frontend from Svelte 5 to React 19 + Vite + Tailwind + Zustand#4
prabhatexit0 wants to merge 1 commit into
mainfrom
react-port

Conversation

@prabhatexit0
Copy link
Copy Markdown
Owner

Summary

  • Full frontend rewrite from SvelteKit/Svelte 5 to React 19 + Vite 6 + Tailwind CSS v4 + Zustand 5
  • Split the monolithic 1,043-line StorageControlPanel.svelte into 7 focused React components
  • Extracted shared useCanvas hook eliminating duplicated canvas boilerplate across 3 components
  • Design tokens via Tailwind @theme replacing 50+ hardcoded color values
  • Added ARIA labels and semantic roles for accessibility
  • Added error handling on WASM initialization
  • Rust WASM engine is completely untouched

Test plan

  • Initialize engine with various page size presets
  • Quick Fill a table and verify buffer pool / disk visualizations render
  • Click frames in buffer pool and pages in disk grid
  • Toggle Layout / Hex view in page inspector
  • Scan table, filter results, click rows and cells
  • Insert / Get / Delete rows via Row ID input
  • Load a CSV file
  • Resize panes via drag dividers
  • Collapse/expand all panes
  • Test mobile responsive layout (< 768px)
  • Flush page / Flush All
  • Drop table and Reset engine

Replace the SvelteKit frontend with a React 19 SPA while keeping the
Rust WASM engine untouched.

- React 19 + Vite 6 + Tailwind CSS v4 + Zustand 5
- Split 1043-line StorageControlPanel into 7 focused components
- Shared useCanvas hook eliminates canvas boilerplate duplication
- Design tokens via @theme instead of hardcoded colors
- ARIA labels and semantic roles for accessibility
- Error boundary on WASM initialization
- Netlify config updated for Vite dist/ output
@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 19, 2026

Deploy Preview for wizalloc ready!

Name Link
🔨 Latest commit 4c5b184
🔍 Latest deploy log https://app.netlify.com/projects/wizalloc/deploys/69977b022c438000082c89d5
😎 Deploy Preview https://deploy-preview-4--wizalloc.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant