# Frontend Setup - Working ✅

## Current Status

Frontend is working with:
- ✅ React 19
- ✅ TanStack Query for data fetching from backend
- ✅ Inline styles (currently working)
- ✅ Article grid layout
- ✅ Loading and error states
- ✅ Shadcn/ui components installed but not configured yet

## Running the App

```bash
cd frontend
npm run dev
```

Visit: http://localhost:5173

## Current Data Flow

1. Frontend fetches from: `http://localhost:3000/api/v1/articles`
2. Backend (NestJS) returns articles from SQLite
3. Articles synced from Strapi CMS

## Next Steps for Styling

### Option 1: Keep Inline Styles (Simple)
Continue using inline styles in `App.tsx` - currently working fine.

### Option 2: Set Up Tailwind CSS (Recommended)
If you want to use shadcn/ui components properly:

1. Install shadcn CLI:
   ```bash
   npx shadcn@latest init
   ```
   This will configure Tailwind properly for your project.

2. Add components:
   ```bash
   npx shadcn@latest add button card badge
   ```

3. Use components in `App.tsx`
   ```tsx
   import { Button } from "@/components/ui/button"
   import { Card, CardHeader, CardTitle } from "@/components/ui/card"
   ```

## Adding More Articles

In Strapi CMS:
1. Create new article
2. Publish it
3. Sync to backend:
   ```bash
   curl -X POST http://localhost:3000/api/v1/webhooks/strapi/sync/all
   ```
4. Refresh frontend

## Services Running

- **Backend**: http://localhost:3000/api/v1
- **Frontend**: http://localhost:5173
- **Strapi CMS**: http://localhost:1337/admin (if running)

## Known Files

- `frontend/src/App.tsx` - Main app with article list
- `frontend/src/lib/api.ts` - API functions
- `frontend/src/lib/query-client.ts` - TanStack Query client
- `frontend/src/components/ui/card.tsx` - Card component
- `frontend/src/components/ui/button.tsx` - Button component

## To Revert to Inline Styles Only

If you want to remove Tailwind dependencies later:

```bash
cd frontend
npm uninstall tailwindcss tailwindcss-animate clsx tailwind-merge class-variance-authority lucide-react @radix-ui/react-slot
rm -rf src/components/ui
rm components.json tailwind.config.js
```

Then update `App.tsx` to use inline styles only.