{"id":42307864,"url":"https://github.com/zuixjs/zuix-web-flix","last_synced_at":"2026-04-06T11:04:18.703Z","repository":{"id":39985717,"uuid":"145265102","full_name":"zuixjs/zuix-web-flix","owner":"zuixjs","description":"Netflix app clone as a progressive web app template","archived":false,"fork":false,"pushed_at":"2022-03-16T08:06:33.000Z","size":884,"stargazers_count":141,"open_issues_count":0,"forks_count":41,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-05-01T06:45:17.152Z","etag":null,"topics":["html","in-browser-bundler","mobile-app","progressive-web-app","responsive-design","web-template","zuix"],"latest_commit_sha":null,"homepage":"https://zuixjs.github.io/zuix-web-flix/","language":"JavaScript","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/zuixjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-19T01:47:46.000Z","updated_at":"2024-04-19T13:46:00.000Z","dependencies_parsed_at":"2022-06-26T02:26:07.137Z","dependency_job_id":null,"html_url":"https://github.com/zuixjs/zuix-web-flix","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/zuixjs/zuix-web-flix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuixjs%2Fzuix-web-flix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuixjs%2Fzuix-web-flix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuixjs%2Fzuix-web-flix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuixjs%2Fzuix-web-flix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zuixjs","download_url":"https://codeload.github.com/zuixjs/zuix-web-flix/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuixjs%2Fzuix-web-flix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29574065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T08:38:15.585Z","status":"ssl_error","status_checked_at":"2026-02-18T08:38:14.917Z","response_time":162,"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":["html","in-browser-bundler","mobile-app","progressive-web-app","responsive-design","web-template","zuix"],"created_at":"2026-01-27T11:12:46.286Z","updated_at":"2026-02-18T09:01:23.445Z","avatar_url":"https://github.com/zuixjs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# zuix-web-flix\n\nA Progressive Web App template inspired by Netflix mobile app.\n\nThis template is built with just HTML, JavaScript and CSS so that it can be eventually integrated with your favourite development environment and build tools.\n\n## Features\n\n- Design inspired to Netflix mobile app\n- Modular and component-based structure using zUIx.js\n- In-browser bundler: can pack all resources in a single file and boost-up loading speed\n- PWA LightHouse score 100/100 (!)\n\n![LightHouse Report](https://zuixjs.github.io/zuix-web-flix/images/lighthouse-report.png)\n\n### Demo Website\n\nhttps://zuixjs.github.io/zuix-web-flix\n\n# How to use this template\n\nThe **./source** folder contains the *development* version of the website, while the **./docs** folder the *production* bundled version.\n\n## Basic usage\n\nIf you have *Node.js* installed, for a quick setup you can use the integrated web server which will serve files from the *./source* folder.\nInstall the development dependencies with `npm install` and then start the web server:\n\n```\nnpm start\n```\n\nIf you don't want to use the integrated web server, you can setup any other web server by creating a new host with the root path pointing to the *./source* folder.\n\n\n## Site structure in brief\n\nThe main file is the `index.html`. This file includes some layout bits that are located in the `layout/` folder and the main application pages that are located in the `pages/` folder.\n\n```\n./source/\n   layout/\n      footer.css\n      footer.html\n      header.css\n      header.html\n   pages/\n      about.css\n      about.html\n      home.css\n      home.html\n      home.js\n      home/ (folder with other files referenced in home.html/js)\n      notifications.css\n      notifications.html\n      search.css\n      search.html\n   shared/\n      (not used yet)\n```\n\nA simple page is defined by the `.css` and `.html` files. A page might also require some bits of *JavaScript* in which case also a `.js` file with the same base name is present.\n\nA complete example is the `pages/home` page which has a `.js` file (*controller*) and also loads some *local* bits that are placed in the `pages/home/` folder.\n\nThe `shared/` folder contains indeed bits that are *shared* across the whole application and that are usually referenced by different pages.\n\nAs you can see in the `index.html` file those pages and layout bits are loaded using some special tag attributes that are `data-ui-include` (to load simple content pages) and `data-ui-load` to load pages or components that also have a JavaScript controller.\n\n**index.html** (main body)\n```html\n\u003c!-- The header with title/logo --\u003e\n\u003cheader data-ui-include=\"layout/header\"\u003e\u003c/header\u003e\n\n\u003cmain\u003e\n\n  \u003c!-- HOME --\u003e\n  \u003csection data-ui-load=\"pages/home\"\n           data-ui-options=\"options.mainPage\"\u003e\u003c/section\u003e\n\n  \u003c!-- SEARCH --\u003e\n  \u003csection data-ui-include=\"pages/search\"\u003e\u003c/section\u003e\n\n  \u003c!-- NOTIFICATIONS --\u003e\n  \u003csection data-ui-include=\"pages/notifications\"\u003e\u003c/section\u003e\n\n  \u003c!-- ABOUT --\u003e\n  \u003csection data-ui-include=\"pages/about\" layout=\"column top-center\"\u003e\u003c/section\u003e\n\n\u003c/main\u003e\n\n\u003c!-- The footer with toolbar buttons --\u003e\n\u003cfooter data-ui-include=\"layout/footer\"\n        data-ui-options=\"options.footerBar\"\u003e\u003c/footer\u003e\n```\n\nFor a deeper insight on using these special attributes for component-based developemnt with **zUIx.js** see related link at the bottom of this page.\n\n### Movie lists\n\nThe list of movies shown in the main page are located in the `./pages/home/` folder and consists of a static list of items to which is bound a *controller* that carry the duty of querying the [The Movie Database](https://www.themoviedb.org/) to fetch data and images of each title.\n\nEach *movie item* is defined as follow:\n```\n\u003cdiv class=\"movie\"\u003e\n  \u003ca title=\"Total recall\" data-ui-load=\"controllers/movie_db\" data-ui-lazyload=\"true\" class=\"item\"\u003e\u003c!-- no-view --\u003e\u003c/a\u003e\n\u003c/div\u003e\n```\nThe `data-ui-load=\"controllers/movie_db\"` attribute will make *zUIx.js* to load the `./controllers/movie_db.js` on the element. This contoller will read the `title` attribute of the element and fetch the movie data using *TheMovieDB API*.\n\nTo make this work on your local copy, you must obtain an API key and put the value at the beginning of the `./controllers/movie_db.js` file:\n\n```javascript\n// TODO: get your free TMDB API key from https://themoviedb.org\nconst tmdbKey = '--put--your-tmdb-api-key-here--';\n```\n\nYou can of course replace the static movie lists with server generated lists that renders the *movie items* as described above.\n\n### Main page\n\nThe main page is formed by a cover, which collapses as the page is scrolled, and a *movie details page* which pop-ups when a movie item is tapped.\n\nThe main page is available throught the global object `mainPage` and exposes two method: `cover` and `sync`.\nThe first method is used to set which movie title to show as the main page cover, while the latter is used to synchronize the cover with the page scroll.\n\nYou can see how these methods are implemented in the `./pages/home.js` file and how these are used in the main `index.js` file.\n\nThe *details page* is available as the global object `detailsPage` and it has two methods: `show` and `hide`.\nThe first method requires the movie item data as argument. You can see how it is used in the `./controllers/movie_db.js` file to open a movie detail when the preview image is tapped.\n\n### About the @lib prefix\n\nThe special *@lib* prefix is used with the `data-ui-include` and `data-ui-load` attribute to load components from a shared location that by default will point to the [zKit](https://zuixjs.github.io/zkit/) components library.\nThis path is resolved to `https://zuixjs.github.io/zkit/lib/` but can also be customized to point to a different location:\n\n```javascript\nzuix.store('config', {\n    libraryPath: 'https://my.shared.components.io/lib/'\n});\n```\n\nYou can so create your own shared component library to use across all of your websites.\n\n### Further implementation details\n\nIf you have more questions about how to use this template do not esitate to [file an issue](https://github.com/zuixjs/zuix-web-flix/issues).\n\n## Service Worker and Offline mode\n\nA service worker is also included with this template. This is a script (`sw.js`) that runs in the background as a seprate thread from the main page and takes care of providing caching of most resources with a fallback mechanism in presence of network errors.\nThis makes the application to launch even if there's no network connection, like with a real mobile app. It also provide a configurable `404.html` *\"not found\"* page and `offline.html` page.\nWhen publishing a new version of the application the *version number* found at the top of the `sw.js` file **must be increased** in order to clean the cache and correctly update the application files.\n\n## Debugging\n\nTo enable verbose debugging information in the browser console, comment out the last line in the `index.js` file as shown below:\n\n``` javascript\n// Turn off debug output\n//window.zuixNoConsoleOutput = true;\n```\n\n\n## Bundling\n\nBundling is the process of collecting all resources used in a page and then compiling them into a single and optimized file.\n\nThis will drastically narrow down the number of network requests the browser will make to complete the page loading, thus resulting in a faster startup.\n\nThere are actually two way of doing this:\n\n- **In-Browser** bundler:\nthis method does not require any build tool nor plugins, it just works in the browser as-is.\n\n- **Web-Starter** bundler:\nis the [zuix-web-starter](https://github.com/zuixjs/zuix-web-starter) bare template, with a bunch of extra features and enhancements. It requires *Node.js* to be installed.\n\nThis template is already configured for **in-browser** bundling.\n\n### In-Browser bundling\n\nWhen the website is ready for production you can decide to bundle it in order to gain better performances. All of its components and resources will be crunched into a single file and loaded from memory rather than from network/localhost.\n\n#### Step by step guide\n\nOpen the development website and generate the application bundle by typing in the **browser console** the command\n\n```javascript\nzuix.saveBundle()\n```\n\nThis will create and save the **app.bundle.js** file to the *Downloads* folder.\n\nCopy all files from the *source* folder to the **production** folder (*./docs*) with the exception of *./components*, *./controllers*, *./pages*, *./layout* and *./index.css*.\n\nThese folders contain *zuix* components and pages that are already packed in the *app.bundle.js* file.\n\nCopy *app.bundle.js* to the *production* folder. Edit the `index.html` file in the *production* folder and in the `head` section replace the `js/zuix-bundler.min.js` script import with `app.bundle.js`.\n\n```html\n\u003cscript src=\"js/zuix.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"app.bundle.js\"\u003e\u003c/script\u003e\n```\n\nYou can also remove all `js/zuix*.*` files from the *production* folder but keep the `zuix.min.js` one.\n\n#### Remarks\n\nWhen using *lazy-loading* only components loaded so far will be included in the bundle (incremental bundling).\n\nTo force inclusion of all components/resources used in the page, issue the following commands in the console:\n\n```javascript\n// disable lazy-loading\nzuix.lazyLoad(false)\n// force loading of all components\nzuix.componentize()\n// create the bundle\nzuix.saveBundle()\n```\n\nAlso external JavaScript libraries and CSS files can be included in the page bundle. In order to achieve this, remove the `\u003cscript src=\"...\"\u003e\u003c/script\u003e` or `\u003clink rel=\"stylesheet\"\u003e` and instead use the method `zuix.using(...)` to load the script/css.\n\n```javascript\n// Loading a .css style\nconst flaCss = 'https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css';\nzuix.using('style', flaCss, function(res, styleObject) {\n    console.log(\"Added Flex Layout Attributes CSS.\", res, styleObject);\n});\n// Loading a .js script\nconst momentJs = 'https://momentjs.com/downloads/moment.js';\nzuix.using('script', momentJs, function(res, scriptObject){\n    console.log(\"Added Moment.js.\", res, scriptObject);\n});\n```\n\nPlace the *using* commands preferably at the top of `index.js`. You can remove from the *production* folder all files imported with the *using* command.\n\n# Further reading\n\n- [zUIx.js](https://zuixjs.org)\n- [zKit](https://zuixjs.github.io/zkit/)\n- [Progressive Web App](https://developers.google.com/web/progressive-web-apps)\n- [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzuixjs%2Fzuix-web-flix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzuixjs%2Fzuix-web-flix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzuixjs%2Fzuix-web-flix/lists"}