{"id":47665033,"url":"https://github.com/dulanjayabhanu/screenpath","last_synced_at":"2026-04-02T11:54:15.044Z","repository":{"id":342974190,"uuid":"1175098834","full_name":"dulanjayabhanu/screenpath","owner":"dulanjayabhanu","description":"A distraction-free movie discovery platform designed to help users find films faster with focused search, structured filters, and clear movie insights.","archived":false,"fork":false,"pushed_at":"2026-03-31T05:58:19.000Z","size":1165,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-31T07:17:49.179Z","etag":null,"topics":["adfree","calm","distraction-free","movie-discovery-app","movie-search-web","movies-and-cinemas","movies-rate","react","shadcn-ui","tailwindcss","tanstack-query","tmdb-api","vite","zod"],"latest_commit_sha":null,"homepage":"https://screenpath.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dulanjayabhanu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","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":"2026-03-07T08:16:42.000Z","updated_at":"2026-03-31T05:28:06.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dulanjayabhanu/screenpath","commit_stats":null,"previous_names":["dulanjayabhanu/screenpath"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/dulanjayabhanu/screenpath","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulanjayabhanu%2Fscreenpath","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulanjayabhanu%2Fscreenpath/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulanjayabhanu%2Fscreenpath/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulanjayabhanu%2Fscreenpath/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dulanjayabhanu","download_url":"https://codeload.github.com/dulanjayabhanu/screenpath/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulanjayabhanu%2Fscreenpath/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31305900,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T09:48:21.550Z","status":"ssl_error","status_checked_at":"2026-04-02T09:48:19.196Z","response_time":89,"last_error":"SSL_read: 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":["adfree","calm","distraction-free","movie-discovery-app","movie-search-web","movies-and-cinemas","movies-rate","react","shadcn-ui","tailwindcss","tanstack-query","tmdb-api","vite","zod"],"created_at":"2026-04-02T11:54:12.293Z","updated_at":"2026-04-02T11:54:15.031Z","avatar_url":"https://github.com/dulanjayabhanu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"/docs/images/screenpath-main-poster.webp\" alt\"ScreenPath main poster\" /\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://screenpath.vercel.app\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/Live_Demo-Open_App-0a0a0a?style=for-the-badge\u0026logo=vercel\u0026logoColor=fafafa\u0026labelColor=171717\u0026color=737373\" alt=\"ScreenPath live demo button\" /\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n# ScreenPath\n### Your calm path to the perfect movie\n\n\u003cbr\u003e\n    \nScreenPath is a focused movie discovery platform designed to help users find films quickly without the distractions that commonly appear in modern entertainment browsing platforms.\n\nThe application provides a clean and minimal interface that allows users to search, filter, and explore movies while maintaining clarity and simplicity. By reducing visual noise and unnecessary interface elements, ScreenPath aims to make the movie discovery process efficient and comfortable.\n\nScreenPath integrates with the TMDB API to retrieve movie data and presents it through a structured and distraction-free browsing experience.\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"/docs/images/screenpath-feature-card.webp\" alt\"ScreenPath feature card\" /\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## The Problem\n\nModern movie discovery platforms often prioritize engagement over usability. Many popular applications introduce numerous interface elements that compete for attention, including:\n\n* autoplay trailers\n* excessive recommendations\n* promotional banners\n* visually overwhelming layouts\n* algorithm-driven distractions\n\nWhile these features aim to increase user engagement, they frequently produce the opposite effect for users who simply want to find a movie quickly.\n\nCommon issues users experience include:\n\n#### 1. Time Consumption\nUsers spend a significant amount of time navigating through irrelevant content before discovering something meaningful.\n\n#### 2. Information Overload\nLarge quantities of visual content, animations, and promotional sections create cognitive overload.\n\n#### 3. Fragmented Discovery\nMovie information is often distributed across multiple pages, requiring users to navigate extensively.\n\n#### 4. Decision Fatigue\nWhen presented with too many competing options, users may struggle to make a clear selection.\n\nThese challenges turn the simple task of finding a movie to watch into a time-consuming process.\n\n\u003cbr\u003e\n\n## The ScreenPath Approach\n\nScreenPath takes a different approach to movie discovery by focusing on clarity, efficiency, and simplicity.\n\nThe platform is designed around the principle that users should be able to discover relevant movies quickly without navigating unnecessary distractions.\n\nKey design principles include:\n\n#### 1. Minimal Visual Noise\nThe interface uses a restrained black-and-white design language that minimizes unnecessary visual stimulation.\n\n#### 2. Focused Content Presentation\nOnly essential movie information is presented, ensuring users can quickly understand the content.\n\n#### 3. Efficient Filtering\nUsers can refine movie searches using structured filters that allow precise discovery.\n\n#### 4. Reduced Cognitive Load\nClear layouts and simplified navigation reduce the mental effort required to browse content.\n\nThe goal is not to maximize engagement metrics but to provide a calm and efficient browsing experience.\n\n\u003cbr\u003e\n\n## Purpose and Goals\n\nScreenPath is built with several key objectives.\n\n#### 1. Save User Time\nThe interface prioritizes quick discovery and efficient filtering to reduce browsing time.\n\n#### 2. Promote Calm Browsing\nBy removing unnecessary distractions, the application creates a browsing experience that feels more focused and less overwhelming.\n\n#### 3. Improve Decision Clarity\nStructured filtering and simplified layouts help users make decisions more easily.\n\n#### 4. Encourage Intentional Discovery\nInstead of overwhelming users with algorithm-driven content, ScreenPath allows users to actively explore movies based on their preferences.\n\n\u003cbr\u003e\n\n## Features\n\n### 1. Movie Search\n\nUsers can search for movies by title using data provided by the TMDB API.\n\nSearch results are presented in a clear grid layout that prioritizes readability and quick scanning.\n\n### 2. Advanced Filtering\n\nScreenPath provides several filtering options that allow users to narrow down results effectively.\n\nAvailable filters include:\n\n* release year\n* genre\n* sorting by (popularity, ratings, and release date)\n* streaming provider\n* language\n* age certification\n\nThese filters allow users to discover movies that match specific preferences without browsing through irrelevant results.\n\n### 3. Movie Details\n\nEach movie includes a dedicated detail page containing essential information such as:\n\n* movie title\n* tagline\n* overview\n* poster artwork\n* release date\n* ratings\n* runtime\n* spoken languages\n* age certifications\n* related genres and keywords\n* director and writer details\n* top cast and crew details\n* budget and revenue\n* production companies\n* official trailers\n* recommendations\n\nThe layout focuses on presenting this information in a clear and organized manner.\n\n### 4. Actor Discovery\n\nUsers can search and explore actors through a dedicated interface.\n\nActor results are presented in a structured layout that highlights key information and allows quick navigation.\n\nEach actor includes a detailed page with:\n\n* profile image\n* biography\n* known works\n* popularity and basic metadata\n\nThis feature allows users to explore filmography and discover content through people rather than only movies.\n\n### 5. Director and Crew Discovery\n\nScreenPath also provides the ability to explore directors and crew members.\n\nUsers can search for crew members and access individual detail pages that include:\n\n* profile information\n* role and department\n* known works and contributions\n\nThis enables deeper exploration of the creative individuals behind movies.\n\n### 6. Embedded Trailer Playback\n\nScreenPath allows users to watch official movie trailers directly within the application interface.\n\nTrailer videos are embedded using the YouTube player, enabling users to view trailers without leaving the platform or opening external websites.\n\n### 7. Responsive Interface\n\nScreenPath is designed to function across multiple device sizes.\n\nThe interface adapts automatically to:\n\n* desktop environments\n* tablets\n* mobile devices\n\nRecent improvements include:\n\n* optimized navigation with a dedicated mobile menu\n* adaptive hero section layout based on screen size\n* improved card layouts for better readability on small screens\n* consistent spacing and alignment across components\n\nThese updates ensure the browsing experience remains clear and accessible regardless of device.\n\n### 8. Guided Interaction\n\nScreenPath provides contextual guidance to help users discover available interactions.\n\nUsers can access quick navigation options through:\n\n* right-click interaction on desktop devices\n* press and hold interaction on touch devices\n\nThe guide adapts based on the device type and is positioned to ensure visibility without interrupting the browsing experience.\n\n### 9. Focused User Experience\n\nThe application is designed around a distraction-free browsing concept.\n\nKey interface behaviors include:\n\n* highlighting one primary component at a time\n* reducing unnecessary visual clutter\n* using subtle interactive elements to guide attention\n\nThese design choices help users explore content more efficiently and make quicker viewing decisions.\n\n### 10. Dark and Light Modes\n\nThe platform supports both dark and light themes.\n\nThese themes allow users to choose the visual style that best fits their viewing environment and accessibility preferences.\n\n\u003cbr\u003e\n\n## Technology Stack\n\nScreenPath is built using modern frontend technologies.\n|Description               |Technology                    | Logo                                                                       |\n|--------------------------|------------------------------|:--------------------------------------------------------------------------:|\n|Frontend Framework        |React                         |\u003cimg src=\"https://skills.syvixor.com/api/icons?perline=15\u0026i=reactjs\" /\u003e     |\n|Build Tool                |Vite                          |\u003cimg src=\"https://skills.syvixor.com/api/icons?perline=15\u0026i=vite\" /\u003e        |\n|Styling Framework         |Tailwind CSS                  |\u003cimg src=\"https://skills.syvixor.com/api/icons?perline=15\u0026i=tailwindcss\" /\u003e |\n|UI Components             |shadcn/ui                     |\u003cimg src=\"https://skills.syvixor.com/api/icons?perline=15\u0026i=shadcnui\" /\u003e    |\n|Data Fetching and Caching |TanStack Query                |\u003cimg src=\"https://skills.syvixor.com/api/icons?perline=15\u0026i=reactquery\" /\u003e  |\n|Runtime Validation        |Zod                           |\u003cimg src=\"https://skills.syvixor.com/api/icons?perline=15\u0026i=zod\" /\u003e         |\n|Routing                   |React Router                  |\u003cimg src=\"https://skills.syvixor.com/api/icons?perline=15\u0026i=reactrouter\" /\u003e |\n|External Data Source      |The Movie Database (TMDB) API |\u003cimg src=\"https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_1-5bdc75aaebeb75dc7ae79426ddd9be3b2be1e342510f8202baf6bffa71d7f5c4.svg\" width=40 /\u003e |\n\n\u003cbr\u003e\n\n## Project Structure\n\nThe application follows a modular component-based structure.\n\n| Directory       | Description                                                                                                                                                                                       |\n|-----------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n|`src/`           | Contains the main application source code.                                                                                                                                                        |\n|`components/`    | Reusable UI components used across the application.                                                                                                                                               |\n|`pages/`         | Route-level page components responsible for rendering complete views.                                                                                                                             |\n|`layout/`        | Layout-level components responsible for global UI behaviors. \u003cbr\u003eIncludes the root layout that manages shared logic such as scroll position reset and nested routing via React Router's \u003cOutlet\u003e. |\n|`hooks/`         | Custom React hooks that encapsulate reusable logic.                                                                                                                                               |\n|`services/`      | Modules responsible for interacting with external APIs and handling network requests.                                                                                                             |\n|`query-options/` | Centralized definitions for TanStack Query configuration including query keys, query functions, and query option objects.                                                                         |\n|`constants/`     | Default values and configuration constants used throughout the application.                                                                                                                       |\n|`types/`         | Type definitions used across the application to ensure consistent data structures and improve maintainability.                                                                                    |\n|`utils/`         | Utility functions and helper modules used in multiple parts of the application.                                                                                                                   |\n|`assets/`        | Static assets such as images, icons, and logos.                                                                                                                                                   |\n\nThis structure separates responsibilities and improves maintainability.\n\n\u003cbr\u003e\n\n## Environment Configuration\n\nEnvironment variables are used to manage API configuration and application settings.\n\nA template file is included: `.env.example`\n\nDevelopers should create a local environment file before running the application.\n\n```\ncp .env.example .env\n```\n\nThe `.env` file must contain the necessary API configuration values including the TMDB API authorization key.\n\n\u003cbr\u003e\n\n## Installation\n\nClone the repository:\n\n```\ngit clone https://github.com/dulanjayabhanu/screenpath.git\n```\n\nNavigate to the project directory:\n\n```\ncd screenpath\n```\n\nInstall dependencies:\n\n```\nnpm install\n```\n\nCreate the environment configuration:\n\n```\ncp .env.example .env\n```\n\nUpdate the `.env` file with the appropriate values.\n\nStart the development server:\n\n```\nnpm run dev\n```\n\nThe application will run at: `http://localhost:5173`\n\n\u003cbr\u003e\n\n## Production Build\n\nTo generate a production build:\n\n```\nnpm run build\n```\n\nPreview the build locally:\n\n```\nnpm run preview\n```\n\nThe optimized production output is generated in the `dist` directory.\n\n\u003cbr\u003e\n\n## Deployment\n\nScreenPath can be deployed using modern static hosting platforms such as:\n\n* Vercel\n* Netlify\n* GitHub Pages\n* Cloudflare Pages\n\nDeployment typically involves building the application and hosting the generated `dist` directory.\n\n\u003cbr\u003e\n\n## Legal Notice\n\nThis product uses the TMDB API but is not endorsed or certified by TMDB.\n\nAll movie data and media content are provided by [The Movie Database](https://www.themoviedb.org/).\n\n\u003cbr\u003e\n\n## License\n\nThis project is licensed under the MIT License.\n\nSee the [LICENSE](LICENSE) file for complete license details.\n\n\u003cbr\u003e\n\n\u003chr\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"/docs/images/screenpath-logo.svg\" alt=\"ScreenPath logo\" width=150px /\u003e\n    \u003ch3\u003eScreenPath\u003c/h3\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulanjayabhanu%2Fscreenpath","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdulanjayabhanu%2Fscreenpath","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulanjayabhanu%2Fscreenpath/lists"}