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

cd frontend
npm run dev

Visit: http://localhost:5173

Current Data Flow

Frontend fetches from: http://localhost:3000/api/v1/articles
Backend (NestJS) returns articles from SQLite
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:

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

Add components:

npx shadcn@latest add button card badge

Use components in App.tsx

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle } from "@/components/ui/card"

Adding More Articles

In Strapi CMS:

Create new article
Publish it

Sync to backend:

curl -X POST http://localhost:3000/api/v1/webhooks/strapi/sync/all

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:

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.

2.1 KiB Raw Blame History