Soroush.Asadi
58 lines
2.5 KiB
Plaintext
58 lines
2.5 KiB
Plaintext
# Project: CreatorStudio
|
|
# A Renderforest-style platform with Video Maker and Image Maker products.
|
|
|
|
## 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 |