{"id":26884796,"url":"https://github.com/coder-artisan0719/partner-portal-client","last_synced_at":"2026-04-11T19:35:16.715Z","repository":{"id":285362226,"uuid":"957859849","full_name":"coder-artisan0719/partner-portal-client","owner":"coder-artisan0719","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-31T09:17:39.000Z","size":272,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T10:21:25.926Z","etag":null,"topics":["angular","angular-cli","bootstrap","karma","rxjs","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/coder-artisan0719.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}},"created_at":"2025-03-31T08:56:55.000Z","updated_at":"2025-03-31T09:43:57.000Z","dependencies_parsed_at":"2025-03-31T10:32:07.474Z","dependency_job_id":null,"html_url":"https://github.com/coder-artisan0719/partner-portal-client","commit_stats":null,"previous_names":["coder-artisan0719/email-parser-client"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-artisan0719%2Fpartner-portal-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-artisan0719%2Fpartner-portal-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-artisan0719%2Fpartner-portal-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coder-artisan0719%2Fpartner-portal-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coder-artisan0719","download_url":"https://codeload.github.com/coder-artisan0719/partner-portal-client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246517314,"owners_count":20790397,"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","angular-cli","bootstrap","karma","rxjs","tailwindcss","typescript"],"created_at":"2025-03-31T18:28:56.318Z","updated_at":"2025-12-30T23:13:55.467Z","avatar_url":"https://github.com/coder-artisan0719.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Partner Portal\n\n## 📄 Project Overview\n\nThe **Partner Portal** is a single-page application (SPA) built using Angular that allows internal teams to view and manage partner data in a structured, interactive, and visually consistent table layout. The application replicates a provided Figma design with pixel-perfect accuracy, includes pagination, responsive UI, placeholder actions, and a loading state, ensuring a user-friendly experience aligned with modern web development best practices.\n\nThis project was completed as a home task and simulates interaction with a mock partner data API.\n\n---\n\n## 🚀 Key Features\n\n- ✅ **Dynamic Data Fetching** from a mock API using Angular services\n- ✅ **Pixel-perfect UI** based on the provided Figma design\n- ✅ **Responsive Layout** using Tailwind CSS and Bootstrap\n- ✅ **Table with Pagination** (15 items per page)\n- ✅ **Placeholder Actions** (Modals for Message Partners and Export List)\n- ✅ **Loading Spinner** during API calls\n- ✅ **User-friendly Error Handling**\n- ✅ **Component-based Architecture**\n- ✅ **Animations using Angular Animations** (transitions \u0026 hover effects)\n\n---\n\n## 🧱 Project Structure\n\n```\nsrc/app/\n│\n├── components/                   # Reusable UI components\n│   ├── button-actions/           # Action buttons (e.g., Export, Message Partners)\n│   ├── data-picker/              # Date range picker component\n│   ├── modal/                    # Reusable modal component\n│   ├── partner-table/            # Table displaying partner data\n│   └── sidebar/                  # Sidebar navigation component\n│\n├── data/\n│   └── const.ts                  # Static UI data (columns, buttons, sidebar items)\n│\n├── models/\n│   └── partner.model.ts          # Partner interface for data typing\n│\n├── services/\n│   └── partner.service.ts        # Angular service to fetch API data\n│\n└── app.component.ts             # Root component rendering the full page\n```\n\n## 🧑‍💻 Technologies Used\n\n- **Angular:** v19.2\n- **Tailwind CSS:** v4\n- **Bootstrap:** v5.3\n- **RxJS:** For observables and async data handling\n- **HttpClient:** For API integration\n- **Angular Animations:** For transitions and hover effects\n- **FontAwesome:** For icons\n- **Mock API:** [MockanAPI](https://mockanapi.com/s/67ae1b3403f9ffca6f47eb79/partners?mock_delay=5000)\n\n\n## 📊 Table Implementation\n\n- Displays columns such as: ID, Name, Type, Contract, Gross Sales, Commissions, and Conversions\n- Pagination: Shows 15 records per page using Angular logic\n- Responsive: Adapts to smaller screens and enables horizontal scrolling\n\n## ⚠️ Error Handling\n\n- API Failures: Gracefully displays a user-friendly error message if the API call fails\n- Empty/Missing Data: Checks for undefined fields before rendering\n- Fallback States: Displays loader (spinner) while awaiting response\n\n## 📱 Responsive Layout\n- Built using Tailwind and Bootstrap utilities\n- Mobile-friendly: Table layout adapts to screen width\n- Scrollable table on smaller viewports\n\n## 📦 Setup Instructions\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/coder-artisan0719/partner-portal-client.git\ncd partner-portal-client\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3. Update Environment File\n\nUpdate your environment.ts file with the correct Mock API URL:\n```bash\nMOCK_API_URL = https://mockanapi.com/s/67ae1b3403f9ffca6f47eb79/partners?mock_delay=5000\n```\n\n### 4. Run the Project\n\n```bash\nnpm start\n```\n\n### 5. Build the Project\n```bash\nnpm run build\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoder-artisan0719%2Fpartner-portal-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoder-artisan0719%2Fpartner-portal-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoder-artisan0719%2Fpartner-portal-client/lists"}