**CinemAmbiente Media** is a full-stack web application built with **Remix.js v2.9** (Vite-based) and **React 18**, serving as the digital platform for the CinemAmbiente environmental film festival. The project leverages **DatoCMS** as its headless CMS through a deep, multi-layered integration.

Content is fetched via DatoCMS's **GraphQL Content Delivery API** using a lightweight custom client (`tiny-json-http`) with support for **environment-based endpoints** and **preview mode** (toggled via cookie-based sessions). A secondary integration uses the **DatoCMS Content Management API** (`@datocms/cma-client-node`) for server-side write operations, such as user management. GraphQL queries and fragments are co-located in dedicated `.graphql` files, with **full type generation** powered by `graphql-codegen` producing typed document nodes and TypeScript operations from the DatoCMS schema.

The architecture implements a **build-time data pre-fetching strategy**: init scripts paginate through DatoCMS to generate static JSON files for movies, directors, and topics across both locales, enabling fast client-side filtering and search (powered by **Fuse.js**) without runtime API calls for listing pages. Dynamic detail pages query DatoCMS at request time through Remix loaders. **DatoCMS webhooks** are consumed via dedicated API routes to trigger transactional emails through **Brevo** on content events (e.g., form submissions, new user registrations).

**Internationalization** (Italian/English) is handled with `remix-i18next` and `react-i18next`, with a custom routing layer that programmatically duplicates all routes under an `/en` prefix via Vite config, sharing the same page components across both locales. DatoCMS content is fetched locale-aware using the `SiteLocale` scalar.

Authentication is managed by **Clerk** (`@clerk/remix`), integrated with DatoCMS user records to gate access to a dashboard area featuring collections, contests, educational dossiers, role-playing activities, and storytelling modules. The UI is built with **Tailwind CSS**, **Framer Motion** for animations, **Headless UI** for accessible components, **Swiper** for carousels, **PhotoSwipe** for gallery lightboxes, and **ReactPlayer** for video embedding. The component library follows an atomic design structure (Atoms → Molecules → Organisms → Sections → Pages) and is documented in **Storybook 8**.

The project includes a comprehensive DX setup with **TypeScript**, **Vitest** for unit testing, **Cypress** for E2E, **ESLint + Prettier** with **Husky** pre-commit hooks, and **lint-staged** for incremental formatting.