Words You Need to Know

Essential terminology to communicate more effectively with AI when building web applications

Local/Remote, Development/Production

Understanding these fundamental concepts helps you communicate precisely about where issues occur and what environment you're working in.

Local vs Remote Files

The file copy of your code on your computer is called your 'local' file and the one on GitHub is called your 'remote' file.

Pro tip: Always specify whether an issue occurs locally, remotely, or both when asking for help.

Development vs Production Mode

The version of your site you see when running your 'local' file is called 'development mode' and the version of your site you see when running your 'remote' file is called 'production mode'.

Development (Local)

You see/interact with 'development' when running the site through your terminal:

http://localhost:3000/

Production (Remote)

You see/interact with 'production' when visiting the actual hosted site:

https://website.com/

Mobile/Desktop Responsiveness

Always check your app across different devices and be specific about which device experiences issues.

Device-Specific Communication

When something is wrong, specify which device is having problems. For example, if everything is fine on your desktop, then specify that the desktop version is perfect, but the mobile one needs adjustment.

Best practice: Be clear that you want no changes to the working version and specify changes should only apply to the problematic device.

Example: Good Communication

"The desktop version looks perfect - don't change anything there. The mobile version has the navigation menu overlapping the content. Please fix only the mobile layout."

Component Terminology

Knowing the correct names for UI components dramatically improves AI communication and results.

Why Terminology Matters

When describing what you want AI to make, it really helps if you know the name of the components you're referring to. If you're not sure what it's called, try to describe it or look up the name online first.

❌ Vague Request

"Make a thingy pop up when I press the button"

✅ Clear Request

"Open a modal when the button is pressed."

Another Example

❌ Vague Request

"Make things fade in"

✅ Detailed Request

"Use Framer Motion to fade in the elements within view. Make sure everything is not fading in at the same time and the elements that I need to scroll down to be able to see will fade in as they come into view once I scroll down."

Learning tip: Spend time familiarizing yourself with component names - it will give you much better control over your web application's design and development.

Environment Variables & .env Files

Essential for securely storing API keys, database URLs, and other sensitive configuration data.

What are .env files?

A .env file is where you store private keys and sensitive information (like API keys from OpenAI, MongoDB URLs, etc.) instead of putting them directly in your code.

Security rule: Never commit .env files to GitHub or share them publicly - they contain your secret keys.

Example .env file:

OPENAI_API_KEY=your_secret_key_here

DATABASE_URL=your_database_connection

Production deployment: You must also set these environment variables in your production environment (like Vercel) or your application won't work and you'll face errors when deployed.