A personal movie tracking application built for managing our shared movie collection. Features real-time database updates, TMDb API integration, and collaborative rating system. Includes a public demo mode for showcasing the project.
This is a personal project with a public demo mode for showcasing. Try the demo with these credentials:
- Username:
guest - Password:
demo
Note: The demo shows sample movies and read-only functionality. The full application is designed for personal use with private movie collections.
- Real-time Database - Powered by Firebase Firestore with live updates
- Movie Search - Integration with The Movie Database (TMDb) API for autocomplete search and real posters
- Dual Categories - "Watched" and "Want to Watch" lists
- Multi-user Ratings - Individual ratings from multiple users with automatic averaging
- Read-only Demo - Public demo mode with sample movies for showcasing
- Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
- Modern UI - Dark theme with glassmorphic design and smooth animations
- Frontend: React 18 (Hooks, Context)
- Backend: Firebase Firestore (NoSQL database)
- Hosting: Firebase Hosting
- API Integration: The Movie Database (TMDb) API
- Styling: Custom CSS with CSS Grid and Flexbox
- State Management: React Hooks (useState, useEffect, useCallback)
- Node.js 14+ and npm
- Firebase account (for your own deployment)
- TMDb API key (optional, for movie search functionality)
- Clone the repository:
git clone https://github.com/yourusername/movie-website.git
cd movie-website- Install dependencies:
npm install- Create a
.envfile in the root directory (see.env.example):
# TMDb API Key (optional - demo key will be used if not provided)
REACT_APP_TMDB_API_KEY=your_api_key_here
# Private user credentials (optional - for personal use only)
REACT_APP_USER_JACKSON=username:password:DisplayName
REACT_APP_USER_GENNA=username:password:DisplayName- Start the development server:
npm startThe app will open at http://localhost:3000
npm run buildfirebase deploy --only hostingsrc/
├── components/
│ ├── LoginScreen.js/css # Authentication UI
│ ├── Dashboard.js/css # Main dashboard with movie lists
│ ├── MovieCard.js/css # Individual movie display card
│ └── AddMovieModal.js/css # Movie search and add modal
├── firebase.js # Firebase configuration
├── App.js # Main application component
└── index.js # Application entry point
firestore.rules # Database security rules
firebase.json # Firebase configuration
This project implements several security measures:
- Protected Database: Real movie collections are private and inaccessible to the public
- Demo Mode: Read-only demo collection for showcasing
- Environment Variables: Sensitive credentials stored in
.env(not committed) - Firestore Rules: Strict access controls on database collections
See README_SECURITY.md for detailed security documentation.
- Add movies with TMDb autocomplete search
- Automatic poster fetching from TMDb API
- Move movies between "Watched" and "Want to Watch" lists
- Delete movies with confirmation
- Individual ratings from multiple users (0-10 scale, decimals allowed)
- Automatic average calculation
- Inline editing with save/cancel options
- Visual rating displays
- Confetti animation when marking movies as watched
- Loading states and empty state messages
- Responsive grid layout
- Smooth transitions and hover effects
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
This is a personal movie tracking application built for managing our shared movie collection. The public demo showcases the technical implementation and user interface, while the full application is designed for private use with personal movie data.
This is a personal project, but suggestions and feedback are welcome. Feel free to open an issue for any bugs or feature requests.
This project is open source and available under the MIT License.
- Movie data and posters provided by The Movie Database (TMDb)
- Hosted on Firebase