projects Frontend React TypeScript
Frontend React TypeScript Live

W-Dashboard: Drag & Drop Page Builder

Admin dashboard featuring a visual drag-and-drop page builder for composing pages without code.

Role
Frontend Developer
Status
Live
Tech Stack
React TypeScript Vite Craft.js Radix UI TanStack Query Zustand
ℹ Attribution: Professional project contribution; client source code is not published.

An admin dashboard with a visual, drag-and-drop page builder that lets non-technical users compose and edit pages without writing code.

Overview

Built around Craft.js for the editor engine, the dashboard provides a block-based editing experience with a polished, accessible UI.

Key Features

  • Drag-and-drop page builder powered by Craft.js and dnd-kit
  • Accessible UI built with Radix UI primitives
  • Data fetching & caching with TanStack Query
  • State management with Zustand and form handling via React Hook Form + Zod
  • Charts & analytics with Recharts

Tech Stack

  • Core: React, TypeScript, Vite
  • Editor: Craft.js, dnd-kit
  • UI: Radix UI, Tailwind CSS, Lucide
  • Data/State: TanStack Query, Zustand, React Hook Form, Zod