{"id":28759516,"url":"https://github.com/brunoliratm/rickandmorthy-client","last_synced_at":"2025-06-17T05:07:09.511Z","repository":{"id":296928682,"uuid":"993851542","full_name":"brunoliratm/RickAndMorthy-Client","owner":"brunoliratm","description":"RickAndMorty-client, developed in Angular and TypeScript, allows users to view, filter and explore information about the series' characters, presenting the data in an interactive and friendly way. ","archived":false,"fork":false,"pushed_at":"2025-05-31T19:38:41.000Z","size":3486,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-11T10:16:09.905Z","etag":null,"topics":["angular","good-first-issue","html","rick-and-morty","rickandmortyapi","scss","typescript","website"],"latest_commit_sha":null,"homepage":"https://rick-and-morthy-client.vercel.app","language":"SCSS","has_issues":false,"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/brunoliratm.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}},"created_at":"2025-05-31T16:56:22.000Z","updated_at":"2025-05-31T19:38:45.000Z","dependencies_parsed_at":"2025-06-03T12:18:52.312Z","dependency_job_id":"1e1fb49f-11e0-40c7-bcff-b2876d14cf06","html_url":"https://github.com/brunoliratm/RickAndMorthy-Client","commit_stats":null,"previous_names":["brunoliratm/rickandmorthy-client"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/brunoliratm/RickAndMorthy-Client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoliratm%2FRickAndMorthy-Client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoliratm%2FRickAndMorthy-Client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoliratm%2FRickAndMorthy-Client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoliratm%2FRickAndMorthy-Client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunoliratm","download_url":"https://codeload.github.com/brunoliratm/RickAndMorthy-Client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoliratm%2FRickAndMorthy-Client/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260294464,"owners_count":22987624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","good-first-issue","html","rick-and-morty","rickandmortyapi","scss","typescript","website"],"created_at":"2025-06-17T05:07:08.831Z","updated_at":"2025-06-17T05:07:09.493Z","avatar_url":"https://github.com/brunoliratm.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://capsule-render.vercel.app/api?type=waving\u0026height=200\u0026color=gradient\u0026text=Rick%20and%20Morty%20Client\u0026reversal=false\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Angular](https://img.shields.io/badge/Angular-19.2.0-DD0031?logo=angular)](https://angular.io/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-3178C6?logo=typescript)](https://www.typescriptlang.org/)\n[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![RxJS](https://img.shields.io/badge/RxJS-7.8.0-B7178C?logo=reactivex)](https://rxjs.dev/)\n[![PrimeNG](https://img.shields.io/badge/PrimeNG-19.1.2-007ACC?logo=primeng)](https://primeng.org/)\n\n\u003c/div\u003e\n\n\u003e _A modern Angular application to explore the infinite multiverse of Rick and Morty!_\n\nA comprehensive web interface built with Angular that provides an intuitive way to browse and explore the Rick and Morty universe. The application consumes the [Rick and Morty API](https://rickandmortyapi.com) to deliver rich information about characters, locations, episodes, and more.\n\n## 🚀 Demo\n\n[Live Web](https://rick-and-morthy-client.vercel.app/) | [Screenshots](#screenshots)\n\n## 📋 Table of Contents\n\n- [Features](#-features)\n- [Demo](#-demo)\n- [Tech Stack](#-tech-stack)\n- [Getting Started](#-getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Development Server](#development-server)\n  - [Build](#build)\n- [Project Structure](#-project-structure)\n- [API Integration](#-api-integration)\n- [Environment Configuration](#-environment-configuration)\n- [Screenshots](#-screenshots)\n- [Features Roadmap](#-features-roadmap)\n- [Contributing](#-contributing)\n- [Support](#-support)\n- [License](#-license)\n- [Acknowledgments](#-acknowledgments)\n\n## 📖 Overview\n\nRick and Morty Explorer is a comprehensive front-end application that provides an intuitive interface for exploring all aspects of the Rick and Morty universe. Users can browse characters, locations, and episodes with rich filtering capabilities and an immersive user experience.\n\n## ✨ Features\n\n- **Character Explorer**\n\n  - Browse all characters with pagination\n  - Filter by status (alive, dead, unknown)\n  - Filter by species, gender, and origin\n  - Detailed character profiles\n\n- **Location Directory**\n\n  - Browse all locations from the multiverse\n  - Filter by type and dimension\n\n- **Episode Guide**\n\n  - Complete episode listing with air dates\n  - Season categorization\n\n- **User Experience**\n  - Responsive design for mobile and desktop\n  - Dark/Light theme toggle\n  - Intuitive navigation with hero section\n  - Dynamic search capabilities\n  - Consistent theming inspired by the show\n  - Loading states and error handling\n\n## 🛠 Tech Stack\n\n- **Frontend Framework:** Angular 19.2.0\n- **Language:** TypeScript 5.7\n- **UI Components:** PrimeNG 19.1.2\n- **Icons:** PrimeIcons 7.0.0\n- **Styling:** SCSS with responsive design\n- **State Management:** RxJS for reactive state handling\n- **HTTP Client:** Angular HttpClient for API communication\n- **Build Tools:** Angular CLI\n- **Package Manager:** npm\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nMake sure you have the following installed on your development machine:\n\n- **Node.js** (v18 or higher) - [Download](https://nodejs.org/)\n- **npm** (comes with Node.js) or **yarn** package manager\n- **Angular CLI** (optional but recommended) - `npm install -g @angular/cli`\n\n### Installation\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/brunoliratm/RickAndMorthy-Client.git\n   ```\n\n2. **Navigate to the project directory:**\n\n   ```bash\n   cd RickAndMorthy-Client\n   ```\n\n3. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n\n### Development Server\n\nStart the development server:\n\n```bash\nnpm start\n# or\nng serve\n```\n\nOpen your browser and navigate to `http://localhost:4200`. The application will automatically reload if you change any of the source files.\n\n### Build\n\nBuild the project for production:\n\n```bash\nnpm run build\n# or\nng build\n```\n\nThe build artifacts will be stored in the `dist/` directory.\n\n## 📁 Project Structure\n\n```\nsrc/\n├── app/\n│   ├── core/\n│   │   ├── config/\n│   │   ├── models/\n│   │   └── services/\n│   ├── features/\n│   │   ├── characters/\n│   │   ├── episodes/\n│   │   ├── home/\n│   │   └── locations/\n│   ├── shared/\n│   │   └── components/\n│   ├── app.component.*\n│   ├── app.routes.ts\n│   └── main.ts\n```\n\n## 🔌 API Integration\n\nThe application integrates with the [Rick and Morty API](https://rickandmortyapi.com) to fetch data about:\n\n- **Characters:** `/character` endpoint with filtering capabilities\n- **Locations:** `/location` endpoint with type and dimension filters\n- **Episodes:** `/episode` endpoint with season information\n\n### API Services\n\nEach API service is implemented in the `core/services` directory with TypeScript interfaces for strong typing:\n\n- `CharacterService` - Handles character data fetching and filtering\n- `LocationService` - Manages location data and resident information\n- `EpisodeService` - Handles episode data and character appearances\n\n### Data Models\n\nType-safe interfaces are defined in `core/models/`:\n\n- `Character` - Character data structure\n- `Location` - Location data structure\n- `Episode` - Episode data structure\n- `ApiInfo` - API pagination information\n\n## ⚙️ Environment Configuration\n\nThe application uses environment configuration for API endpoints:\n\n```typescript\n// src/app/core/config/environment.ts\nexport const environment = {\n  apiBaseUrl: \"https://rickandmortyapi.com/api\",\n};\n```\n\n## 📱 Screenshots\n\n### Screenshots\n\n\u003cdiv align=\"center\"\u003e\n  \u003cdetails\u003e\n    \u003csummary\u003eHome Page\u003c/summary\u003e\n    \u003cimg src=\"./public/screenshots/home.png\" alt=\"Home Page\" width=\"800px\"\u003e\n    \u003cp\u003e\u003cem\u003eHome page with hero section and navigation\u003c/em\u003e\u003c/p\u003e\n  \u003c/details\u003e\n\n  \u003cdetails\u003e\n    \u003csummary\u003eCharacter List\u003c/summary\u003e\n    \u003cimg src=\"./public/screenshots/list.png\" alt=\"Character List\" width=\"800px\"\u003e\n    \u003cp\u003e\u003cem\u003eCharacter browser with filtering options\u003c/em\u003e\u003c/p\u003e\n  \u003c/details\u003e\n\n  \u003cdetails\u003e\n    \u003csummary\u003eMobile View\u003c/summary\u003e\n    \u003cimg src=\"./public/screenshots/mobile.png\" alt=\"Mobile View\" width=\"400px\"\u003e\n    \u003cp\u003e\u003cem\u003eResponsive design for mobile devices\u003c/em\u003e\u003c/p\u003e\n  \u003c/details\u003e\n\u003c/div\u003e\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n### Development Guidelines\n\n1. **Fork the repository**\n2. **Create your feature branch:**\n   ```bash\n   git checkout -b feature/amazing-feature\n   ```\n3. **Commit your changes:**\n   ```bash\n   git commit -m 'Add some amazing feature'\n   ```\n4. **Push to the branch:**\n   ```bash\n   git push origin feature/amazing-feature\n   ```\n5. **Open a Pull Request**\n\n### Code Style\n\n- Follow Angular style guide conventions\n- Use TypeScript strict mode\n- Write meaningful commit messages\n- Add tests for new features\n- Update documentation as needed\n\n## 📞 Support\n\nIf you have any questions or need help with the project:\n\n- **Issues:** [GitHub Issues](https://github.com/brunoliratm/RickAndMorthy-Client/issues)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- **Rick and Morty API** - [https://rickandmortyapi.com](https://rickandmortyapi.com) for providing the comprehensive API\n- **Angular Team** - For the excellent framework and development tools\n- **PrimeNG** - For the beautiful UI components\n- **Open Source Community** - For the amazing tools and libraries\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  Made with ❤️ for Rick and Morty fans everywhere\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunoliratm%2Frickandmorthy-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunoliratm%2Frickandmorthy-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunoliratm%2Frickandmorthy-client/lists"}