{"id":25588228,"url":"https://github.com/mid9coward/moodflix-react","last_synced_at":"2026-02-14T15:02:26.123Z","repository":{"id":278689511,"uuid":"936419411","full_name":"mid9coward/moodflix-react","owner":"mid9coward","description":"Dive straight into React—from basic JSX to advanced hooks—and build a real, modern app ","archived":false,"fork":false,"pushed_at":"2025-02-21T05:50:28.000Z","size":2976,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-07T07:36:16.821Z","etag":null,"topics":["appwrite","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://moodflix-react.netlify.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/mid9coward.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}},"created_at":"2025-02-21T03:48:56.000Z","updated_at":"2025-02-21T05:50:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"87b4e8bb-7b7d-4e5d-9bd9-be6e1cba859c","html_url":"https://github.com/mid9coward/moodflix-react","commit_stats":null,"previous_names":["mid9coward/moodflix-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mid9coward/moodflix-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mid9coward%2Fmoodflix-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mid9coward%2Fmoodflix-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mid9coward%2Fmoodflix-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mid9coward%2Fmoodflix-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mid9coward","download_url":"https://codeload.github.com/mid9coward/moodflix-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mid9coward%2Fmoodflix-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29447768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T14:10:32.461Z","status":"ssl_error","status_checked_at":"2026-02-14T14:09:49.945Z","response_time":53,"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":["appwrite","reactjs","tailwindcss"],"created_at":"2025-02-21T08:26:19.792Z","updated_at":"2026-02-14T15:02:26.104Z","avatar_url":"https://github.com/mid9coward.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \n  \u003ch3 align=\"center\"\u003eA Movie Application\u003c/h3\u003e\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-React_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=react\u0026color=61DAFB\" alt=\"react.js\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Appwrite-black?style=for-the-badge\u0026logoColor=white\u0026logo=appwrite\u0026color=FD366E\" alt=\"appwrite\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n\n  \u003c/div\u003e\n\n\u003c/div\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Snippets (Code to Copy)](#snippets)\n6. 🔗 [Assets](#links)\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nBuilt with React.js for the user interface, Appwrite for the Trending Movies Algorithm, and styled with TailwindCSS, Moodflix is a website project designed to help beginners get started with learning React.js. The platform offers a sleek and modern experience for browsing and discovering movies.\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- React.js\n- Appwrite\n- Tailwind CSS\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Browse All Movies**: Explore a wide range of movies available on the platform.\n\n👉 **Search Movies**: Easily search for specific movies using a search function.\n\n👉 **Trending Movies Algorithm**: Displays trending movies based on a dynamic algorithm.\n\n👉 **Modern UI/UX**: A sleek and user-friendly interface designed for a great experience.\n\n👉 **Responsiveness**: Fully responsive design that works seamlessly across devices.\n\nand many more, including code architecture and reusability\n\n## \u003ca name=\"quick-start\"\u003e🤸 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/mid9coward/moodflix-react.git\ncd moodflix-react\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env.local` in the root of your project and add the following content:\n\n```env\nVITE_IMDB_API_KEY=\n\nVITE_APPWRITE_PROJECT_ID=\nVITE_APPWRITE_DATABASE_ID=\nVITE_APPWRITE_COLLECTION_ID=\n```\n\nReplace the placeholder values with your actual **[TheMovieDatabase API](https://developer.themoviedb.org/reference/intro/getting-started)** and **[Appwrite](https://apwr.dev/JSM050)** credentials. You can obtain these credentials by signing up on the [TheMovieDatabase](https://developer.themoviedb.org/reference/intro/getting-started) and creating a new project on the [Appwrite](https://apwr.dev/JSM050)\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eindex.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000\u0026display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Bebas+Neue\u0026display=swap\");\n\n@import \"tailwindcss\";\n\n@theme {\n  --color-primary: #030014;\n\n  --color-light-100: #cecefb;\n  --color-light-200: #a8b5db;\n\n  --color-gray-100: #9ca4ab;\n\n  --color-dark-100: #0f0d23;\n\n  --font-dm-sans: DM Sans, sans-serif;\n\n  --breakpoint-xs: 480px;\n\n  --background-image-hero-pattern: url(\"/hero-bg.png\");\n}\n\n@layer base {\n  body {\n    font-family: \"DM Sans\", serif;\n    font-optical-sizing: auto;\n    background: #030014;\n  }\n\n  h1 {\n    @apply mx-auto max-w-4xl text-center text-5xl font-bold leading-tight tracking-[-1%] text-white sm:text-[64px] sm:leading-[76px];\n  }\n\n  h2 {\n    @apply text-2xl font-bold text-white sm:text-3xl;\n  }\n\n  main {\n    @apply min-h-screen relative bg-primary;\n  }\n\n  header {\n    @apply sm:mt-10 mt-5;\n  }\n\n  header img {\n    @apply w-full max-w-lg h-auto object-contain mx-auto drop-shadow-md;\n  }\n}\n\n@layer components {\n  .pattern {\n    @apply bg-hero-pattern w-screen h-screen bg-center bg-cover absolute z-0;\n  }\n\n  .wrapper {\n    @apply px-5 py-12 xs:p-10 max-w-7xl mx-auto flex flex-col relative z-10;\n  }\n\n  .trending {\n    @apply mt-20;\n\n    \u0026 ul {\n      @apply flex flex-row overflow-y-auto gap-5 -mt-10 w-full hide-scrollbar;\n    }\n\n    \u0026 ul li {\n      @apply min-w-[230px] flex flex-row items-center;\n    }\n\n    \u0026 ul li p {\n      @apply fancy-text mt-[22px] text-nowrap;\n    }\n\n    \u0026 ul li img {\n      @apply w-[127px] h-[163px] rounded-lg object-cover -ml-3.5;\n    }\n  }\n\n  .search {\n    @apply w-full bg-light-100/5 px-4 py-3 rounded-lg mt-10 max-w-3xl mx-auto;\n\n    \u0026 div {\n      @apply relative flex items-center;\n    }\n\n    \u0026 img {\n      @apply absolute left-2 h-5 w-5;\n    }\n\n    \u0026 input {\n      @apply w-full bg-transparent py-2 sm:pr-10 pl-10 text-base text-gray-200 placeholder-light-200 outline-hidden;\n    }\n  }\n\n  .all-movies {\n    @apply space-y-9;\n\n    \u0026 ul {\n      @apply grid grid-cols-1 gap-5 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;\n    }\n  }\n\n  .movie-card {\n    @apply bg-dark-100 p-5 rounded-2xl shadow-inner shadow-light-100/10;\n\n    \u0026 img {\n      @apply rounded-lg h-auto w-full;\n    }\n\n    \u0026 h3 {\n      @apply text-white font-bold text-base line-clamp-1;\n    }\n\n    \u0026 .content {\n      @apply mt-2 flex flex-row items-center flex-wrap gap-2;\n    }\n\n    \u0026 .rating {\n      @apply flex flex-row items-center gap-1;\n    }\n\n    \u0026 .rating img {\n      @apply size-4 object-contain;\n    }\n\n    \u0026 .rating p {\n      @apply font-bold text-base text-white;\n    }\n\n    \u0026 .content span {\n      @apply text-sm text-gray-100;\n    }\n\n    \u0026 .content .lang {\n      @apply capitalize text-gray-100 font-medium text-base;\n    }\n\n    \u0026 .content .year {\n      @apply text-gray-100 font-medium text-base;\n    }\n  }\n}\n\n@utility text-gradient {\n  @apply bg-linear-to-r from-[#D6C7FF] to-[#AB8BFF] bg-clip-text text-transparent;\n}\n\n@utility fancy-text {\n  -webkit-text-stroke: 5px rgba(206, 206, 251, 0.5);\n  font-size: 190px;\n  font-family: \"Bebas Neue\", sans-serif;\n}\n\n@utility hide-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  \u0026::-webkit-scrollbar {\n    display: none;\n  }\n}\n```\n\n\u003c/details\u003e\n\n## \u003ca name=\"links\"\u003e🔗 Assets\u003c/a\u003e\n\nPublic assets used in the project can be found [here](https://drive.google.com/file/d/1v_r4sFD8Veuj3TBEbNUjWdzLn-upaqwt/view)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmid9coward%2Fmoodflix-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmid9coward%2Fmoodflix-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmid9coward%2Fmoodflix-react/lists"}