{"id":15745620,"url":"https://github.com/edugese/screenpulse-frontapp","last_synced_at":"2026-05-02T13:31:09.343Z","repository":{"id":218785079,"uuid":"727679596","full_name":"EduGese/ScreenPulse-frontApp","owner":"EduGese","description":"ScreenPulse is the frontend part of a full stack application built with Angular, integrated with a custom backend API built with Node.js and Express and MongoDB Atlas for database storage. The frontend allows users to search for movies, series, or video games in the OMDB API, view detailed information and save favorites to collections after login","archived":false,"fork":false,"pushed_at":"2025-12-04T19:43:58.000Z","size":17837,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"production","last_synced_at":"2025-12-08T02:30:56.471Z","etag":null,"topics":["angular","angularmaterial","front-end","ng-bootstrap","typescript"],"latest_commit_sha":null,"homepage":"https://sreenpulse.web.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/EduGese.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,"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":"2023-12-05T11:01:36.000Z","updated_at":"2025-12-04T19:44:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"b13ce020-9771-4638-a937-dc54ff7b1425","html_url":"https://github.com/EduGese/ScreenPulse-frontApp","commit_stats":null,"previous_names":["edugese/screenpulse-frontapp"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/EduGese/ScreenPulse-frontApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EduGese%2FScreenPulse-frontApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EduGese%2FScreenPulse-frontApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EduGese%2FScreenPulse-frontApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EduGese%2FScreenPulse-frontApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EduGese","download_url":"https://codeload.github.com/EduGese/ScreenPulse-frontApp/tar.gz/refs/heads/production","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EduGese%2FScreenPulse-frontApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32536476,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T12:25:33.646Z","status":"ssl_error","status_checked_at":"2026-05-02T12:24:51.733Z","response_time":132,"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":["angular","angularmaterial","front-end","ng-bootstrap","typescript"],"created_at":"2024-10-04T04:21:15.597Z","updated_at":"2026-05-02T13:31:09.336Z","avatar_url":"https://github.com/EduGese.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Storybook](https://img.shields.io/badge/📖_Storybook-Components-FF69B4?logo=storybook\u0026logoColor=white\u0026labelColor=1a1a1a)](https://edugese.github.io/ScreenPulse-frontApp/)\n[![Live Demo](https://img.shields.io/badge/🚀_Live_Demo-Firebase-FFCA28?logo=firebase\u0026logoColor=white)](https://sreenpulse.web.app/)\n[![Angular](https://img.shields.io/badge/Angular-16.2.12-DD0031?logo=angular\u0026logoColor=white)](https://angular.io/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.1-3178C6?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Angular Material](https://img.shields.io/badge/Angular_Material-16.2.12-E91E63?logo=angular\u0026logoColor=white)](https://material.angular.io/)\n[![ng-bootstrap](https://img.shields.io/badge/ng--bootstrap-15.1.2-7952B3?logo=bootstrap\u0026logoColor=white)](https://ng-bootstrap.github.io/)\n[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![Release](https://img.shields.io/github/release/EduGese/ScreenPulse-frontApp?style=flat-square)\n\n\u003e A modern web application for discovering and managing movies, series, and games. Built with Angular 16, powered by OMDB API, with full authentication and favorites management.\n\n[🚀 Live Demo](https://sreenpulse.web.app/) • [📖 Component Docs](https://edugese.github.io/ScreenPulse-frontApp/) • [🎬 Video Demo](https://youtu.be/e1ZbcnbUI2E) • [🔗 Backend API](https://github.com/EduGese/ScreenPulse-backend-Api)\n\n---\n\n## ✨ Features\n\n- **Smart Search** - Find movies, series, and games by title, type, and year\n- **User Authentication** - Secure registration and login system\n- **Favorites Management** - Save and organize your favorite media\n- **Detailed Information** - View ratings, cast, trailers, and more\n- **Personal Reviews** - Add notes and reviews to your favorites\n- **Responsive Design** - Optimized for desktop, tablet, and mobile\n\n## 🛠️ Tech Stack\n\n- **Frontend:** Angular 16.2.12, TypeScript 5.1\n- **UI:** Angular Material, ng-bootstrap\n- **State:** RxJS\n- **API:** OMDB API + Custom Node.js/Express Backend\n- **Database:** MongoDB Atlas\n- **Hosting:** Firebase (Frontend) + Render (Backend)\n- **Documentation:** Storybook 8.3.x\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js v18.19.1 (LTS)\n- npm v8.0.0+\n- Angular CLI v16.2.16\n\n### Installation\n\n```bash\n# Clone repository\ngit clone https://github.com/EduGese/ScreenPulse-frontApp.git\ncd ScreenPulse-frontApp\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n```\n\nApp runs at `http://localhost:4200/`\n\n### Available Scripts\n\n```bash\nnpm start          # Development server with live reload\nnpm run build      # Production build\nnpm test           # Run unit tests (Jasmine/Karma)\nnpm run lint       # Lint with ESLint\nnpm run storybook  # Launch Storybook docs\n```\n\n## 📖 Documentation\n\n**Component library and architecture** is fully documented in Storybook:\n\n👉 **[View Component Documentation](https://edugese.github.io/ScreenPulse-frontApp/)**\n\nIncludes:\n- Component library (Smart + Presentational)\n- Angular Material usage guidelines\n- Project architecture overview\n- Interactive component playground\n\n## 🏗️ Architecture Highlights\n\n- **Feature modules** with lazy loading (Search, Favorites, Auth)\n- **Smart/Presentational** component separation\n- **RxJS** for reactive state management\n- **Guards \u0026 Interceptors** for auth and error handling\n- **Shared module** for reusable components\n- **Storybook** for component-driven development\n\n📚 Full architecture details → [Storybook Introduction](https://edugese.github.io/ScreenPulse-frontApp/?path=/docs/introduction--docs)\n\n## 🧪 Testing\n\n```bash\n# Unit tests\nnpm test\n```\n\nTests use **Jasmine** + **Karma** with `HttpClientTestingModule` for HTTP mocking.\n\n## 🌐 API Integration\n\n- **[ScreenPulse Backend API](https://github.com/EduGese/ScreenPulse-backend-Api)** - Node.js + Express + MongoDB\n- **[OMDB API](https://www.omdbapi.com/)** - Movie/series/game data source\n\nBackend handles:\n- User authentication (JWT)\n- Favorites CRUD operations\n- OMDB API proxy requests\n\n## 📱 Responsive Design\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/EduGese/ScreenPulse-frontApp/assets/122921699/e5ce912a-9c6a-4f76-9eac-dea620fac265\" width=\"45%\"\u003e\n  \u003cimg src=\"https://github.com/EduGese/ScreenPulse-frontApp/assets/122921699/9e5e617c-adba-4c59-a5b6-ab5b75a5ffc4\" width=\"20%\"\u003e\n\u003c/div\u003e\n\nOptimized for all devices from 320px (mobile) to 1920px+ (desktop).\n\n## 🔧 Environment Configuration\n\nEnvironment files are located in `src/environments/`:\n\n```typescript\n// environment.ts (development)\nexport const environment = {\n  serverFavoritesURL: 'http://localhost:9000/api/favorites',\n  serverSearchURL: 'http://localhost:9000/api/omdb',\n  serverUserURL: 'http://localhost:9000/api/user'\n};\n\n// environment.production.ts (production)\nexport const environment = {\n  serverFavoritesURL: 'https://screenpulse-api.onrender.com/api/favorites',\n  serverSearchURL: 'https://screenpulse-api.onrender.com/api/omdb',\n  serverUserURL: 'https://screenpulse-api.onrender.com/api/user'\n};\n```\n\nAngular automatically uses `environment.production.ts` when building with:\n```bash\nng build --configuration production\n```\n\n## 📄 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n**Developed by** [Eduardo Gese](https://github.com/edugese)  \n⭐ Star this repo if you find it useful!\n\"\"\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedugese%2Fscreenpulse-frontapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedugese%2Fscreenpulse-frontapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedugese%2Fscreenpulse-frontapp/lists"}