placebo.mk/FRONTEND_FINALIZED.md

# Frontend Setup Finalized ✅

## What's Working

- ✅ Tailwind CSS v4 (CSS-first approach - no config file needed)
- ✅ Shadcn/ui Card component with Tailwind classes
- ✅ Responsive grid layout (1/2/3 columns)
- ✅ Article data fetching from backend
- ✅ Loading, error, and empty states
- ✅ TypeScript path aliases (`@/`)
- ✅ shadcn/ui configuration (components.json)

## Configuration

### Tailwind CSS (v4 CSS-First)
All Tailwind configuration is in `src/index.css` using directives:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@theme {
  @custom-colors;
  @dark-mode;
}
```

**No `tailwind.config.js` file needed** - this is the v4 CSS-first approach.

### Shadcn/ui
- **components.json** - shadcn/ui configuration file
- **components/ui/card.tsx** - Card component with all sub-components
- **components/ui/button.tsx** - Button component (installed but unused)
- **utils.ts** - `cn()` utility for merging classes

### TypeScript
- Path aliases configured in `tsconfig.json`:
  ```json
  "paths": {
    "@/*": ["./src/*"]
  }
  ```

## Current Files

### Core App Files
- `src/App.tsx` - Main app component with article grid
- `src/main.tsx` - App entry point
- `src/lib/api.ts` - Backend API functions
- `src/lib/query-client.ts` - TanStack Query configuration

### UI Components
- `src/components/ui/card.tsx` - Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter
- `src/components/ui/button.tsx` - Button component (ready to use)

### Configuration
- `src/index.css` - Tailwind v4 CSS-first configuration
- `components.json` - shadcn/ui config
- `tsconfig.json` - TypeScript config with path aliases
- `vite.config.ts` - Vite configuration

## Restart Required

**Restart dev server:**
```bash
cd frontend
# Press Ctrl+C to stop current server
npm run dev
```

**Refresh browser:** Ctrl+Shift+R (hard refresh)

## What You Should See

- Clean white/light gray background
- "Placebo.mk" header in large bold text
- "Sarcastic news from Macedonia" subtitle
- Grid of article cards (responsive: 1/2/3 columns)
- Each card has:
  - White background with border and subtle shadow
  - Title (truncated to 2 lines)
  - Excerpt (truncated to 3 lines)
  - Content preview (truncated to 4 lines)
  - Footer with date and view count
- Hover effect adds shadow to cards

## Adding More Shadcn/ui Components

### Using CLI (Recommended)
```bash
cd frontend
npx shadcn@latest add [component-name]
```

### Available Components
- `badge` - For article tags
- `button` - Interactive elements (already installed)
- `input` - Search input
- `dialog` - Article detail modal
- `dropdown-menu` - Menus and filters
- `tabs` - Content organization
- `separator` - Visual separation
- `skeleton` - Loading placeholder
- `pagination` - Navigate articles
- `alert` - Notifications

### Manual Example

If CLI doesn't work, manual component setup:

1. Visit https://ui.shadcn.com/docs/components/[component]
2. Copy component code
3. Create: `frontend/src/components/ui/[component].tsx`
4. Import and use: `import { Component } from '@/components/ui/component'`

## Styling Customization

### Theme Colors (Edit `src/index.css`)

```css
:root {
  --background: 0 0% 100%;        /* Background color */
  --foreground: 222.2 84% 4.9%;    /* Text color */
  --primary: 222.2 47.4% 11.2%;       /* Primary brand color */
  --card: 0 0% 100%;                /* Card background */
  /* ... more variables */
}
```

### Tailwind v4 CSS-First Configuration

The `@theme` directive allows you to customize Tailwind directly in CSS:

```css
@theme {
  --color-primary: oklch(0.647 0.22 0.23);
  --font-sans: "Inter", sans-serif;
  --animate-fade-in: fade-in 0.5s ease-out;
}
```

## Known Limitations (Current Setup)

- No article detail page (clicking on cards doesn't navigate)
- No search functionality
- No category/tag filtering
- No dark mode toggle
- No pagination
- No article creation/editing (that's Strapi CMS)

## Quick Start Checklist

After restarting dev server:

- [ ] See styled article cards
- [ ] Check responsiveness (resize browser)
- [ ] Test dark mode (add toggle later)
- [ ] Add more articles in Strapi
- [ ] Add shadcn/ui components as needed

## Adding Article Detail Page

If you want to add navigation when clicking on cards:

1. Create `src/components/ArticleDetail.tsx`:
```tsx
import { useQuery } from '@tanstack/react-query'
import * as api from './lib/api'
import { Card, CardHeader, CardTitle, CardContent } from './components/ui/card'
import { Button } from './components/ui/button'

export function ArticleDetail({ articleId }: { articleId: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['article', articleId],
    queryFn: () => api.fetchArticleById(articleId),
    enabled: !!articleId,
  })

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error</div>
  if (!data) return null

  return (
    <Card className="max-w-3xl mx-auto">
      <CardHeader>
        <CardTitle>{data.title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div dangerouslySetInnerHTML={{ __html: data.content }} />
      </CardContent>
      <Button onClick={() => window.history.back()}>
        Back to Articles
      </Button>
    </Card>
  )
}
```

2. Update `App.tsx` to track selected article:
```tsx
const [selectedArticle, setSelectedArticle] = useState<string | null>(null)
```

## Next Steps

1. **Restart dev server and verify styling works**
2. **Add more articles** in Strapi CMS and sync
3. **Add shadcn/ui components** as needed
4. **Implement article detail view**
5. **Add search and filtering**
6. **Add dark mode toggle**
7. **Add pagination**

## Resources

- [Tailwind CSS v4 Docs](https://tailwindcss.com/docs/installation/using-postcss-css)
- [Shadcn/ui Documentation](https://ui.shadcn.com)
- [TanStack Query Docs](https://tanstack.com/query/latest)
- [Radix UI](https://www.radix-ui.com/)