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
- Create and manage media collections with public/private visibility settings
- Upload files directly or import from GIPHY, Klipy, and Redgifs APIs
- Full-screen carousel player with multiple slide templates, keyboard navigation, and auto-advance
- Favorites system with trending discovery across users and collections
- Server-side video rendering with FFmpeg and background job queue processing
- JWT authentication with refresh tokens, password reset via email, and rate limiting
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