{"id":31758585,"url":"https://github.com/mohamed-elfar/usepopcorn","last_synced_at":"2026-05-18T10:36:48.558Z","repository":{"id":318049778,"uuid":"1069825322","full_name":"Mohamed-Elfar/usePopcorn","owner":"Mohamed-Elfar","description":"🍿 Modern React movie app with real-time search, personal ratings \u0026 watchlist management. Features component separation, useEffect patterns, API integration with OMDB, and clean architecture. Perfect for learning React hooks, state management, and deployment practices.","archived":false,"fork":false,"pushed_at":"2025-10-04T18:02:32.000Z","size":190,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-13T22:43:49.567Z","etag":null,"topics":["frontend","javascript","learning-project","movie-app","omdb-api","react","spa","star-rating-component","web-development"],"latest_commit_sha":null,"homepage":"https://use-popcorn-yzv6.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mohamed-Elfar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-04T17:38:21.000Z","updated_at":"2025-10-04T18:02:36.000Z","dependencies_parsed_at":"2025-10-04T19:26:07.734Z","dependency_job_id":null,"html_url":"https://github.com/Mohamed-Elfar/usePopcorn","commit_stats":null,"previous_names":["mohamed-elfar/usepopcorn"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mohamed-Elfar/usePopcorn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Elfar%2FusePopcorn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Elfar%2FusePopcorn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Elfar%2FusePopcorn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Elfar%2FusePopcorn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mohamed-Elfar","download_url":"https://codeload.github.com/Mohamed-Elfar/usePopcorn/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohamed-Elfar%2FusePopcorn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33175039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","javascript","learning-project","movie-app","omdb-api","react","spa","star-rating-component","web-development"],"created_at":"2025-10-09T20:47:20.715Z","updated_at":"2026-05-18T10:36:43.548Z","avatar_url":"https://github.com/Mohamed-Elfar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍿 usePopcorn - Movie Database \u0026 Watchlist App\n\nA modern React application for discovering movies and managing your personal watchlist. Built with React hooks, featuring real-time movie search, ratings, and a comprehensive movie details view.\n\n## 🌟 Features\n\n- **Movie Search**: Real-time search functionality using the OMDB API\n- **Movie Details**: Comprehensive movie information including plot, cast, director, and ratings\n- **Personal Ratings**: Rate movies with a custom star rating component\n- **Watchlist Management**: Add and remove movies from your personal watchlist\n- **Statistics Dashboard**: View statistics about your watched movies\n- **Responsive Design**: Works seamlessly on desktop and mobile devices\n- **Component-Based Architecture**: Clean, modular React components\n\n## 🚀 Live Demo\n\n[Live Demo](https://use-popcorn-yzv6.vercel.app/)\n\n## 🛠️ Technologies Used\n\n- **React 19** - Modern React with hooks\n- **JavaScript ES6+** - Modern JavaScript features\n- **CSS3** - Custom styling\n- **OMDB API** - Movie database API\n- **Vercel** - Deployment platform\n\n## 📚 Learning Objectives\n\nThis project demonstrates practical usage of several React concepts:\n\n### useEffect Hook Patterns\n\n1. **Data Fetching Effect**\n\n   ```javascript\n   useEffect(() =\u003e {\n     async function fetchMovies() {\n       // API call logic\n     }\n     fetchMovies();\n   }, [query]); // Runs when query changes\n   ```\n\n2. **Cleanup Function**\n\n   ```javascript\n   useEffect(() =\u003e {\n     const controller = new AbortController();\n     // fetch with abort signal\n     return () =\u003e controller.abort(); // Cleanup\n   }, [query]);\n   ```\n\n3. **Conditional Effect Execution**\n   ```javascript\n   useEffect(() =\u003e {\n     if (query.length \u003c 3) {\n       setMovies([]);\n       return;\n     }\n     // Only fetch when query is long enough\n   }, [query]);\n   ```\n\n### Component Architecture\n\n- **Separation of Concerns**: Each component has a single responsibility\n- **Props Pattern**: Data flows down through props\n- **Event Handler Pattern**: Events bubble up through callback props\n- **Custom Hooks Potential**: Reusable stateful logic (can be extracted)\n\n### State Management Patterns\n\n- **Derived State**: Calculating values from existing state\n- **State Updates**: Using functional updates for complex state changes\n- **Conditional Rendering**: Showing different UI based on state\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── components/\n│   ├── Box.js              # Collapsible container component\n│   ├── ErrorMessage.js     # Error display component\n│   ├── Loader.js           # Loading spinner component\n│   ├── Logo.js             # App logo component\n│   ├── Main.js             # Main layout component\n│   ├── Movie.js            # Individual movie item\n│   ├── MovieDetails.js     # Detailed movie view\n│   ├── MoviesList.js       # Movie search results list\n│   ├── Navbar.js           # Navigation bar\n│   ├── NumResults.js       # Results counter\n│   ├── Search.js           # Search input component\n│   ├── WatchedMovie.js     # Individual watched movie item\n│   ├── WatchedMoviesList.js # Watched movies list\n│   └── WatchedSummary.js   # Watchlist statistics\n├── App.js                  # Main application component\n├── StarRating.jsx          # Reusable star rating component\n├── index.css              # Global styles\n└── index.js               # App entry point\n```\n\n## 🔧 Installation \u0026 Setup\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/your-username/usepopcorn.git\n   cd usepopcorn\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Get OMDB API Key**\n\n   - Visit [OMDB API](http://www.omdbapi.com/apikey.aspx)\n   - Sign up for a free API key\n   - Replace the API key in `src/App.js`:\n\n   ```javascript\n   const key = \"your-api-key-here\";\n   ```\n\n4. **Start development server**\n\n   ```bash\n   npm start\n   ```\n\n5. **Build for production**\n   ```bash\n   npm run build\n   ```\n\n## 🌐 Deployment\n\n### Deploy to Vercel\n\n1. **Install Vercel CLI**\n\n   ```bash\n   npm i -g vercel\n   ```\n\n2. **Deploy**\n   ```bash\n   vercel\n   ```\n\n### Deploy to Netlify\n\n1. **Build the project**\n\n   ```bash\n   npm run build\n   ```\n\n2. **Upload the `build` folder to Netlify**\n\n### Environment Variables\n\nFor production deployment, consider using environment variables for the API key:\n\n```javascript\nconst key = process.env.REACT_APP_OMDB_API_KEY || \"your-fallback-key\";\n```\n\n## 🎯 Key Learning Points\n\n### 1. useEffect for Side Effects\n\n- **Data Fetching**: Making API calls when component mounts or dependencies change\n- **Cleanup**: Preventing memory leaks and race conditions\n- **Dependency Array**: Controlling when effects run\n\n### 2. Component Communication\n\n- **Props Down**: Passing data from parent to child components\n- **Events Up**: Child components communicate with parents via callback functions\n- **State Lifting**: Moving state to common ancestor when multiple components need it\n\n### 3. Event Handling Patterns\n\n- **Synthetic Events**: React's cross-browser event system\n- **Event Handlers**: Functions that respond to user interactions\n- **Prevent Default**: Controlling browser default behaviors\n\n### 4. Conditional Rendering\n\n- **Loading States**: Showing spinners during async operations\n- **Error States**: Displaying error messages when things go wrong\n- **Empty States**: Handling cases when there's no data to display\n\n### 5. Performance Considerations\n\n- **AbortController**: Cancelling fetch requests to prevent race conditions\n- **Functional Updates**: Using functions in setState for better performance\n- **Key Props**: Proper key usage in lists for efficient re-rendering\n\n## 🐛 Common Issues \u0026 Solutions\n\n### 1. API Key Issues\n\n- **Problem**: 401 Unauthorized errors\n- **Solution**: Ensure your OMDB API key is valid and not expired\n\n### 2. CORS Issues\n\n- **Problem**: Cross-origin request blocked\n- **Solution**: OMDB API supports CORS, but ensure you're making requests from allowed domains\n\n### 3. Search Performance\n\n- **Problem**: Too many API calls during typing\n- **Solution**: Consider implementing debouncing for search input\n\n## 🔮 Future Enhancements\n\n- [ ] Add debounced search to reduce API calls\n- [ ] Implement local storage for watchlist persistence\n- [ ] Add movie recommendations\n- [ ] Include trailer integration\n- [ ] Add user authentication\n- [ ] Implement advanced filtering and sorting\n- [ ] Add movie reviews and comments\n- [ ] Create shareable watchlists\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\n## 🤝 Contributing\n\n1. Fork the project\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the MIT License.\n\n## 🙏 Acknowledgments\n\n- [OMDB API](http://www.omdbapi.com/) for providing movie data\n- [React](https://reactjs.org/) team for the amazing framework\n- Jonas Schmedtmann for the course inspiration\n\n---\n\nMade with ❤️ and React\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamed-elfar%2Fusepopcorn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohamed-elfar%2Fusepopcorn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamed-elfar%2Fusepopcorn/lists"}