Skip to content

AwalHossain/klassy-missy-assesment-test

Repository files navigation

🚀 Customer UI: Responsive & Interactive Form Experience with Drag & Drop

📱💻 Dual-Platform Design Revolution

Welcome to the Customer UI project - a cutting-edge solution for creating a seamless and intuitive user interface across both mobile and desktop platforms. This project showcases the power of modern web technologies to deliver a responsive, interactive, and persistent form experience.

🌟 Key Features

  • 📊 Redux-Powered State Management: Harness the full potential of Redux for robust and predictable state handling.
  • 🧩 Reusable Component Architecture: Leverage the power of modular design with our highly customizable and maintainable components.
  • 🔄 Drag-and-Drop Mastery: Implement an engaging drag-and-drop interface using React Beautiful DND for effortless data organization.
  • 🔒 Form Validation with Zod: Ensure data integrity with our robust form validation powered by Zod.
  • 💾 Persistent User Progress: Never lose your work - our system retains user data across sessions and page refreshes.
  • 📊 Multi-Column Data Management: Seamlessly move data between three dynamic columns for ultimate flexibility.

🖼️ Visual Showcase

Feast your eyes on our sleek and intuitive interface:

Step 1 Form Step 1: Initial form layout

Step 2 Form Step 2: Advanced options and data entry

Drag and Drop Interface Drag and Drop: Flexible data organization

🛠️ Technologies at Play

  • Next.js (with App Router)
  • Redux for state management
  • React Beautiful DND for drag-and-drop functionality
  • TypeScript for enhanced code reliability
  • React Hook for creating reusable components
  • Zod for bulletproof form validation
  • Framer Motion for smooth transition

🚀 Getting Started

Embark on your journey with Customer UI in just one simple step:

npm install