Build a Cinematic Photo Gallery with Emergent

Build a complete, production-minded photo gallery application using the platform-provided FastAPI backend and React frontend. Do not ask follow-up questions. Treat every decision below as final and proceed autonomously. PRODUCT - Create a public photography gallery called "Nocturne Gallery." - Visitors can browse every published photo without creating an account or signing in. - Do not display public login, registration, profile, or account controls. - Create a separate protected administrator area at /admin. FIXED IMPLEMENTATION DECISIONS - Stack: Use the provided FastAPI backend and React frontend. - Database: Use the platform-provided database. - Administrator authentication: Use JWT-based custom authentication for exactly one administrator. - Read the administrator email and password only from secure server-side environment variables named ADMIN_EMAIL and ADMIN_PASSWORD. - Hash and verify the password securely. Never hard-code credentials, return them through an API, store plaintext passwords, or expose secrets in the frontend bundle. - Image storage: Use Emergent Object Storage for every administrator-uploaded image. Do not use local server disk storage. - Store photo metadata and object-storage references or URLs in the database. - Public users have read-only access to published photos. - Enforce all upload, create, update, publish, unpublish, and delete authorization in the FastAPI backend, not merely by hiding buttons in React. - Do not ask about authentication, image storage, database choice, theme, seed data, routes, or other implementation preferences. VISUAL DIRECTION - Use a cinematic, moody gallery aesthetic. - Use deep black and charcoal backgrounds with warm amber and champagne-gold accents. - Use large immersive photography, elegant editorial headings, restrained glassmorphism, soft gradients, subtle glows, and layered shadows. - Add gentle hover scaling, image reveals, and smooth fades. - Keep animation restrained and respect prefers-reduced-motion. - Provide strong contrast, visible keyboard focus states, and accessible controls. - Avoid bright colors, generic dashboard styling, excessive gradients, and flashy animation. PUBLIC GALLERY - Build a responsive masonry-style gallery for desktop, tablet, and mobile. - Add a compact header with the gallery name and subtitle. - Add category filter chips and one search field for titles and descriptions. - Add an optional featured-photo hero using the photo marked featured. - Show only published photos. - Sort first by displayOrder and then newest first. - Lazy-load gallery images and display polished skeleton placeholders. - Preserve image aspect ratios. - Include an attractive empty state. LIGHTBOX - Clicking a photo opens an elegant full-screen lightbox. - Include previous, next, and close controls. - Support left/right arrow keys, Escape to close, and mobile swipe gestures. - Show the photo title, description, category, and date. - Add smooth fade and restrained zoom transitions. - Trap keyboard focus while open and restore focus to the originating photo when closed. - Make controls clearly labeled for assistive technology. ADMIN BACKEND - Protect /admin with the single-administrator JWT login. - Do not provide public registration. - Allow the administrator to upload one or multiple photos. - Show previews and upload progress. - Validate JPG, PNG, and WebP files and enforce a reasonable configurable size limit. - Allow editing title, description, alt text, category, captured date, display order, featured status, and published status. - Allow replacing an image. - Allow publishing and unpublishing. - Allow deletion only after a confirmation dialog. - Provide search and filtering for existing photos. - Show clear loading, success, empty, and error states. - Ensure unpublished photos are excluded from public API responses and are not discoverable through predictable public routes. DATA MODEL Create a Photo model with: - id - objectKey or storage reference - imageUrl - thumbnailUrl when supported - title - description - altText - category - capturedAt - uploadedAt - displayOrder - isFeatured - isPublished Create a Category model if helpful, with: - id - name - slug - displayOrder INITIAL CONTENT - Seed the gallery with 10-12 tasteful remote Unsplash placeholder photos so it looks complete on first launch. - Create the sample categories Architecture, Landscapes, Portraits, Street, and Abstract. - Include realistic titles, short descriptions, accessible alt text, captured dates, and display-order values. - Mark one seeded photo as featured. - Publish all seeded photos. - Clearly distinguish seed records so the administrator can replace or delete them. - Avoid copying remote demo files into paid object storage unless required. - The gallery must still show an attractive empty state if all samples are deleted. ROUTES - / - public gallery - /admin - protected administrator dashboard - Add nested administrator upload or edit routes only if they improve usability. QUALITY REQUIREMENTS - Build a functional application, backend API, database models, object-storage integration, permissions, and admin workflow-not a static mockup. - Use reusable React components. - Sanitize metadata. - Handle expired JWTs cleanly and return the administrator to the login screen. - Do not log credentials or tokens. - Include clear setup notes for ADMIN_EMAIL and ADMIN_PASSWORD. - Test the public gallery, filters, lightbox keyboard behavior, administrator login, uploads, editing, publishing, unpublishing, and deletion. - Make sensible production-ready choices for any remaining minor decisions and do not pause for clarification.

Help me configure the administrator login for this project. Set up the server-side secret variables ADMIN_EMAIL and ADMIN_PASSWORD, then open or direct me to the secure Secrets or Environment interface so I can enter their values privately. Do not ask me to paste the email or password into chat, and do not place either value in client-side code, source files, logs, screenshots, or version control. After I save them, confirm the backend reads both variables at runtime and tell me whether the backend must be restarted or redeployed.

Audit and fix the existing photo gallery application without redesigning the established cinematic aesthetic. Keep the current colors, typography, and layout direction. Review and repair: - Accessibility: heading order, alt text, ARIA labels on lightbox and admin controls, visible keyboard focus states, color contrast, and prefers-reduced-motion support. - Mobile layout: header, filter chips, search field, masonry grid, lightbox controls, and admin forms at small widths. - Loading states: skeletons, upload progress, disabled buttons during requests, and clear success and error messages. - Broken images: graceful fallback when an image URL fails, and no layout shift. - Backend authorization: confirm every upload, create, update, publish, unpublish, and delete endpoint requires a valid administrator JWT, and that unpublished photos never appear in public API responses. - Secret exposure: confirm ADMIN_EMAIL and ADMIN_PASSWORD are only read server-side, are never returned by an API, never logged, and never bundled into the frontend. - Lightbox behavior: arrow keys, Escape, swipe gestures, focus trapping while open, and focus restoration to the originating photo when closed. Report what you changed and list anything you intentionally left alone.