66 lines
1.5 KiB
Markdown
66 lines
1.5 KiB
Markdown
# Frontend Setup Complete ✅
|
|
|
|
## What's Ready
|
|
|
|
### Frontend with Shadcn/ui
|
|
- Clean, minimalistic design
|
|
- Responsive grid layout for articles
|
|
- Loading and error states
|
|
- Card-based article display
|
|
- Dark mode support (configured)
|
|
- TypeScript + Tailwind CSS
|
|
|
|
### Components Available
|
|
- `Card` - Display article content
|
|
- `Button` - Interactive elements
|
|
|
|
### Routing
|
|
- Single page app with all articles on home page
|
|
- Easy to extend with more routes when needed
|
|
|
|
## How to Run
|
|
|
|
```bash
|
|
cd frontend
|
|
npm run dev
|
|
```
|
|
|
|
Visit: http://localhost:5173
|
|
|
|
## Adding More Components
|
|
|
|
Use shadcn/ui CLI:
|
|
```bash
|
|
npx shadcn@latest add [component]
|
|
```
|
|
|
|
Available components: badge, input, dialog, dropdown-menu, select, tabs, etc.
|
|
|
|
See `SHADCN_SETUP.md` for full documentation.
|
|
|
|
## Current State
|
|
|
|
- **Home page**: Displays all published articles as cards
|
|
- **Backend**: Fetches from `http://localhost:3000/api/v1/articles`
|
|
- **Strapi integration**: Articles sync from Strapi CMS
|
|
- **Articles**: Currently showing 1 article "first article"
|
|
|
|
## Next Steps for You
|
|
|
|
1. Add more articles in Strapi CMS
|
|
2. Run sync: `curl -X POST http://localhost:3000/api/v1/webhooks/strapi/sync/all`
|
|
3. Refresh frontend to see new articles
|
|
4. Add shadcn/ui components as needed:
|
|
```bash
|
|
npx shadcn@latest add badge input dialog
|
|
```
|
|
|
|
## Design Customization
|
|
|
|
Edit `frontend/src/index.css`:
|
|
```css
|
|
--primary: 222.2 47.4% 11.2%; /* Primary color */
|
|
--background: 0 0% 100%; /* Background */
|
|
--foreground: 222.2 84% 4.9%; /* Text color */
|
|
```
|