Gifalot

A full-stack media management platform for organizing GIF and video collections. Upload files, import from external sources, organize into collections, and browse through a full-screen carousel player with customizable layouts and transitions.

What it does

Architecture

Gifalot is a full-stack TypeScript application with a NestJS backend and React frontend communicating via RESTful APIs. Media files flow through the backend API to S3-compatible cloud storage, with Redis handling session caching and Bull managing background render jobs. The frontend uses Redux Toolkit for state management and Ant Design for the component library. The entire stack is containerized with Docker Compose and deployed behind Traefik with Nginx serving the SPA.

Tech stack

Frontend

  • React 18
  • TypeScript
  • Redux Toolkit
  • Ant Design
  • React Router v6
  • React DnD

Backend

  • NestJS
  • Passport.js (JWT)
  • Bull (job queues)
  • FFmpeg
  • Nodemailer

Data

  • MySQL 8
  • TypeORM
  • Redis
  • AWS S3

Infrastructure

  • Docker Compose
  • Nginx
  • Traefik
  • Jest