nijatbakhtiyar/fs-form-builder

Form Builder - live

Description

Builder Apps are dynamic web applications that put the power of creation in your hands. As a versatile builder tool, it allows users to design and customize a variety of elements effortlessly. Inspired by the principles of leading builder apps like Framer and Squarespace, Builder App provides an intuitive and flexible platform for developers and businesses seeking to enhance their design and configuration workflows.

Technologies Used

@uvodohq/planum - live

• 🤝 Collaborative UI kit developed with our team together for efficient and consistent design.
• 🏎 Turborepo — High-performance build system for Monorepos
• 🚀 React — JavaScript library for user interfaces
• 🛠 Tsup — TypeScript bundler powered by esbuild
• 📖 Storybook — UI component environment powered by Vite
• 🟣 Uvodo design system
• 🌐 Accessibility friendly components (WCAG)

@stitches/react

• Lightweight and performant styling library (CSS in JS).
• Focuses on component architecture and developer experience.
• Supports TypeScript.
• Runs at near-zero runtime, contributing to improved performance.

eslint, prettier, husky

• Ensures code quality through linting.
• Prettier helps maintain a consistent code style.
• Husky enables pre-commit hooks, preventing bad commits.

@dnd-kit/*/

• Outperforms other drag-and-drop libraries in terms of performance.
• Provides a seamless and responsive drag-and-drop experience.
• Supports a wide range of use cases: lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D Games, and more.

zustand

• Lightweight state management for React.
• Simplifies state management with a minimal API.
• Avoids unnecessary re-renders, optimizing performance.

@tabler/icons-react

• Comprehensive set of icons for React applications.
• Enhances the visual appeal and user experience.

Time Spent

• Day 1:

  • Initiated the project by creating a Vite-React app.
  • Conducted research on libraries and best practices to uphold high standards of performance and code cleanliness.
  • Installed necessary libraries for the project, meticulously selecting those conducive to performant and clean code.
  • Laid the groundwork for the project's data model, ensuring a robust foundation for future development.

• Day 2:

  • Implemented the powerful @dnd-kit/* library, enhancing the application's drag-and-drop capabilities.
  • Integrated various form elements from @uvodohq/planum library, ensuring a comprehensive set for users to build custom forms effortlessly.
  • Established a cohesive design system by setting colors, tokens, and all CSS variables in the stitches.config file.
  • Focused on optimizing performance and maintaining code cleanliness throughout the implementation.

• Day 3:

  • Brought the project to its conclusion by finalizing the user interface and incorporating all necessary logic.
  • Ensured accessibility-friendly components for a more inclusive user experience.
  • Completed the finishing touches, including comprehensive testing and debugging.
  • Added detailed documentation and comments to aid developers in understanding and contributing to the project.

Future Improvements

• Expand Form Elements: Increase the variety of form elements available, catering to a broader range of data collection needs.

• Enhance Mobile Responsiveness: Improve the mobile experience by optimizing the user interface for smaller screens.

• Advanced Validation Options: Implement additional validation options to provide users with more control over data input and enhance data accuracy via react-hook-form and zod libraries.

• Customizable Templates: Introduce a template system for users to save and reuse their customized elements across different projects, optimizing workflow efficiency.

• Enhanced Accessibility Features: Prioritize and implement features that enhance accessibility, ensuring a more inclusive user experience for a diverse audience

• User Preferences and Settings: Allow users to customize their experience with personalized preferences and settings

License

This project is licensed - see the LICENSE file for details.