Boxd-Pics
Boxd-Pics (working title) is a web application that lets me share my Letterboxd reviews as visually appealing images. I built this app because I wanted to share my reviews on Instagram without relying on tedious screenshots, which lacked the aesthetic appeal I was looking for.
How It Works
Using Boxd-Pics is simple and straightforward:
- Visit the web app here.
- Paste the link to your Letterboxd review in the input box.
- Click "Submit."
- Download your beautifully formatted review image!
You can optionally customize the background image and its position, but downloading your polished review is always the final step.
Now, sharing your reviews on social media is effortless—and they look great too.
My Role in the Project
I came up with the idea for Boxd-Pics and worked on the frontend, while a friend handled the backend. I’m responsible for creating new designs for how reviews are presented, and together, we implement features based on our strengths.
The frontend uses Next.js and Tailwind CSS, while the review images are generated using the Canvas API and Satori. The app is hosted on Vercel.
Why Build This?
A while ago, I went through a phase of posting monthly movie reviews on my old Instagram account. I’d screenshot my Letterboxd reviews, compile them into slides, and edit the collages to ensure the screenshots aligned perfectly with seamless background colors.
While I loved the aesthetic, the process was exhausting. Watching over 35 movies a month meant I couldn’t keep up with the effort required to create these posts.
That’s when I had the idea for Boxd-Pics—a tool that could automate the aesthetic side of things. However, I shelved the idea because I didn’t have access to the Letterboxd API at the time. Recently, I discovered that scraping was a viable alternative, and with a friend’s help, I brought the idea to life.
Initial Prototype
The initial version of Boxd-Pics was functional but had limitations.
We started with a basic design: users entered a review URL into an input box, and our API fetched the review details, which were then formatted into a 4:3 image. This image was styled with CSS and could be downloaded using a button powered by an NPM package.
However, there was a major issue.
The Responsive Design Problem
While the prototype was responsive, the downloaded image’s quality depended on the viewport size, which wasn’t ideal. For instance, mobile users couldn’t download the high-quality 1080p image I envisioned.
To address this, we turned to the Canvas API.
Enter the Canvas API
The Canvas API allowed us to decouple the image’s dimensions from the viewport size. I redesigned the image to a 1:1 aspect ratio using Canvas, ensuring consistent quality across devices. This improved design is what you see live today.
Current Status
Boxd-Pics is now fully functional, and we’ve even added features that weren’t part of our initial MVP. Here’s what we’re currently working on:
- Rendering parts of the image server-side instead of relying entirely on Canvas.
- Brainstorming new designs for the review images. We already have one new design ready, with more in the pipeline.
Future Plans
We aim to introduce pagination for long reviews, allowing them to span multiple images instead of truncating with "[...]".
While we’re not rushing development, this project has been an exciting journey of solving a personal problem and creating something I genuinely enjoy using. I look forward to refining Boxd-Pics further and seeing how it can help others share their movie reviews in style.