90 lines
2.1 KiB
Markdown
90 lines
2.1 KiB
Markdown
# 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.
|