Soroush.Asadi
79 lines
3.6 KiB
Plaintext
79 lines
3.6 KiB
Plaintext
# Project: FlatRender
|
|
# A Renderforest-style platform with Video Maker and Image Maker products.
|
|
|
|
## 🧠 Project Memory — READ THIS FIRST
|
|
# Before starting ANY task, read PROJECT_MEMORY.md at the project root.
|
|
# It contains: completed features, backlog, known bugs, architecture decisions,
|
|
# environment variable status, and the full file map.
|
|
# After completing a task, update PROJECT_MEMORY.md:
|
|
# - Move item from Backlog → Completed
|
|
# - Add any new bugs to Known Issues
|
|
# - Add a row to the Session Log with today's date and what changed
|
|
|
|
## Stack
|
|
- Next.js 14 App Router (never use pages/ directory)
|
|
- TypeScript (strict mode, no `any`)
|
|
- Tailwind CSS for all styling (no inline styles, no CSS modules)
|
|
- shadcn/ui for base components (import from @/components/ui)
|
|
- Framer Motion for animations
|
|
- Lucide React for icons
|
|
- Supabase for auth + database
|
|
- Zustand for client state
|
|
- react-hook-form + zod for forms
|
|
- Stripe for payments
|
|
|
|
## Folder Structure
|
|
- /app — Next.js routes only (page.tsx, layout.tsx, loading.tsx)
|
|
- /components/layout — Navbar, Footer, Sidebar
|
|
- /components/sections — Page sections (Hero, Pricing, FAQ, etc.)
|
|
- /components/ui — shadcn/ui components (do not edit these)
|
|
- /lib — supabase.ts, stripe.ts, utils.ts
|
|
- /hooks — custom React hooks
|
|
|
|
## Code Rules
|
|
- Every component is a named export, never default export from a file with multiple exports
|
|
- Use `cn()` from @/lib/utils for conditional Tailwind classes
|
|
- Server Components by default; add "use client" only when needed (event handlers, hooks, animations)
|
|
- All images use next/image with width/height or fill + sizes
|
|
- No hardcoded colors — use Tailwind palette only
|
|
- Primary brand color: blue-600 (#2563EB)
|
|
- No useEffect for data fetching — use React Server Components or SWR
|
|
- Zod schema defined before the form component, not inside it
|
|
|
|
## Design System
|
|
- Font: Plus Jakarta Sans (headings), Inter (body)
|
|
- Border radius: rounded-xl for cards, rounded-lg for buttons
|
|
- Shadows: shadow-sm default, shadow-xl for elevated cards
|
|
- Spacing scale: follow Tailwind defaults (don't invent custom values)
|
|
- Animations: max 400ms duration, ease-out easing, whileInView with viewport once:true
|
|
|
|
## Component Patterns
|
|
- Section components accept className prop for layout overrides
|
|
- Cards use: bg-white rounded-xl border border-gray-100 shadow-sm
|
|
- Primary button: bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-6 py-2.5
|
|
- All interactive elements have focus-visible ring for accessibility
|
|
- Empty states include an illustration placeholder + CTA button
|
|
|
|
## Products
|
|
- Video Maker: route /video-maker, accent color blue-600
|
|
- Image Maker: route /image-maker, accent color violet-600
|
|
|
|
## What NOT to do
|
|
- Never use <style> tags or styled-components
|
|
- Never use the pages/ router
|
|
- Never install axios — use native fetch
|
|
- Never add console.log to committed code
|
|
- Never create a component larger than 150 lines — split it
|
|
- Never skip TypeScript types on props — always define an interface
|
|
|
|
## Studio Modules
|
|
- Canvas editor uses React-Konva (never plain HTML5 canvas API)
|
|
- All canvas state lives in Zustand studio-store.ts
|
|
- ffmpeg.wasm runs in a Web Worker only (never on main thread)
|
|
- Studio pages are "use client" — they are 100% client components
|
|
- Timeline px-per-second default: 60 (1 second = 60px wide)
|
|
- Konva Stage base size: 1280x720 (scaled to container)
|
|
- Image editor and Video Studio share the same Layer type interface
|
|
- Server render API uses nexrender for After Effects pipeline
|
|
- Never block UI during ffmpeg processing — always show progress
|
|
- All studio panels are dark theme (bg-gray-900, text-white) |