Tech Stack
Filmify is a data-heavy platform, constantly juggling Letterboxd user data, TMDb film and person data, and our hand-gathered diversity data. Throughout our two semesters working on this project, our tech stack has evolved a lot! We are giving you a peek into what it looks like now.
API
Our API powers everything at Filmify, from our internal data management tools to the analysis experience in our web app. After some initial investigation into different technologies, we settled on NestJS, a scalable Node.js framework built on top of Express.
NestJS allowed us to split our code into comprehensive feature modules and use the power of TypeScript to ensure our data was always the right shape. NestJS also has a large community that manages an even larger collection of plugins, including TypeORM for managing our Postgres database; Bull for queuing Letterboxd import analyses; Socket.IO for communicating to the client with WebSockets; and Swagger for internal API documentation.
Admin
When the idea of Filmify first came to fruition, we knew one thing was true: we needed to manage content. A lot of content. Traditionally, the role of managing content is held by the aptly named content management system, or CMS. However, we found that existing CMSs like Sanity were limited in how much they could interact with external services like TMDb.
Despite being a major lift to build, we decided the best path forward would be to craft a custom admin application. With some simple designs at hand, we built the admin from the ground up using React and TypeScript for our UI logic, Tailwind CSS for styling components, and SWR for fetching data from our API. We also utilized various other libraries like Fuse.js and react-beautiful-dnd to build client-side search and drag-and-drop experiences, respectively.
What can an admin do on the platform? After a Filmify team member logs in, they can:
- manage internal mappings between Letterboxd and TMDb film data
- update gender and race data for persons
- create new lists for the discover page
- perform global searches for any film or person on TMDb
- oversee users and their Letterboxd import activity
Web
The final piece of the puzzle is our main web platform at filmify.app where users (you!) can interact with our data to get statistics on the films in their watch history, find new diverse films to dive into, and learn more about the current issues within the industry. Since the entire team would be involved in the development of the web app, we opted to use some familiar technologies: React for our UI logic, SCSS modules for styling components, and SWR for fetching data from our API. We also added various other libraries like anime.js and Swiper for JavaScript-based animations and film carousels, respectively.
We can’t wait to show you what our platform has to offer! Stay tuned on our Medium page for more weekly sneak peeks of our design and development process behind the scenes.
To get a notification when we launch, join the new waitlist on our site! We hope to see you there! ✌️
