Full-Stack - lesson 5 | HackIndia Skills

Key point

One rule

Environment config is for values that change by machine, deployment, or account. Code should not change when you move from your laptop to a teammate’s laptop or a hosting service.

Commit the example. Do not commit the real secret.

What belongs here

Put API keys, database URLs, auth secrets, and public base URLs in env files. For a weekend project, you may only have two or three values. That is fine.

Do not put normal UI text, button labels, or feature names in env files. Those belong in code.

Your to-do

Set the files

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Create a real .env.local file for your machine.
Create a .env.example file with the same variable names and safe dummy values.
Add .env.local and .env to .gitignore if your tool has not done it already.
Commit .env.example so teammates and reviewers know what to set.
Write setup instructions in README using the same variable names.

0 of 5 done

Example

Example env files

This is enough for many full-stack hackathon apps. The frontend calls your own API. The backend may call a database or third-party service.

.env.local
API_SECRET_KEY=replace_with_real_secret
DATABASE_URL=postgresql://user:password@localhost:5432/weekend_app
NEXT_PUBLIC_APP_URL=http://localhost:3000

.env.example
API_SECRET_KEY=your_secret_key_here
DATABASE_URL=your_database_url_here
NEXT_PUBLIC_APP_URL=http://localhost:3000

.gitignore
.env
.env.local

Common mistake

Public means public

In many frontend tools, env names with prefixes like NEXT_PUBLIC_ or VITE_ are exposed to the browser. Anyone can see them in built JavaScript.

Only put safe values there, like your app URL or a public analytics ID. Never put database URLs, private API keys, JWT secrets, or payment secrets there.

Example

Read values safely

Fail early if a required backend value is missing. A clear error is better than a broken demo during judging.

// lib/env.js
export function requiredEnv(name) {
  const value = process.env[name];

  if (!value) {
    throw new Error(`Missing environment variable: ${name}`);
  }

  return value;
}

// Example usage in a server route only
const apiSecretKey = requiredEnv('API_SECRET_KEY');

Tip

Use AI carefully

Ask ChatGPT or Gemini to draft your .env.example and README setup steps from your project files. Then check every variable name against the code.

Also check that it did not suggest committing real keys. If it shows a secret-looking value, replace it with a placeholder before you paste.

Prompt:
Read these file names and code snippets. List the environment variables this app needs. Create a safe .env.example and README setup section. Do not include real secrets.