LEVEL_UP
Skills that will make your vibe coding journey smoother. Not required to start, but they will save you headaches down the road.
npm i --legacy-peer-deps
WHEN_TO_USE
When you run npm install and get scary errors about "peer dependency conflicts" or "ERESOLVE unable to resolve dependency tree."
WHAT_ARE_PEER_DEPS?
Peer dependencies are packages that say "I need package X, but YOU should install it." It is like a recipe saying "bring your own eggs." Sometimes two packages disagree on which version of eggs they want.
WHY_THIS_EXISTS
npm v7+ became stricter about dependency conflicts. Older tutorials and packages were written for npm v6 which was more lenient. The --legacy-peer-deps flag tells npm to behave like the old version.
# When normal install fails:
npm install
# Try this instead:
npm install --legacy-peer-deps
# Or for a specific package:
npm install react-router-dom --legacy-peer-depsThis flag ignores version warnings. It usually works fine, but occasionally causes subtle bugs. If something acts weird later, dependency conflicts might be why.
If you always need this flag, create a file called .npmrc in your project with: legacy-peer-deps=true
.gitignore
WHAT_SHOULD_NEVER_BE_TRACKED
- Secrets: API keys, passwords, tokens (.env files)
- Dependencies: node_modules (reinstall with npm install)
- Build outputs: dist/, build/, .next/
- OS junk: .DS_Store, Thumbs.db
- Editor files: .vscode/, .idea/
HOW_TO_ADD_FILES
Create a file named .gitignore in your project root (the main folder of your project). Add one pattern per line. Files matching these patterns will be invisible to Git.
# Dependencies
node_modules/
vendor/
# Environment & Secrets
.env
.env.local
.env*.local
*.pem
# Build outputs
dist/
build/
.next/
out/
# OS files
.DS_Store
Thumbs.db
# Editor directories
.vscode/
.idea/
*.swp
# Logs
*.log
npm-debug.log*
# Cache
.cache/
.parcel-cache/If you already committed a secret, adding it to .gitignore will NOT remove it from history. You will need to rotate that secret and treat it as compromised.
Basic Git commands
Download a project to your computer
git clone https://github.com/user/repo.git
Get the latest changes from GitHub
git pull origin main
See what files have changed
git status
Stage all changes for commit
git add .
# or specific file:
git add filename.js
Save changes with a message
git commit -m "Add login button"
Upload commits to GitHub
git push origin main
The typical flow: git add . then git commit then git push. Always pull before you start working to avoid conflicts.
DB schemas / SQL basics
WHAT_IS_A_SCHEMA?
A schema is the structure definition for your database. It defines what tables exist, what columns each table has, and what type of data goes in each column (text, number, date, etc.).
WHEN_YOU_NEED_THIS
- Building apps that store user data
- Querying existing databases for stories
- Working with government data dumps
TOOLS_THAT_HELP
ORMs (Object-Relational Mappers) let you write database code without raw SQL:
# Get data
SELECT * FROM articles WHERE year = 2024;
# Get specific columns
SELECT title, author FROM articles;
# Add data
INSERT INTO articles (title, author)
VALUES ('My Story', 'Jane Doe');
# Update data
UPDATE articles
SET status = 'published'
WHERE id = 123;
# Delete data
DELETE FROM articles WHERE id = 123;
# Count things
SELECT author, COUNT(*) as total
FROM articles
GROUP BY author;You do not need to memorize SQL. Describe what you want to the AI: "Get me all articles from 2024, grouped by author, showing how many each wrote." The AI will write the query.
Auth basics
KEY_CONCEPTS_SIMPLIFIED
Stored in database: email, hashed password (never plain text!), profile info
"You are logged in" state. Server remembers who you are between page loads.
A secret string that proves identity. Like a VIP wristband at an event.
JWT_VS_SESSION_COOKIES
| - | Session Cookies | JWT Tokens |
|---|---|---|
| Storage | Server remembers | Client carries proof |
| Good for | Traditional websites | APIs, mobile apps |
| Complexity | Simpler | More flexible |
Security mistakes can expose user data. Password reset flows, session expiry, CSRF attacks, and more. One bug can compromise everything.
Do NOT build auth from scratch. Use battle-tested solutions:
Common dev jargon
An invisible box that groups content together. Like a folder in a filing cabinet. Most HTML layouts are divs inside divs.
A self-contained piece of UI you can reuse. Build a Button component once, use it 100 times. Change it once, updates everywhere.
A popup box that appears on top of everything else, usually dimming the background. "Are you sure you want to delete?" is typically a modal.
A visual container with borders/shadows that groups related content. Product listings, user profiles, and article previews are often cards.
Data you pass to a component. Like function arguments. <Button color="blue"> - "color" is a prop with value "blue".
Data that can change and causes the UI to update. A counter value, whether a menu is open, form input values - all state.
A way for programs to talk to each other. Your app asks an API for data, the API responds with a structured answer.
A specific URL in an API. /api/users might return users, /api/articles returns articles. Each is an endpoint.
"Run this function when something happens." onClick, onSubmit, onSuccess - these all take callbacks. It is code waiting to execute.
Reading docs instead of guessing
WHERE_TO_FIND_DOCS
- Official sites: docs.react.dev, nextjs.org/docs, tailwindcss.com/docs
- GitHub README: Most packages have docs in their repo
- npm page: npmjs.com/package/[name] links to docs
HOW_TO_READ_THEM
- Start with "Getting Started" or "Quick Start"
- Look for code examples - copy and modify them
- Use Ctrl+F to search for what you need
- Read the API reference when you need specifics
- Check the changelog for recent changes
HIERARCHY_OF_TRUST
Great for specific error messages and edge cases. But always check the date - a 2019 answer for React might be completely outdated. Look for recent answers or comments saying "this still works in 2024."
YouTube tutorials and Medium posts go stale fast. A "React tutorial" from 2021 might teach patterns that are now anti-patterns. Always cross-reference with official docs.
Asking AI better questions
THE_FORMULA
This simple structure gives the AI everything it needs to help you debug.
INCLUDE_IN_YOUR_PROMPTS
"I am building a Next.js 14 app with App Router and Tailwind..."
Copy the full error. Do not paraphrase. Include stack traces.
"Using React 18, TypeScript, Prisma with PostgreSQL..."
"I already tried clearing cache, reinstalling node_modules..."
"My code does not work. Can you fix it?"
"I am building a Next.js 14 app. When I click the submit button, I expect the form data to POST to /api/contact, but instead I get a 405 Method Not Allowed error. Here is my form component and API route: [code]. I tried adding method: 'POST' explicitly but same error."
- - Share your package.json versions
- - Include relevant file structure
- - Mention your OS (Mac/Windows/Linux)
- - Say what behavior you want, not just what is broken
Ready to level up?
These skills are not required to start vibe coding, but learning them will make you faster and more confident.
BACK TO VIBE CODING GUIDE