Cinetegrate Frontend (Imagine Reels)

Frontend for an AI video creation platform that turns ideas into structured stories, scenes, assets, narration, and final video outputs.

Snapshot

• Product focus: creator workflow from idea to rendered short video.
• Frontend scope: authenticated SaaS app with route guards, stateful multi-step pipeline, and API-driven project/stories/scenes management.
• Tech stack: React 19, TypeScript, Redux Toolkit + RTK Query, React Router 7, Tailwind CSS 4, Radix UI/shadcn, Vite 7.
• Engineering themes: modular feature architecture, resilient auth session handling, typed API contracts, and reusable UI primitives.

What This App Does

• User authentication and session-based access control.
• Project management (create, list, view, update status/visibility, delete).
• Story pipeline with step-by-step progression (story, scenes, narration, output flow).
• Scene and asset workflow support.
• User profile and app settings pages.
• Public marketing/help pages (About, Docs, Tutorials, API, policies).

Technical Highlights

• Route-level protection with authenticated and guest-only boundaries.
• Deep-link-safe auth redirect behavior for protected URLs.
• Centralized API layer via RTK Query with:
  • credentialed requests,
  • CSRF header injection,
  • automatic 401 refresh-session retry.
• Typed domain modeling for projects, stories, scenes, narration, and users.
• Feature-sliced organization: components, features, services, pages, types, constants.

Architecture At A Glance

• State management:
  • Global state in Redux Toolkit slices.
  • Server cache and API mutations in RTK Query.
• Routing:
  • Public routes and protected /app/* routes.
  • Guard components for guest/auth flows.
• API integration:
  • Base API configured in src/services/baseApi.ts.
  • Service modules per domain (auth, projects, stories, scenes, assets, narration, user).

Core Stack

• Framework: React 19 + TypeScript
• Build tool: Vite 7
• Styling: Tailwind CSS 4
• UI primitives: Radix UI + shadcn patterns
• State/API: Redux Toolkit + RTK Query
• Routing: React Router 7
• Forms/validation: React Hook Form + Zod

Getting Started

1) Prerequisites

• Node.js 20+
• npm 10+

2) Install dependencies

npm ci

3) Configure environment

Create .env.local in the project root:

VITE_API_URL=https://your-production-api.example.com

Notes:

• Development uses VITE_API_LOCAL_URL.
• Production build/runtime uses VITE_API_URL.

4) Run locally

npm run dev

App runs at http://localhost:5173 by default.

Available Scripts

• npm run dev - Start Vite development server
• npm run build - Type-check and build production bundle
• npm run preview - Preview production build locally
• npm run lint - Run ESLint

Docker (Development)

Build image:

docker build -t cintegrate-frontend .

Run container:

docker run --rm -p 5173:5173 cintegrate-frontend

Project Structure

src/
  components/      # reusable UI + domain components
  constants/       # domain constants
  features/        # Redux slices
  hooks/           # custom hooks (auth bootstrap, theme, redux helpers)
  pages/           # route-level pages (public and auth-only)
  routes/          # route guards
  services/        # RTK Query API services
  store/           # Redux store config
  types/           # TypeScript domain types
  utils/           # shared utility functions
  validation/      # Zod schemas

Key Areas To Explore

For a deeper understanding of the architecture and patterns used:

• src/App.tsx — route design and auth boundaries
• src/services/baseApi.ts — API integration strategy with credential handling
• src/pages/authOnly/SingleProject.tsx — feature-level component orchestration
• src/features/authSlice.ts — Redux state management for authentication
• src/routes/GuestRoute.tsx and ProtectedRoute.tsx — auth guard patterns