I feel like I’m stuck in a weird middle ground right now between “beginner” and “accidentally building real projects”

For context, I run a WordPress-based gaming/tools site related to Delta Executor and most of the frontend has basically been built through:

• Elementor
• custom HTML/CSS sections
• massive ChatGPT prompts
• copying/editing snippets
• tweaking spacing/fonts/buttons manually until things finally look good

At first this actually felt amazing because I could suddenly build sections that looked WAY more modern than what I could normally do myself.

For example I’ve been building:

• custom hero sections
• animated buttons
• download sections
• sticky layouts
• comparison blocks
• custom cards
• responsive mobile sections
• CTA areas
• custom CSS effects

And honestly AI helped me reach results I probably never could’ve built alone.

BUT…

now my site feels like a giant pile of patched-together sections.

I’m running into problems like:

• duplicated CSS everywhere
• random spacing systems
• inconsistent typography
• mobile layouts breaking unexpectedly
• sections looking visually disconnected
• huge HTML/CSS blocks that I barely understand anymore
• changing one thing somehow affecting another section
• no real reusable component system
• impossible-to-maintain styling

Sometimes ChatGPT gives me a beautiful section but when I paste it into WordPress it clashes with 5 other things already on the site.

That’s what got me interested in Cursor and this whole “vibe coding” workflow everyone keeps talking about.

What I still genuinely don’t understand though is HOW people actually transition into that workflow properly.

Like if I already have:

• a live WordPress site
• Elementor layouts
• custom CSS snippets
• random custom code everywhere

…what exactly do I do first inside Cursor?

Do I:

• export my theme files?
• rebuild sections one by one?
• create reusable components?
• stop using Elementor?
• keep WordPress only as a CMS?
• build frontend separately?
• use Cursor mainly for organization/refactoring?

I think what I’m REALLY trying to learn is: how do you go from “AI generated snippets pasted into WordPress” to “an actually structured scalable frontend workflow.”

Because right now I feel productive but also incredibly unprofessional at the same time.

Would genuinely love advice from people who started from a non-programming background and slowly moved into proper AI-assisted development workflows for real projects.

I need a very basic beginner level step by step instructions too what to do how to do and where exactly to navigate. I feel I might be able to progress further but I need proper guidance to how I handle these things. Above all I want to learn these things myself. I get overwhemed by these YouTube videos and tutorials etc so need proper guidance on this.

I think the key thing here is that the value might look correct in the DOM, but Livewire only cares about its internal state.

With hidden inputs, nothing actually triggers an update, so even if the value is present in the HTML, it may never sync to the Livewire property.

A quick way to confirm would be:

– check the request payload in the network tab (is the field missing or just empty?)
– dump/log item_key right before submit to see if Livewire actually has the value

If it’s not there, then it’s probably not a “form issue” but more of a state sync issue between DOM and Livewire.

Are you updating item_key from backend logic or via JS/Alpine?

I think the key thing here is that the value might look correct in the DOM, but Livewire only cares about its internal state.

With hidden inputs, nothing actually triggers an update, so even if the value is present in the HTML, it may never sync to the Livewire property.

A quick way to confirm would be:

– check the request payload in the network tab (is the field missing or just empty?)
– dump/log item_key right before submit to see if Livewire actually has the value

If it’s not there, then it’s probably not a “form issue” but more of a state sync issue between DOM and Livewire.

Are you updating item_key from backend logic or via JS/Alpine?

@lailaih The suggestions about chunked uploads and async processing are definitely the right direction, but there’s another layer to consider once file sizes or volume increase.

The main issue isn’t just uploading — it’s everything happening after that:

– ZIP generation blocking the request – disk I/O spikes when handling multiple large files – downloads becoming slow or inconsistent under load

A more scalable approach is to split the flow:

1. Upload (chunked and stored safely)
2. Queue processing (ZIP generation in the background)
3. Serve the final file separately instead of generating it on demand

Also, serving large ZIP files directly from the application layer can become a bottleneck. Separating delivery from processing usually improves stability and response times.

One thing worth thinking about — how are you planning to handle cleanup of temporary files in this setup without risking deleting something still in use?

yeah that hits hard tbh 😅

I think that’s exactly what happened here — I kept doing “quick fixes” thinking I’ll clean it later, and now I’m basically paying for it

extracting component styles into a single place makes sense though, I guess right now everything is kind of scattered so even identifying what belongs to a “component” is part of the problem

like a button might have base styles in one place, hover somewhere else, and spacing overrides inside a section

I’m starting to realize I probably need to define a clean version of each component first and then slowly replace the old ones instead of trying to fix everything in place

did you ever go as far as doing a partial reset (like stripping a section back to almost raw styles) just to rebuild it clean, or do you usually refactor on top of what’s already there?

yeah that makes sense, I think what’s messing me up right now is that I don’t really have a clear “source of truth” anymore

like I’ll try to fix one section (say buttons), but then I realize there are like 4 slightly different versions of the same thing across the page

so even if I standardize one, I’m not sure if I’m actually fixing the system or just creating another variation again

right now I’m leaning toward slowly extracting patterns instead of touching everything at once

like:

• rebuild one clean button component
• then replace old ones gradually
• same for cards / sections

but it still feels a bit risky because everything is kind of interconnected

did you ever try isolating styles first (like resetting or removing overrides) before rebuilding components, or do you usually just start fresh inside the existing mess?

yeah that actually sounds like what I should’ve done from the start instead of redefining things everywhere

I think part of the problem now is I don’t even know what my “base” styles are anymore because everything got slightly modified over time

like even buttons or cards look similar but aren’t actually using the same structure underneath

did you ever run into a point where it just becomes easier to rebuild instead of trying to standardize something that’s already all over the place?

yeah that actually makes sense, I think one of my main issues is I didn’t structure anything from the start

everything was built section by section so even when I used classes, they ended up getting redefined in different places instead of reused properly

the separate css per component idea sounds way cleaner compared to what I’ve done

curious though — when you’re dealing with something that’s already messy like this, do you usually try to reorganize it gradually or just rebuild with a proper structure?

because right now it feels like fixing one part just creates problems somewhere else

Hey,

I’m working on a small project built on WordPress, but instead of using a proper theme structure I ended up building most of the UI using custom HTML + CSS blocks.

It worked fine early on, but now I’m starting to hit a wall.

Main issues I’m running into:

styles are duplicated across multiple sections I’ve relied too much on !important to override things no real global system for spacing / typography layout is inconsistent (mix of flex/grid depending on what worked at the time) small changes tend to break something else

At this point it feels like I’m constantly patching instead of improving anything.

So I’m trying to figure out the right move here from a dev perspective:

Do you usually refactor incrementally (cleaning styles section by section)? Or is this one of those cases where it’s better to scrap and rebuild properly with a structured system?

Curious how others approach this when a project reaches this stage.