Adewole

Freelance fullstack Software Developer | Typescript | NextJS | SpringBoot Microservices | Spring Security

email - [email protected]

[Adewole @coding_robin]

- User Management System (fullstack web application)

- a 5page authentication and authorization system to create/register, authenticate and manage users

github link : https://t.co/6gtp0XZlnD

#30DaysOfLockIn #react #java #JWT #springboot #springSecurity

[Adewole @coding_robin]

6months is like 2 years in tech space-time

Everything is all different it's a whole different universe

[Adewole @coding_robin]

havent written a single line of code in 6months

React looking like latin to me

what does any of these symbols mean ffs

[Adewole @coding_robin]

hello world

[Adewole @coding_robin]

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

[Adewole @coding_robin]

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

[Adewole @coding_robin]

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

[Adewole @coding_robin]

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

[Adewole @coding_robin]

straightforward enough implementation next!

#BuildInPublic #Nextjs15 #FormBuilder

[Adewole @coding_robin]

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

[Adewole @coding_robin]

next up: Form preview modal (the 4th piece of the builder layout)

- already created wireframe sketch for the form preview modal > https://t.co/Qmqu6qbT0k

#BuildInPublic #Nextjs15 #FormBuilder

[Adewole @coding_robin]

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

[Adewole @coding_robin]

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

[Adewole @coding_robin]

click field -> edit properties -> see changes on canvas instantly

TextField & NumberField fully interactive

#BuildInPublic #Nextjs15 #FormBuilder

[Adewole @coding_robin]

day 35 of FormMagik

properties panel now finally functional

spent today makin inputs(label, placeholder etc) actually work:

- change handlers

- Zod for validation (easy & fast)

- error states & messages

- real-time updates on canvas

#BuildInPublic #Nextjs15 #FormBuilder

[Adewole @coding_robin]

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

[Adewole @coding_robin]

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

[Adewole @coding_robin]

paper sketching before writing code improves clarity for me

live link to implementation flow -> https://t.co/PUnEoYIQZx

#BuildInPublic #Nextjs15 #FormBuilder

[Adewole @coding_robin]

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

[Adewole @coding_robin]

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

[Adewole @coding_robin]

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