I Spent the Past Few Weeks Building a Cinema App with React & Firebase ๐ŸŽฌ

์ž‘์„ฑ์ž

์นดํ…Œ๊ณ ๋ฆฌ:

โ† ํ”ผ๋“œ๋กœ
DEV Community ยท Pam De Ramos ยท 2026-07-14 ๊ฐœ๋ฐœ(SW)

Pam De Ramos

Like many developers, I started this project with a simple idea:

“What if there was a place that made discovering films feel intentional again?”

That idea eventually became Cineaste.

Instead of trying to compete with streaming services, I wanted to build something for people who genuinely love cinemaโ€”whether that’s discovering forgotten classics, keeping track of what they’ve watched, or simply finding their next great film.

The Stack

I decided to keep the project relatively simple:

React
Firebase Authentication
Cloud Firestore
Firebase Hosting

For Premium memberships, I’m using Gumroad, and I’m currently preparing the site for Google AdSense for free users.

Cineaste Lifetime Access

๐ŸŽฌ Welcome to CineasteYour purchase includes lifetime access to the Cineaste cinematic discovery platform.ACCESS YOUR THE WEBSITE/APP:https://cineastefilm.orgHOW TO ACTIVATE: Free to Log-in, More Categories for Premium Users Premium access will be activated automatically or shortly after purchase (Please allow 30 minutes-8 hours for your account to be activated. It’ll be worth it. Thank you ) Features include: After-Hours Lounge – listen to curated radio stations, play mini games, news and your own cinema journal Late-Night Thought – quotes to inspire your film discovery Letterboxd list importing and direct link to the Letterboxd page per movie ‘Refresh List’ button, will give new list of movies, only clickable after watching the whole list currently showed on that category Short plot per film so basically no need to check another website, and search for the same movie plus RT, and awards integration Direct link to listed movie’s soundtrack on Spotify Direct link to each movieโ€™s Wikipedia page to complete immersion Minimal/no clutter design philosophy *Find the right film without endless scrolling*How to add Cineaste to your phone:iPhone: Open Cineaste in Safari, tap the Share button, scroll down, tap Add to Home Screen, then tap Add.Android: Open Cineaste in Chrome, tap the three-dot menu, tap Add to Home screen or Install app, then tap Add.Thank you for supporting independent creative software.

favicon pamelarose85.gumroad.com

Features

Some of the features I’ve built include:

๐ŸŽž๏ธ Curated film collections
โœ… Personal watch tracker
๐Ÿ“š Custom Letterboxd list importer
๐ŸŒ™ Late-Night Thoughts journal
๐ŸŽฒ Cineaste Sweep mini-game
๐Ÿฟ Tonight’s Pick
๐ŸŽญ Personal Cinema Profile
โญ Premium-only collections and features

One of the biggest changes I made recently was moving nearly all user data into Firestore so every signed-in user has their own unique experience.

Things like watched films, Cinema Profile, Tonight’s Pick, and game progress are now synced to each individual account instead of living only in local storage.

Things I Didn’t Expect

Building authentication ended up taking far longer than I expected.

Adding email verification, syncing user-specific data, handling Premium access, and making everything work seamlessly across devices turned out to be much more involved than simply calling a Firebase function.

I also discovered that a lot of the work happens outside of the “fun” featuresโ€”writing a Privacy Policy, Terms of Use, About page, responsive layouts, and all the small details that make an app feel complete.

Lessons Learned

A few things this project has reinforced:

Small improvements every day compound quickly.
Firebase is fantastic for solo developers.
UI polish takes longer than expectedโ€”but it’s worth it.
Building something people actually use is very different from building tutorials.
What’s Next

Now I’m focusing on:

Google AdSense approval
Final UI polish
Performance improvements

Please try it and upgrade to premium to support. ๐Ÿ˜›
Thanks for reading! ๐ŸŽฌ

์›๋ฌธ์—์„œ ๊ณ„์† โ†—

์ถ”์ถœ ๋ณธ๋ฌธ ยท ์ถœ์ฒ˜: dev.to ยท https://dev.to/japam28/i-spent-the-past-few-weeks-building-a-cinema-app-with-react-firebase-5f0l

์ฝ”๋ฉ˜ํŠธ

๋‹ต๊ธ€ ๋‚จ๊ธฐ๊ธฐ

์ด๋ฉ”์ผ ์ฃผ์†Œ๋Š” ๊ณต๊ฐœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•„์ˆ˜ ํ•„๋“œ๋Š” *๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค