Skip to content

README.md

Latest commit

 

History

History
87 lines (73 loc) · 2.85 KB

README.md

File metadata and controls

87 lines (73 loc) · 2.85 KB

🎬 Animatic Vision — Client (Next.js)

The frontend for the Animatic Vision platform. Built with Next.js App Router, it provides user authentication, a projects dashboard, project creation, and triggers server-side story segmentation. It communicates with the FastAPI backend using secure HttpOnly cookies.

🚀 Features

  • 🔐 Authentication — Register, login, logout, auto-refresh tokens, and load current user
  • 📁 Projects Dashboard — List, create, and view projects
  • 🧩 Story Segmentation Trigger — Call server to segment story into scenes
  • 🧭 App Router — Modern Next.js routing with layouts and route groups
  • 🎨 Responsive UI — Tailwind CSS 4 with shadcn/ui components

🏗️ Tech Stack

Layer Technology
Framework Next.js 16 / React 19
State / Data Redux Toolkit + RTK Query
API Handling RTK Query fetchBaseQuery (cookies included)
Styling Tailwind CSS 4, shadcn/ui (Radix UI)
Auth HttpOnly cookies (JWT) with FastAPI backend

📂 Notable Structure

src/
  app/
    (auth)/              # login, register, forget/reset password
    (main)/dashboard/    # dashboard and project detail pages
    StoreProvider.tsx    # Redux provider wrapper
    UnifiedProvider.tsx  # App-level providers
  redux/
    api/apiSlice.ts      # base query, refresh-token + me bootstrap
    features/auth/*      # auth slice and endpoints
    features/project/*   # project slice and endpoints
  components/
    Project/*            # project UI components
    ui/*                 # shadcn/ui primitives

⚙️ Setup & Installation

  1. Clone the client

    git clone https://github.com/your-org/animatic_vision_client.git
cd animatic-vision-client

  2. Install dependencies

    npm install
# or
yarn install

  3. Configure environment variables Create a .env.local in the project root:

    NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

  4. Run the development server

    npm run dev

  5. Build for production

    npm run build
npm start

🔌 Client-Server Integration

  • Cookies are HttpOnly and set by the server; the client sends them with requests via credentials: "include".
  • On app init, the store dispatches refreshToken then loadUser to bootstrap auth state.
  • Ensure the server CORS allows your client origin (default includes http://localhost:3000).

🧪 NPM Scripts

npm run dev      # Start Next.js in development
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

🧾 License

This project is licensed under the MIT License — you are free to use and modify it.

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you'd like to improve.