up next:
- form details page ( why do we need a form details page again? )
- might redesign landing page, think I found a better idea
lost a bit of momentum but still on track. feels good to zoom out and revisit drawing board for a while
#BuildInPublic#Nextjs15#FormBuilder
day 40 of FormMagik
needed to pause and reflect today, so i designed a journey tracker
so far:
-foundation (ux flows, schema) ✓
- auth (done, out of the way) ✓
- landin page ✓
- dashboard ✓
- builder ✓ (took about 3 weeks but it's solid)
#BuildInPublic#Nextjs15
still need to write some integration tests for the preview modal but
All 4 builder states (core functionality of a form builder) now complete
#BuildInPublic#Nextjs15#FormBuilder
day 39 of FormMagik
form preview modal is live
what's working:
- modal overlay
- live form preview synced with canvas
- fully interactive inputs
click preview → see/test/interact with your live form before publishing
#BuildInPublic#Nextjs15#FormBuilder
day 38 of FormMagik
did some UX planning for the form preview modal
goal: show users exactly what their form looks like before publishin
expected flow:
- read fields frm global state
- render formComponent for each field
- display in modal overlay
#BuildInPublic#FormBui
Day 37 of FormMagik
the 3 main builder layout sections done and functional:
- Elements library
- Form canvas
- Properties panel
only 2 field types for now (textField, numberField), but the architecture is plug-and-play. adding more is straightforward
#BuildInPublic#Nextjs15
day 36 of FormMagik
added test coverage for properties panel:
- Integration tests (form state, updates, validation)
- schema validation tests (Zod)
- cleanups and refactorin
catching bugs early > fixing them later
#BuildInPublic#Nextjs15#FormBuilder
day 34 of FormMagik
properties panel UI is live (design only for now)
still need to:
- wire up onChange handlers
- add validation logic
- update global state
but the canvas is finally looking like a real form builder✨
#BuildInPublic#Nextjs15#FormBuilder
Day 33 of FormMagik
added to global context:
- updateElement() method (to modify field properties)
- selectedElement state (to track active field)
foundation for properties panel is ready
- next: wire up the UI.
#BuildInPublic#Nextjs15#FormBuilder
day 32 of FormMagik
planning the properties panel(section C) implementation today
pattern is familiar:
- drag -> add to state -> render on canvas
- click -> mark as active -> extract properties from state -> render as editable inputs
straightforward enough
#BuildInPublic
day 31 of FormMagik
delete element from canvas
- hoverin over a field on canvas shows a dark overlay with delete button -> click it -> field removed frm global state
- quick win since removeElement() already in the context. Just needed the UI trigger
#BuildInPublic#Nextjs15
day 30
canvas is comin alive
dropped fields now render as styled previews instead of placeholder boxes
each field shows:
- type
- placeholder
- helper text
not interactive, Just visual feedback while buildin
#BuildInPublic#Nextjs15#FormBuilder
day 29 of FormMagik
set up React Context for global builder state
context holds:
- elements[] array (FormElementInstance)
- addElement() / removeElement() hooks
each element has id, type, & extraAttributes (label, placeholder, etc)
#BuildInPublic#Nextjs15#FormBuilder
options: Redux vs Zustand vs React Context ?
probably going with React Context ( simplicity + no extra packages)
unless someone convinces me otherwise??
#BuildInPublic#Nextjs15#FormBuilder
day 28 of formMagik
hit the "local state isn't enough" problem today
my current flow works but form fields data need to be accessible from:
- canvas
- properties panel
- preview modal
prop drilling is always a bad idea so global state
#BuildInPublic#Nextjs15#FormBuilder
762 Followers 558 FollowingFull-Stack Software Engineer | Building Scalable Web & Mobile Applications | Bridging Software with Hardware Systems | Building AI Systems | @sendly_ai_
795 Followers 1K Following21 year old self taught developer. Main languages are Kotlin, Python, and Typescript. Open to opportunities or collaboration!
56 Followers 326 FollowingJava Developer, JSP and Servlet technical debt 😂, Spring Boot student, sales man, looking to solve problems that affect a lot of people.
149 Followers 367 FollowingDefinitely not the person whom you knew 6 months back and neither will I be the same 6 months later.
Go ,Typesript & Python 🐍
174 Followers 373 FollowingMuslim || Industrial physicist || Frontend Developer for Mobile apps & Web || Javascript, typescript || React Native || Next js 💻 … First ever Barcelona fan.
20K Followers 18K FollowingFreeBSD advocate who is heavily into Ansible, BGP (AS20621), DevOps, Kubernetes, Proxmox, XCP-ng, Python, Rust & RISC-V and builds own decentralized solutions.
1K Followers 768 FollowingFull-Stack Web Dev 🚀 | React, JavaScript, & Node.js | Turning ideas into powerful digital experiences | Building the web of tomorrow #WebDev
321 Followers 52 FollowingBuilding EduOS — an AI-native Linux OS for African schools | Software Engineer | Systems Programming, OS dev, AI | Node, Go, C, Python, React | 19 & building
762 Followers 558 FollowingFull-Stack Software Engineer | Building Scalable Web & Mobile Applications | Bridging Software with Hardware Systems | Building AI Systems | @sendly_ai_
795 Followers 1K Following21 year old self taught developer. Main languages are Kotlin, Python, and Typescript. Open to opportunities or collaboration!
56 Followers 326 FollowingJava Developer, JSP and Servlet technical debt 😂, Spring Boot student, sales man, looking to solve problems that affect a lot of people.
296K Followers 6K Followingreinforcement learning, robots. prev eng @ x, stripe. 6'3 (height)
working on hardware with 0 funding because it's fun.
subscribe to read my blog!
2K Followers 308 FollowingFounder of 𝐊𝐮𝐝𝐨𝐀𝐈 (creators of chatgpt.js). 𝟓𝟎,𝟎𝟎𝟎+ contributions to Open Source. HMU @ https://t.co/ChUjCHUgwY or +1-415-894-0301 (text or voice)
149 Followers 367 FollowingDefinitely not the person whom you knew 6 months back and neither will I be the same 6 months later.
Go ,Typesript & Python 🐍
174 Followers 373 FollowingMuslim || Industrial physicist || Frontend Developer for Mobile apps & Web || Javascript, typescript || React Native || Next js 💻 … First ever Barcelona fan.
20K Followers 18K FollowingFreeBSD advocate who is heavily into Ansible, BGP (AS20621), DevOps, Kubernetes, Proxmox, XCP-ng, Python, Rust & RISC-V and builds own decentralized solutions.
1K Followers 768 FollowingFull-Stack Web Dev 🚀 | React, JavaScript, & Node.js | Turning ideas into powerful digital experiences | Building the web of tomorrow #WebDev