Quick Reference Guide

Essential Commands

Development Commands

# Start development server
npm run dev
yarn dev

# Build for production
npm run build
yarn build

# Preview production build
npm run preview
yarn preview

# Type checking
npm run type-check
yarn type-check

# Lint code
npm run lint
yarn lint

# Fix linting issues
npm run lint:fix
yarn lint:fix

Git Commands

# Clone repository
git clone <repository-url>

# Check status
git status

# Add changes
git add .
git add <file>

# Commit changes
git commit -m "commit message"

# Push changes
git push origin main

# Pull latest changes
git pull origin main

# Create new branch
git checkout -b feature/branch-name

# Switch branches
git checkout main
git checkout feature/branch-name

# Merge branch
git merge feature/branch-name

# Delete branch
git branch -d feature/branch-name

SSH Commands

# Generate SSH key
ssh-keygen -t ed25519 -C "your-email@example.com"

# Add SSH key to agent
ssh-add ~/.ssh/id_ed25519

# Test SSH connection
ssh -T git@github.com

# Copy public key (Linux/Mac)
cat ~/.ssh/id_ed25519.pub | pbcopy

# Copy public key (Windows)
type ~/.ssh/id_ed25519.pub | clip

CSS Classes Quick Reference

Layout Classes

/ Flexbox /
.flex              / display: flex /
.flex-col          / flex-direction: column /
.items-center      / align-items: center /
.justify-center    / justify-content: center /
.justify-between   / justify-content: space-between /

/ Grid /
.grid              / display: grid /
.grid-cols-1       / grid-template-columns: repeat(1, minmax(0, 1fr)) /
.grid-cols-2       / grid-template-columns: repeat(2, minmax(0, 1fr)) /
.grid-cols-3       / grid-template-columns: repeat(3, minmax(0, 1fr)) /
.gap-4             / gap: 1rem /
.gap-6             / gap: 1.5rem /

/ Positioning /
.relative          / position: relative /
.absolute          / position: absolute /
.fixed             / position: fixed /
.top-0             / top: 0 /
.left-0            / left: 0 /
.right-0           / right: 0 /
.bottom-0          / bottom: 0 /

Spacing Classes

/ Padding /
.p-4               / padding: 1rem /
.px-4              / padding-left: 1rem; padding-right: 1rem /
.py-4              / padding-top: 1rem; padding-bottom: 1rem /
.pt-4              / padding-top: 1rem /
.pr-4              / padding-right: 1rem /
.pb-4              / padding-bottom: 1rem /
.pl-4              / padding-left: 1rem /

/ Margin /
.m-4               / margin: 1rem /
.mx-auto           / margin-left: auto; margin-right: auto /
.my-4              / margin-top: 1rem; margin-bottom: 1rem /
.mt-4              / margin-top: 1rem /
.mr-4              / margin-right: 1rem /
.mb-4              / margin-bottom: 1rem /
.ml-4              / margin-left: 1rem /

Typography Classes

/ Font Size /
.text-xs           / font-size: 0.75rem /
.text-sm           / font-size: 0.875rem /
.text-base         / font-size: 1rem /
.text-lg           / font-size: 1.125rem /
.text-xl           / font-size: 1.25rem /
.text-2xl          / font-size: 1.5rem /
.text-3xl          / font-size: 1.875rem /

/ Font Weight /
.font-normal       / font-weight: 400 /
.font-medium       / font-weight: 500 /
.font-semibold     / font-weight: 600 /
.font-bold         / font-weight: 700 /

/ Text Color /
.text-white        / color: #ffffff /
.text-black        / color: #000000 /
.text-primary      / color: hsl(var(--primary)) /
.text-secondary    / color: hsl(var(--secondary)) /
.text-muted-foreground / color: hsl(var(--muted-foreground)) /

Custom Project Classes

/ Glassmorphic Effects /
.glass             / Glassmorphic background /
.glass-dark        / Dark glassmorphic background /

/ Gradient Backgrounds /
.bg-gradient-primary    / Primary gradient background /
.bg-gradient-secondary  / Secondary gradient background /

/ Text Gradients /
.text-gradient-primary    / Primary gradient text /
.text-gradient-secondary  / Secondary gradient text /

/ Glow Effects /
.glow-blue         / Blue glow shadow /
.glow-purple       / Purple glow shadow /
.glow-subtle       / Subtle glow shadow /

/ Animations /
.float             / Floating animation /
.pulse-glow        / Pulsing glow animation /
.hover-scale       / Scale on hover /

GSAP Animation Patterns

Basic Animations

// Fade in
gsap.from('.element', {
  opacity: 0,
  duration: 1
});

// Slide up
gsap.from('.element', {
  y: 50,
  opacity: 0,
  duration: 1
});

// Scale in
gsap.from('.element', {
  scale: 0,
  opacity: 0,
  duration: 1,
  ease: "back.out(1.7)"
});

// Stagger animation
gsap.from('.elements', {
  y: 30,
  opacity: 0,
  duration: 0.8,
  stagger: 0.1
});

Scroll Trigger Animations

gsap.registerPlugin(ScrollTrigger);

gsap.from('.element', {
  y: 100,
  opacity: 0,
  duration: 1,
  scrollTrigger: {
    trigger: '.element',
    start: 'top 80%',
    end: 'bottom 20%',
    toggleActions: 'play none none reverse'
  }
});

Timeline Animations

const tl = gsap.timeline();

tl.from('.title', { y: 50, opacity: 0, duration: 1 })
  .from('.subtitle', { y: 30, opacity: 0, duration: 0.8 }, '-=0.5')
  .from('.content', { y: 20, opacity: 0, duration: 0.6 }, '-=0.3');

React Patterns

Component Structure

import React, { useState, useEffect, useRef } from 'react';
import { gsap } from 'gsap';

interface ComponentProps {
  title: string;
  description?: string;
  className?: string;
}

const MyComponent: React.FC<ComponentProps> = ({
  title,
  description,
  className
}) => {
  const [isVisible, setIsVisible] = useState(false);
  const elementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Animation logic
    const ctx = gsap.context(() => {
      gsap.from(elementRef.current, {
        opacity: 0,
        y: 50,
        duration: 1
      });
    }, elementRef);

    return () => ctx.revert();
  }, []);

  return (
    <div ref={elementRef} className={`component-class ${className}`}>
      <h2>{title}</h2>
      {description && <p>{description}</p>}
    </div>
  );
};

export default MyComponent;

Custom Hooks Pattern

import { useState, useEffect } from 'react';

export const useCustomHook = (initialValue: any) => {
  const [state, setState] = useState(initialValue);

  useEffect(() => {
    // Hook logic
  }, []);

  const updateState = (newValue: any) => {
    setState(newValue);
  };

  return { state, updateState };
};

Responsive Design Patterns

Breakpoint Usage

/ Mobile first approach /
.element {
  / Mobile styles /
}

/ Tablet and up /
@media (min-width: 768px) {
  .element {
    / Tablet styles /
  }
}

/ Desktop and up /
@media (min-width: 1024px) {
  .element {
    / Desktop styles /
  }
}

Tailwind Responsive Classes

/ Default (mobile) /
.text-sm

/ Small screens and up /
.sm:text-base

/ Medium screens and up /
.md:text-lg

/ Large screens and up /
.lg:text-xl

/ Extra large screens and up /
.xl:text-2xl

Debugging Commands

Browser DevTools

// Console debugging
console.log('Debug message');
console.error('Error message');
console.warn('Warning message');
console.table(data);

// Performance monitoring
console.time('operation');
// ... code to measure
console.timeEnd('operation');

// Network debugging
fetch('/api/data')
  .then(response => {
    console.log('Response:', response);
    return response.json();
  })
  .catch(error => {
    console.error('Error:', error);
  });

React DevTools

• Components Tab: Inspect component hierarchy
• Profiler Tab: Performance analysis
• Props Inspection: View component props and state
• Hooks Debugging: Debug custom hooks

Deployment Quick Commands

Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Production deployment
vercel --prod

Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy

# Production deployment
netlify deploy --prod

GitHub Pages

# Build project
npm run build

# Deploy to gh-pages branch
npx gh-pages -d dist

Common Issues & Solutions

Build Issues

# Clear node modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Clear Vite cache
rm -rf node_modules/.vite
npm run dev

TypeScript Issues

# Type checking
npx tsc --noEmit

# Generate types
npm run type-check

GSAP Issues

// Ensure ScrollTrigger is registered
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Cleanup animations
useEffect(() => {
  const ctx = gsap.context(() => {
    // animations
  }, ref);

  return () => ctx.revert(); // Important!
}, []);

Useful Resources

Documentation Links

• React Docs
• TypeScript Docs
• Tailwind CSS
• GSAP Docs
• Vite Docs

Tools & Extensions

• VS Code Extensions: ES7+ React/Redux/React-Native snippets, Tailwind CSS IntelliSense
• Browser Extensions: React Developer Tools, Redux DevTools
• Online Tools: Can I Use, Tailwind CSS Playground, GSAP CodePen

---

Keep this reference handy for quick lookups during development!