{"id":25487132,"url":"https://github.com/aliasrafbd/webdev-assignment-03","last_synced_at":"2026-01-26T00:06:24.370Z","repository":{"id":254873074,"uuid":"847404876","full_name":"aliasrafbd/webdev-assignment-03","owner":"aliasrafbd","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-08T03:25:39.000Z","size":3698,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-18T17:53:06.012Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/aliasrafbd.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":"2024-08-25T18:18:39.000Z","updated_at":"2024-10-08T03:25:42.000Z","dependencies_parsed_at":"2024-08-26T18:36:23.851Z","dependency_job_id":"9c971cf5-731a-444e-aba1-7d4f629142b3","html_url":"https://github.com/aliasrafbd/webdev-assignment-03","commit_stats":null,"previous_names":["aliasrafbd/webdev-assignment-03"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aliasrafbd/webdev-assignment-03","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliasrafbd%2Fwebdev-assignment-03","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliasrafbd%2Fwebdev-assignment-03/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliasrafbd%2Fwebdev-assignment-03/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliasrafbd%2Fwebdev-assignment-03/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aliasrafbd","download_url":"https://codeload.github.com/aliasrafbd/webdev-assignment-03/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliasrafbd%2Fwebdev-assignment-03/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28761895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T23:06:19.311Z","status":"ssl_error","status_checked_at":"2026-01-25T23:03:50.555Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":[],"created_at":"2025-02-18T19:35:45.662Z","updated_at":"2026-01-26T00:06:24.358Z","avatar_url":"https://github.com/aliasrafbd.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Peddy - Pet Adoption Platform\n\n**Welcome to Assignment 6 !!!**\nIn this assignment You have to create a pet adoption platform where users can browse and adopt pets. We will provides you APIs to fetch pet-related data such as all pets, categories of pets, and specific pet details , pet data based on category\n\n## Private For your Assignment\n\nyou have to create private repo in our Google Classroom . here is the Link\n\n# [https://classroom.github.com/a/gUlZfxsK](https://classroom.github.com/a/gUlZfxsK)\n\n## APIs\n\nThe following APIs are available in Peddy:\n\n1. **Fetch All Pets**\n\n   - **Endpoint:** [https://openapi.programming-hero.com/api/peddy/pets](https://openapi.programming-hero.com/api/peddy/pets)\n   - **Description:** Retrieves a list of all available pets for adoption. The data includes details like pet name, type, age, and adoption status.\n\n2. **Fetch Pet Details by ID**\n\n   - **Endpoint:**`https://openapi.programming-hero.com/api/peddy/pet/pet-id`\n\n   - **Example:** [https://openapi.programming-hero.com/api/peddy/pet/1](https://openapi.programming-hero.com/api/peddy/pet/1)\n   - **Description:** Fetches detailed information for a specific pet based on its ID. This can be used to view additional information about the pet such as vacination history, description\n\n3. **Fetch All Pet Categories**\n\n   - **Endpoint:** [https://openapi.programming-hero.com/api/peddy/categories](https://openapi.programming-hero.com/api/peddy/categories)\n\n   - **Description:** Fetches a list of all pet categories available in the platform, such as dogs, cats, rabbit , bird, etc.\n\n4. **Fetch Pets by Category**\n\n   - **Endpoint:** `https://openapi.programming-hero.com/api/peddy/category/categoryName`\n   - **Example:** [https://openapi.programming-hero.com/api/peddy/category/dog](https://openapi.programming-hero.com/api/peddy/category/dog)\n\n   - **Description:** Fetches data of pets under a specific category, in this case, dogs. This can be used to filter pets based on their category.\n\n## Key Requirements\n\n### 1. **Navbar**\n\n- Implement the navbar as per the Figma design.\n- Ensure it is responsive across Desktop, Tablet, and Mobile devices.\n- The navbar should collapse into a mobile menu on smaller screens.\n\n### 2. **Banner Section**\n\n- Design the banner section as per Figma design.\n- Include a \"View More\" button that, when clicked, scrolls down to the “Adopt Your Best Friend” section.\n- Ensure the banner is fully responsive.\n\n### 3. **Adopt Your Best Friend Section**\n\n- **Left Side**:\n  - Display 4 dynamic categories below the section title and subtitle, fetched from the provided API.\n  - Add a \"Sort By Price\" button on the right, with a subtitle on the left, as per the design.\n  - By default, show all available pets, with the active category styled according to Figma.\n  - After clicking on a category, fetch and display pets from that category in a grid layout.\n  - If no pets are available for a category, show a meaningful message.\n  - Each card must display the following:\n    - Thumbnail/Image\n    - Pet Name\n    - Breed\n    - Birth Date\n    - Gender\n    - Price\n    - Buttons: \"Like\", \"Adopt\", and \"Details\"\n  - If any field is missing from the API response, handle it by displaying a placeholder or meaningful message.\n- **Right Side**:\n  - Clicking the \"Like\" button should add the pet's thumbnail to the right-side grid.\n  - Display a 2-column layout for liked pet thumbnails.\n\n### 4. **Modal Window**\n\n- When the \"Details\" button is clicked, open a modal that displays all pet information like figma\n- The modal should close when the user clicks close button.\n\n### 5. **Footer**\n\n- Implement the footer as per the Figma design.\n- Ensure it is responsive.\n\n### 6. **Responsive Design**\n\n- The entire platform must be responsive and functional on Desktop, Tablet, and Mobile devices.\n- Use Tailwind CSS breakpoints for responsiveness.\n\n## Challenges\n\n### 1. **Loading Spinner**\n\n- Display a loading spinner for at least 2 seconds when fetching data from the API.\n\n### 2. **Sort by Price**\n\n- Implement sorting functionality for pets. When the \"Sort by Price\" button is clicked, sort pets in descending order based on price . sorting on active category is recommended but if you can sort all the data you will get full mark for this requirement.\n\n### 3. **Adopt Button Behavior**\n\n- Implement an adoption process. When the \"Adopt\" button is clicked, show a countdown (3, 2, 1) and then change the button text to \"Adopted.\"\n\n### 4. **Handle Null or Undefined Values**\n\n- If any values from the API (e.g., pet breed, birth date) are null or undefined, display a placeholder or relevant message instead of leaving it blank.\n\n## 5. A Beautyfull README.md File\n\nEnsure the final project includes a `README.md` file with the following details:\n\n- Project name.\n- Short description of the project.\n- 5 key features of the project.\n- ES6 features used.\n- Live link to the deployed project.\n\n## What to Submit\n\n- Your Private Github Repo Link\n- Your Live Link\n\n# Best of Luck","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faliasrafbd%2Fwebdev-assignment-03","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faliasrafbd%2Fwebdev-assignment-03","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faliasrafbd%2Fwebdev-assignment-03/lists"}