Refactor: responsive upload page, fix warnings, CI/CD setup

- Fix MUI v4/React 18 StrictMode warnings (justify→justifyContent, Button migration)
- Responsive UploadDiary: footer visible without scroll, mobile layout centered, overview text hidden on mobile
- Fix Redux selector memoization with createSelector
- RSS sync: auto-refresh PosterSelector after sync, Snackbar feedback with film count
- Add .gitea/workflows/deploy.yml for tag-based CI/CD
- Fix nginx config (default.conf), increase Node heap for Docker build
- Update README

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-26 17:24:38 +02:00
parent 569e904ddd
commit 0dbcdcfcf4
31 changed files with 2896 additions and 1508 deletions

View File

@@ -1,15 +1,18 @@
# Movie Poster Gallery
# Letterboxd Diary Poster Picker
![Project Logo](/assets/project.jpg)
![Project Screenshot](/assets/project.png)
A web application that allows users to browse and select their favorite movie posters based on their Letterboxd diary.
A web application to browse and select your favorite movie posters from your Letterboxd diary.
## Features
- **Letterboxd Integration**: Import your movie diary directly from uploading a CSV file.
- **Poster Gallery**: Browse through posters of movies you've watched.
- **User-friendly Interface**: Intuitive design for easy navigation and selection.
- **Responsive Design**: Works seamlessly on desktop and mobile devices.
- **CSV Import**: Upload your Letterboxd diary export to load your full watch history.
- **RSS Sync**: Sync your ~50 most recent diary entries directly via your Letterboxd username — no export needed.
- **Poster Gallery**: Browse all available posters for each movie via TMDB.
- **Poster Selection**: Pick your favorite poster for each film.
- **Selection Recap**: Review all your selections in one place.
- **ZIP Download**: Download all selected posters as a ZIP file.
- **Responsive Design**: Works on desktop and mobile.
## Getting Started
@@ -17,6 +20,7 @@ A web application that allows users to browse and select their favorite movie po
- Node.js (v14.0.0 or later)
- npm (v6.0.0 or later)
- A running instance of the [backend](https://github.com/Hugyouu/Letterboxd-Diary-Posters-Picker-backend)
### Installation
@@ -48,18 +52,19 @@ A web application that allows users to browse and select their favorite movie po
## Usage
1. On the homepage, upload your diary CSV file.
2. Once processed, you'll be redirected to the Poster Selector page.
3. Browse through your watched movies and select your favorite posters.
4. (Add any additional steps or features here)
1. **Import your diary** — either upload a `diary.csv` exported from [letterboxd.com/data/export](https://letterboxd.com/data/export/), or enter your Letterboxd username to sync via RSS.
2. **Browse posters** — for each film in your diary, scroll through the available posters fetched from TMDB.
3. **Select a poster** — click to pick your favorite for each movie.
4. **Download** — use the download button in the header to export all selected posters as a ZIP.
## Technologies Used
## Technologies
- React.js
- Material-UI
- Backend private for now
- React / Redux
- Material UI
- Flask (backend)
- TMDB API
## Acknowledgments
- [Letterboxd](https://letterboxd.com/) for the inspiration and data (diary.csv)
- [The Movie Database (TMDb)](https://www.themoviedb.org/) for the movie poster images
- [Letterboxd](https://letterboxd.com/) for the diary data
- [The Movie Database (TMDb)](https://www.themoviedb.org/) for the poster images