Out of the Weeds, Into the Future

Note: This post continues how to build a web app. We take a basic Next.js template and AI-troubleshoot our way to a rudimentary though functioning property listing application.

The most incredible aspect of AI-assisted web development isn't how it simplifies coding. It's how it streamlines the human experience of learning through guided failure.

Plumbing the depths of R, Stata, and the inescapable Excel need no longer involve painful and meandering searches through Stack Overflow while having your pre-frontal cortex bombarded by Google Ad non-sense.

We can work through hiccups and clean out the bugs within seconds, not hours. But it doesn’t change the basic fact that you still have to be an entrepreneur to be successful. To say that things are easier is not to say that opportunity is now gifted to you from the heavens.

As I embarked on building, as an example, a property listing application with no formal programming background, each obstacle - from baffling import paths to stubborn configuration files - can, as a matter of attitude, become not a deterrent but a catalyst for understanding. And something to quickly overcome, not a reason to go jump off a bridge.

This paradox mirrors what developmental psychologists have long observed: we learn most effectively not when spared from mistakes, but when allowed to make them within a supportive framework that transforms confusion into clarity through greater understanding.

What follows is the chronicle of how AI tools like Claude and Cursor serve not as replacements for human learning but as patient mentors, revealing that even in our increasingly automated world, the essence of skill acquisition and new venture creation remains stubbornly, wonderfully human.

The Local Development Environment

We start today in Cursor. To run the project locally we enter the following code into the terminal.

cd your-project-name
npm run dev

Super straightforward. This is what you will see. And if you are confused at all how we got here you can revisit a previous post where we worked through how to get started.

These commands start what's called a local development server, which is like setting up a mini version of the internet just on your computer. Instead of sending the website - as coded in Cursor - to the whole world, this server lets only you view and interact with the site as you build it — like testing a prototype in your workshop before showing it to others.

Once the command runs, your browser will open a special address (like http://localhost:3000 as shown above), taking us to the homepage of your project so we can see how it looks and works in real time.

From there, we can navigate to the "Examples" section, which will take us to a page from Vercel with additional resources and documentation.

We’ve reached fork in the road. How do we proceed?

Do we choose a template from here? Should we immediately start designing something in v0.dev or Lovable - semantic versions of Figma? Why not ask ChatGPT o3 and Claude to see what they recommend on the back of the work I did previously.

Faced with such uncertainty - too many options - here’s what I did: I shared the PDF version of the previous post and below here is what I received from Claude. The “attached article” referenced below is the PDF of the post.

If you are wondering who is Andrej Karpathy: he is a Stanford PhD graduate, co-founded OpenAI in 2015, led Tesla's Autopilot AI team from 2017 to 2022, and returned to OpenAI in 2023 to contribute to GPT-4's development. He shares his expertise through his YouTube series, Neural Networks: Zero to Hero, which offers a comprehensive, code-based introduction to deep learning concepts. He’s got some cool stuff on his website and he shares super helpful stuff on X about how to build apps with ChatGPT.

Anyway, before we proceed to ask for help from ChatGPT and Claude, let’s edit the above suggested prompt. Here is the slightly edited version.

I'm building a web app for a property catalogue and have made some initial progress setting up the development environment. I've got Cursor installed (with Pro subscription) as my code editor/AI assistant, and I've set up Volta to manage Node.js and npm installations to avoid permission issues.

So far, I've:
- Created a new Next.js project called "landmarket" using npx create-next-app@latest
- Selected all the recommended options (TypeScript, ESLint, Tailwind CSS, src directory, App Router, etc.)
- Configured Volta properly in my terminal environment
- Successfully launched the dev server with npm run dev and can access it at http://localhost:3000

The basic Next.js template is now running, but I haven't started customizing it for my property catalogue functionality yet. I'm not an experienced programmer, but I want to leverage modern AI-assisted tools to build this without having to learn everything about web development first.

What would you recommend as my next steps to start turning this into an actual property listing application? I'd like to have a page that shows property listings similar in style to Airbnb, with images, locations, prices, and other basic details. We will worry about the basic details later, first I want to have the catalogue set-up and looking sharp.

What We've Just Done

1. Set up and run the local development environment with npm run dev, creating a mini version of the internet on our computer that lets us view our site locally.

2. Reached a decision point and chose to consult AI assistants (Claude/ChatGPT) about how to proceed rather than diving into templates or design tools - at least for now.

3. Shared previous work with Claude as a PDF and then edited the generated prompt to better explain our project needs for building a property catalogue application.

Expert Advice

Let’s try putting this prompt into Claude and o3 to see what happens:

• Here is what I got from Claude: https://claude.ai/share/5545a080-8bb6-4b80-ab96-7d9348b50341

• Here is what I got from o3: https://chatgpt.com/share/681cc6e0-e840-8001-a815-ad824c5cadc9

I am going to use Claude to guide me right now on what to do in Cursor. For no reason other than I got a better feeling from its response.

Back to Cursor

I am going to continue to use the Claude chat/thread [https://claude.ai/share/5545a080-8bb6-4b80-ab96-7d9348b50341] from above to get the instructions for what to do in Cursor, one step at a time.

Here is what I am showing to Claude as my starting point.

And as you can see in the chat with Claude, with a few minor tweaks, I am able to get the specific instructions that I need to modify the structure in Cursor. Here is what we learn.

So I add those folders using Finder:

And then I add the missing files - as empty files - in Cursor.

Now that I have the structure set-up in Cursor, I ask Claude - still in the same chat thread - to explain this narrow first task that we want to execute in Cursor. Straightforward explanation.

Now we need the prompt from Claude to give to Cursor. Here it is.

We go back to Cursor:

We paste the prompt from above:

And then, with a few clicks - merely accepting the changes recommended by Cursor - this is what we get:

What We've Just Done

1. Used a Claude chat thread to get step-by-step instructions for our project structure, showing Claude our starting point and getting specific guidance.

2. Manually created the recommended folder structure in Finder and added empty files in Cursor based on Claude's instructions. Probably Cursor could have done this for us.

3. Pasted Claude's prompt directly into Cursor and accepted the AI-generated changes, quickly implementing the file structure and code needed for our rudimentary property catalogue.

Trouble Shooting

One of the major drawbacks of working with AI — especially LLMs — is that its successes (such as I have just done) are often irreproducible. This is why educators like Karpathy share their chat links.

Unlike traditional software, where a given input reliably produces a given output, LLMs operate probabilistically. Small changes in phrasing, prompt order, or context can yield wildly different results. This unpredictability makes it difficult to document, debug, or scale what "worked" once. Success isn’t a blueprint — it’s often a one-off, discovered through trial, error, and iteration.

See Rohit here:

Working with LLMs: A Few Lessons

It looks easy: write the prompt needed for the objective, give it to Cursor, click accept a few times. It is that easy in terms of the physical effort needed to click a few buttons.

But it’s worth understanding what Cursor is doing otherwise you will go nuts trying to replicate even what I have done here. No matter how transparent I am, you will still have a different experience.

As with any consultant, Cursor is like a hired programmer/developer and the clearer the instructions, the fewer the obstacles, the more effective the AI can be. You should understand how it can go wrong so that you can be clearer in your instructions but also how to respond to likely sources of variation.

While Cursor correctly understood the core objective - transforming the default Next.js homepage into a clean, minimalist property catalogue with a responsive layout, PropertyGrid component, and Tailwind CSS styling - several implementation hurdles emerged.

The disconnects occurred in four primary areas:

• path confusion

• empty component files

• duplicate import statements,

• and external resource configuration.

Path Confusion Problem

• What happened: During implementation, Cursor encountered file path confusion, struggling to locate files using paths like 'src/app/page.tsx' instead of 'landmarket/src/app/page.tsx', and mixing both absolute paths (@/components/PropertyGrid) and relative paths (../components/PropertyGrid) in the same file. This created a cascade of import errors and linter warnings that temporarily halted progress.

  

• Why it happened: The confusion stemmed from multiple factors including having the project folder named "landmarket" with code inside "landmarket/src/...", inconsistent usage of import styles, and Cursor's limited context about the complete file system structure. When referencing paths, the AI sometimes looked for files at the workspace root rather than the project root, or mixed absolute path syntax (@/) with relative path navigation (../).

• How to prevent it: We need to be explicit when instructing AI about file locations, specifying complete paths from the project root rather than relative positions.

Empty Files Problem

• What happened: Cursor discovered that while the folder structure had been created with placeholder files for components like PropertyCard.tsx and PropertyGrid.tsx, these files were completely empty, requiring implementation before they could be imported and used in the homepage.

  

• Why it happened: Empty files were created - as we walked through above - as placeholders without actual implementation. This approach created a disconnection between the expected component functionality and the reality of empty files, confusing the AI tool which expected to modify existing components rather than create them from scratch.

• How to prevent it: This wasn’t a big deal, Cursor just added the needed code to the containers.

Duplicate Imports and Linter Errors

• What happened: Cursor inadvertently created duplicate import statements in page.tsx, simultaneously using both absolute paths (@/components/PropertyGrid) and relative paths (../components/PropertyGrid) to reference the same components and data files. This redundancy triggered ESLint errors, flagging the unnecessary imports and potential confusion about which path the code was actually using.

• Why it happened: The duplication occurred because Cursor was trying different import strategies without fully removing previous attempts, likely due to uncertainty about which import method was properly configured in the project.

• How to prevent it: Again, not a big deal. Cursor created the problem and then fixed it without complaining. Without clear guidance on the preferred import convention or awareness of previous code it had generated, the AI hedged its bets by including both approaches, creating syntactically valid but logically redundant code.

External Image Domain Configuration

• What happened: After implementing the property listings with images from Unsplash, Next.js threw security errors because external image domains weren't explicitly allowed in the configuration, requiring additional steps to modify next.config.js and restart the development server.

  

• Why it happened: Next.js enforces strict security practices that require explicit whitelisting of external image domains before they can be used with the optimized Image component. This security feature prevents various vulnerabilities but wasn't accounted for in the initial implementation plan, leading to unexpected runtime errors after the component seemed otherwise complete.

• How to prevent it: We can explicitly mention these requirements in prompts, such as "We'll need to configure Next.js to allow Unsplash image domains." This proactive approach transforms potential stumbling blocks into planned milestones. But it’s also not a big deal.

Principle Lessons Principles

1. Path Absolutism

When working with AI coding assistants like Cursor, always specify absolute paths from the project root. The variability in AI's context window means it can't reliably track relative positioning within complex directory structures. For maximum reproducibility, use consistent path conventions. Don't assume AI knows where it is in the filesystem.

2. Component-First Development

Empty placeholder files sabotage AI's effectiveness. Implement core components before referencing them elsewhere in your codebase. AI will attempt to hallucinate contents of non-existent files to satisfy dependencies, creating irreconcilable implementation errors. This error type exhibits high entropy in solutions - each path correction introduces new deviations, making each attempt substantially different from previous ones.

3. Single Import Strategy

AI models tend to hedge uncertainty by pursuing multiple solutions simultaneously, especially with imports. Enforce a single, unambiguous import strategy throughout your project. When uncertain about import paths, AI will implement redundant approaches (both @/components and ../components) rather than commit to potentially incorrect solutions. This path redundancy cascades into deeper confusions about component identification and tree-shaking.

4. Configuration-Aware Prompting

Framework security constraints (like Next.js image domains) must be explicitly addressed in initial prompts rather than discovered through runtime errors. These configuration requirements aren't bugs but intentional security boundaries. They represent predictable failure points that, when anticipated, become simple implementation steps rather than mysterious errors. Always incorporate framework-specific configuration requirements into initial architecture plans.

System Reset

The final step in this workflow is the simplest yet most overlooked: restarting the website after making changes to its configuration files. Think of it like changing the rules of a game while it's being played — we need to restart the match for everyone to follow the new rules.

When we added permission for our website to display images from Unsplash, that new instruction sits in a file, waiting to be read. But the still-running website only reads these instructions when it first starts up, not continuously. Even with AI writing perfect code, your computer needs clear signals about when to apply new rules.

We restart the session in Cursor, just as we did at the beginning. To re-run the project locally we enter the following code into the terminal.

cd landmarket
npm run dev

Super straightforward, again.

Then we see what we are getting..

Guided Failure

We are now in an era where learning to build with AI mirrors how humans have always mastered complexity — not by front-loading exhaustive theory, but by engaging in iterative trial and error, with feedback loops tightly coupled to action.

Tools like Claude and Cursor embody this shift. They serve less as instructors and more as collaborators, letting us solve problems as they emerge, not in the abstract. This is not about outsourcing intelligence — it’s about reallocating cognitive bandwidth.

Instead of burning calories and cycles on syntax or boilerplate, we’re free to focus on architecture, intuition, and user experience. Most importantly, the business model.

Case in point: with our property listing app, we’ve seen firsthand how someone (i.e., me) with no formal or informal coding background can go from zero to a “working product”, not by lowering the bar, but by raising the leverage.

The friction is lower, the ambition can be higher — and that’s a serious productivity gain for me, you, and anyone else that wants to take control of their life.