Digikala Dynamic Presentation Generator

Overview

A platform built for Digikala to publish the sections of its annual report as interactive online presentations instead of static files. An employee or manager can assemble the sections they want into a ready-to-show deck and share its link for a meeting. The project has two halves: the viewer the audience sees, and the panel where decks are authored and managed.

The viewer — what the audience sees

Each deck opens through a unique link and an access key. The cover is a frosted-glass card over a background image showing the title, presenter, Jalaali date, and page count, with a single Start button into the slides. From there it's a fully right-to-left slideshow: pagination, animated slide transitions, data charts, and AI-generated imagery.

The admin panel — authoring & management

Where decks get made. After signing in (token-based auth), a user lands on a dashboard listing every presentation with its title, presenter, creation date, and slide count, plus edit, preview, and delete actions. Building a deck is two steps: a form for the cover page (unique link, background image, title, subtitle, presenter, date, and access key) and a drag-and-drop slide editor to add, reorder, and remove slides. Admins also manage and approve user accounts.

Under the hood

• React UI with modular styling via CSS Modules
• Server-state and caching with React Query (migrated off Context API to cut needless re-renders)
• Drag-and-drop slide editor with dnd-kit, forms handled with react-hook-form
• Charts with Chart.js, slide animations with Framer Motion
• Image uploads on Supabase, JWT-token authentication
• Jalaali dates with moment-jalaali, tested with Vitest and React Testing Library