placebo.mk/FRONTEND_READY.md

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

cd frontend
npm run dev

Visit: http://localhost:5173

Adding More Components

Use shadcn/ui CLI:

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:

   npx shadcn@latest add badge input dialog
   

Design Customization

Edit frontend/src/index.css:

--primary: 222.2 47.4% 11.2%;  /* Primary color */
--background: 0 0% 100%;       /* Background */
--foreground: 222.2 84% 4.9%;    /* Text color */