Zero to Design Engineer

<article>
  <h2>Card title</h2>
  <p>Supporting copy.</p>
  <button>Take action</button>
</article>

.row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

const name = "Ada";            // string
const count = 3;              // number
const isActive = true;        // boolean
const tags = ["ux", "code"];   // array
const user = { id: 1, name: "Ada" }; // object

// .map() — transform every item (data → components)
const names = users.map((u) => u.name);

// .filter() — keep items that match a condition
const admins = users.filter((u) => u.role === "admin");

// .find() — get the first match
const ada = users.find((u) => u.id === 1);

const loadUser = async (id) => {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  return data;
};

interface User {
  id: number;
  name: string;
  role: "admin" | "member";  // union — only these values allowed
  avatarUrl?: string;           // ? = optional
}

const greet = (user: User): string => `Hi, ${user.name}`;

interface CardProps {
  name: string;
  role: string;
}

function ProfileCard({ name, role }: CardProps) {
  return (
    <article className="card">
      <h2>{name}</h2>
      <p>{role}</p>
    </article>
  );
}

// Used like:
<ProfileCard name="Ada" role="Design Engineer" />

import { useState } from "react";

function FavoriteButton() {
  const [favorited, setFavorited] = useState(false);
  return (
    <button onClick={() => setFavorited(!favorited)}>
      {favorited ? "★ Saved" : "☆ Save"}
    </button>
  );
}

{products.map((product) => (
  <ProductCard
    key={product.id}
    name={product.name}
    price={product.price}
  />
))}

src/
  components/     # reusable UI (Button, Card, Modal)
  features/       # components grouped by product area
  hooks/          # reusable logic (useAuth, useProducts)
  lib/ or utils/  # helper functions
  types/          # shared TypeScript interfaces
  styles/         # tokens, global styles

:root {
  --color-primary: #C4633F;
  --space-2:  8px;
  --space-4:  16px;
  --space-8:  32px;
  --radius-md: 4px;
}

# 1. Get the latest team code before starting
git pull

# 2. Create a branch for your work
git checkout -b feature/product-card-hover

# 3. Do your work and save files...

# 4. Stage your changes
git add .

# 5. Commit with a clear, present-tense message
git commit -m "Add hover state to ProductCard"

# 6. Send your branch to GitHub
git push

# 7. Open a Pull Request on GitHub ↗

<script setup lang="ts">
import { ref } from "vue";
interface Props { name: string; role: string; }
defineProps<Props>();
const favorited = ref(false);
</script>

<template>
  <article class="card">
    <h2>{{ name }}</h2>
    <p>{{ role }}</p>
    <button @click="favorited = !favorited">
      {{ favorited ? '★' : '☆' }}
    </button>
  </article>
</template>

<style scoped>
.card { padding: var(--space-4); }
</style>

import { render, screen } from "@testing-library/react";
import { ProductCard } from "./ProductCard";

test("shows the product name", () => {
  render(<ProductCard name="Notebook" price={12} />);
  expect(screen.getByText("Notebook")).toBeInTheDocument();
});

test("shows empty state when no products", () => {
  render(<ProductList products={[]} />);
  expect(screen.getByText(/no products/i)).toBeInTheDocument();
});