Next.js MVP with Animations

rewrite this as a prompt for CLIne: Cool project! To turn the news17 repo into a shippable MVP using Next.js, shadcn/ui, and Framer Motion, here’s a clear step-by-step plan: ⸻ 1. Understand news17 repo baseline • It’s a news aggregation site pulling in news articles, likely with an API. • You want to keep core features: • List news articles • Detail view per article • Basic filtering/search (if present) • MVP means polished UI + smooth UX but no bloated features. ⸻ 2. Setup the new Next.js project with shadcn/ui and Framer Motion Init Next.js npx create-next-app@latest news17-mvp cd news17-mvp Add shadcn/ui • Follow shadcn/ui installation npm install @shadcn/ui react-icons tailwindcss postcss autoprefixer npx tailwindcss init -p • Configure Tailwind per shadcn instructions. • Generate some base components with npx shadcn-ui init Add Framer Motion npm install framer-motion ⸻ 3. Bring over the data fetching logic from news17 repo • Identify API calls/news fetching in original repo. • Move the API calls into Next.js API routes or client-side data fetching using getServerSideProps or SWR or React Query for live data. Example with getServerSideProps: export async function getServerSideProps() { const res = await fetch('https://newsapi.example.com/latest') const news = await res.json() return { props: { news } } } ⸻ 4. Build the main pages with shadcn/ui components + Tailwind • Home page: List news articles with cards (using shadcn Card or custom) • Article page: Detailed article view with header, image, content Use Tailwind + shadcn primitives to make UI clean and consistent. ⸻ 5. Add Framer Motion animations • Animate article cards on hover or entrance (fade-in + slide-up) • Animate page transitions between listing and article detail Example for fade-in on card: import { motion } from 'framer-motion' <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} > {/* card content */} </motion.div> ⸻ 6. Responsive & accessibility checks • Use Tailwind’s responsive utilities • Use shadcn/ui’s accessible components (buttons, links, modals) ⸻ 7. Deploy MVP • Push code to GitHub repo • Deploy to Vercel (next.js first-class support) vercel login vercel ⸻ Summary: MVP Features • Next.js SSR/SSG for news data fetching • UI built with shadcn/ui components + Tailwind CSS • Animations for smoothness with Framer Motion • Responsive and accessible UI • Deployed live via Vercel with CI/CD ⸻ If you want, I can help generate a starter Next.js codebase integrating all three (news API fetching, shadcn UI, framer motion) — just say the word!

Here’s a rewritten prompt version tailored for **CLine** (your AI project builder): --- **Prompt for CLIne:** ```txt Create a shippable MVP based on the `news17` GitHub repo, using Next.js, shadcn/ui, Tailwind CSS, and Framer Motion. This is a news aggregation app that lists articles and shows a detail view. The MVP should focus on clean design and fluid UX, not feature bloat. Step-by-step tasks: 1. Initialize a new Next.js app called `news17-mvp`. - Use `npx create-next-app@latest news17-mvp` - Add Tailwind CSS, shadcn/ui, and react-icons. - Follow shadcn/ui setup steps and generate base components. - Install Framer Motion. 2. Port the original repo’s API/news fetching logic. - Identify how the original project fetches news data. - Use `getServerSideProps` or SWR/React Query to fetch data in Next.js. 3. Build core pages: - **Home page**: List articles using shadcn `Card` components. - **Article page**: Full detail view (title, image, content). - Use Tailwind for layout and responsiveness. 4. Add Framer Motion animations: - Fade-in + slide-up for article cards. - Animate page transitions between views. 5. Ensure responsive design and accessibility: - Tailwind responsive utilities. - Use shadcn/ui’s accessible components. 6. Deploy: - Push to GitHub - Deploy to Vercel (`vercel login` → `vercel`) Summary of goals: - Server-side rendered or statically generated news app. - Clean UI using shadcn/ui. - Smooth animations using Framer Motion. - Fully responsive, accessible. - Deployed live via Vercel. Output a production-ready codebase with these specifications. ``` --- Let me know if you'd like me to wrap this into a `.cln` config file format or generate the starter repo files directly.