As a developer, every project is a stepping stone, but some feel like climbing a mountain. My Movie App was one of those mountain full-stack applications that taught me more about perseverance, debugging, and the intricacies of deployment than any project ever could. Over several days (and nights), I built, broke, and rebuilt this app, turning a simple idea into a live, functional platform. Hosted on Netlify for the frontend and Render for the backend, with MongoDB Atlas handling the data, it's now live at usemovie-app.netlify.app
The Project Overview
The Movie App is a user-friendly platform where movie enthusiasts can browse popular films, view detailed information, watch trailers, receive personalized recommendations, save favorites, and contact support. It includes secure user authentication with registration, login, password reset, and profile management. The app is responsive across all devices, ensuring a seamless experience on both mobile and desktop.
The idea started simple: integrate the TMDB API for movie data and build a backend for user features. But as I dove in, deployment and integration challenges turned it into a real-world learning lab.
The Tech Stack: Tools That Powered the App
I chose tools that balanced ease of use, scalability, and learning potential. Here's the breakdown:
Frontend
React 19 with Vite: For the UI and fast development. Vite's hot module reloading sped up iteration, and React's component-based structure made it easy to build reusable pieces like MovieCard and NavBar.
React Router DOM: Handled client-side routing, with the registration page at the root/route for a smooth user onboarding experience.
State Management: React Context API for global state (e.g., user authentication).
Backend
Node.js and Express.js: The runtime and web framework for building the API.
MongoDB Atlas with Mongoose: Cloud database for storing users, subscriptions, contacts, and reset tokens. Mongoose ODM simplified schema definition and queries.
Authentication & Security: JWT for tokens, bcryptjs for password hashing, and crypto for reset tokens.
Email Service: Nodemailer for password reset emails using Gmail with App Passwords.
Environment Management: dotenv for managing secrets like JWT_SECRET, MONGODB_URI, EMAIL_USER, and EMAIL_PASS.
Deployment & Other Tools
Netlify: Hosted the frontend as a static site, with automatic deploys from GitHub.
Render: Hosted the backend, handling Node.js execution and environment variables.
GitHub: Version control for the frontend and backend directories.
TMDB API: For movie data, recommendations, trailers, and reviews.
Debugging Tools: MongoDB Compass for local database visualization, Postman for API testing, and curl for endpoint checks.
The stack was full-stack, teaching me how frontend and backend integrate, with deployment adding real-world complexity.
I deployed the backend to Render, but hit immediate roadblocks. The initial logs showed ECONNREFUSED errors when connecting to MongoDB, as I was using a local mongodb://localhost:27017/movie_db URI. Switching to MongoDB Atlas seemed straightforward, but then came querySrv ENOTFOUND, bad auth, and MongooseServerSelectionError. These stemmed from incorrect connection strings, missing database names (/movie_db), and IP whitelisting issues.
One frustrating moment was when the backend connected briefly but defaulted to the 'test' database instead of 'movie_db', leading to duplicate key errors on an old username_1 index from a previous schema. I learned to drop indexes via Atlas Dashboard and use Mongoose's schema to automatically create collections on first save - no need for manual migration if data isn't critical.
Debugging these taught me to always verify environment variables in Render (e.g., MONGODB_URI, JWT_SECRET), and to use mongosh in the terminal to test Atlas connections. I also added robust error handling in server.js to prevent crashes, like catching err.code === 11000 for duplicate keys. Overall, the project added to my developer journey by teaching resilience - errors like ECONNREFUSED and MongooseServerSelectionError forced me to dive into docs, whitelist IPs, and debug environment variables. It also highlighted the importance of secure practices like bcrypt hashing and JWT authentication.
Conclusion
This movie app was more than code; it was a test of patience and problem-solving. From deployment headaches to API integration, I emerged with stronger full-stack skills. Check out my app at usemovie-app.netlify.app and source code at github.com/Webziro/movie-app. I'd love feedback - happy coding.
Top comments (0)