Full Stack Developer · August 2024 - March 2025 (≈7 months)
BuildErDocs
Drag-and-drop form builder that generates Markdown, PDF, Word, HTML, and JSON documents
Overview
What BuildErDocs does.
BuildErDocs is a modern form builder that allows users to design custom forms, save them as reusable templates, and instantly generate clean Markdown, HTML, PDF, Word, and JSON documents.
- Role
- Full Stack Developer
- Team
- Personal project
- Duration
- August 2024 - March 2025 (≈7 months)
- Responsive
- Yes
The challenge
Creating well-structured documentation from form inputs is time-consuming. Users needed a quick way to design forms and export structured documents in multiple formats.
Project goals
- Enable users to build forms using drag-and-drop
- Provide real-time Markdown preview and editing
- Export to multiple formats including PDF, Word, HTML, and JSON
- Offer reusable templates and a responsive UI
Process
How BuildErDocs came together.
Planning & Design
Mapped out the app's functionality and UI flow, focusing on user-friendly interactions and accessibility.
UI/UX Implementation
Built reusable components with Shadcn UI and styled them with Tailwind CSS, ensuring dark mode and responsive layouts.
Frontend & Drag-and-Drop
Integrated Dnd-kit for drag-and-drop form creation and real-time Markdown preview.
Export & File Handling
Implemented export functionality to Markdown, PDF, Word, HTML, and JSON using custom mapping logic and libraries.
Key features
- Drag-and-drop form builder with advanced field hierarchy
- Real-time Markdown preview and export
- Export to Markdown, PDF, Word, HTML, and JSON
- Reusable templates and customizable mapping rules
- Responsive, accessible, dark-mode supported UI
Impact
- Simplified document creation from form data
- Enhanced workflow for developers and content creators
- Demonstrated end-to-end full-stack project capabilities
Lessons learned
- Integrating drag-and-drop systems effectively in React
- Managing multi-format document export pipelines
- Balancing UI/UX with functionality in a personal project
Tools & technologies
What it was built with.
- React
- Vite
- TypeScript
- Tailwind CSS
- Shadcn UI
- Dnd-kit
More work
Related case studies.
02UI/UX DesignerRecipe platform · 2024
Cook It Yourself (CIY)
A social media-inspired platform to discover and share food recipes
- React
- Next.js
- Express
- Tailwind CSS
01Full Stack DeveloperColor design tool · 2024
Tonalist Studio
A next-generation color design tool for the modern web
- Next.js
- Tailwind CSS
- Shadcn UI
- Framer Motion