{"id":23886545,"url":"https://github.com/gah-code/certs-app","last_synced_at":"2025-02-23T03:47:11.775Z","repository":{"id":256910039,"uuid":"856790876","full_name":"gah-code/certs-app","owner":"gah-code","description":"Certification App","archived":false,"fork":false,"pushed_at":"2024-10-30T21:55:09.000Z","size":53,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-04T06:36:53.211Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/gah-code.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}},"created_at":"2024-09-13T08:00:24.000Z","updated_at":"2024-10-30T21:55:13.000Z","dependencies_parsed_at":"2024-09-13T21:15:50.365Z","dependency_job_id":"dc274d3d-9ec4-4dd1-b866-2ad3090032d9","html_url":"https://github.com/gah-code/certs-app","commit_stats":null,"previous_names":["gah-code/certs-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fcerts-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fcerts-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fcerts-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fcerts-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gah-code","download_url":"https://codeload.github.com/gah-code/certs-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240266856,"owners_count":19774075,"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":[],"created_at":"2025-01-04T06:37:03.429Z","updated_at":"2025-02-23T03:47:11.751Z","avatar_url":"https://github.com/gah-code.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Certificates Filtering Component\n\nCertificate display component with filtering functionality built in React. Users can filter certificates based on different categories, providing a clean and interactive experience. This README will walk you through the components and their usage.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Components](#components)\n  - [App](#app)\n  - [Certs](#certs)\n  - [Cert](#cert)\n- [Filtering Logic](#filtering-logic)\n- [Styling](#styling)\n- [Prop Types](#prop-types)\n\n## Overview\n\nThe project consists of a set of components designed to display a list of certificates with the ability to filter them by category. Users can choose different categories to narrow down the list or view all certificates at once.\n\n## Installation\n\nTo run this project locally:\n\n1. Clone the repository:\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   ```\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd \u003cproject-directory\u003e\n   ```\n\n3. Install the dependencies:\n\n   ```bash\n   npm install\n   ```\n\n4. Start the development server:\n\n   ```bash\n   npm start\n   ```\n\n## Usage\n\nThe app displays a list of certificates and provides buttons to filter them by category. The filtering is done using React's state management, allowing for an interactive and responsive user experience.\n\n## Components\n\n### App\n\nThe `App` component is the main entry point of the project. It manages the state of certificates (`certs` and `filteredCerts`) and handles loading states. It also contains the filtering logic and passes down relevant props to the `Certs` component.\n\n#### Key Responsibilities\n\n- Manages the loading state.\n- Manages the complete list of certificates and the filtered list.\n- Generates the list of unique categories for filtering.\n\n### Certs\n\nThe `Certs` component is responsible for displaying the list of certificates and the filtering buttons.\n\n#### Props\n\n- `certs` (array): The list of certificates to display.\n- `categories` (array): The available categories for filtering.\n- `filterItems` (function): Function to handle filtering of certificates based on the selected category.\n\n#### Key Responsibilities\n\n- Renders filter buttons for each category.\n- Renders the `Cert` component for each certificate in the filtered list.\n\n### Cert\n\nThe `Cert` component is responsible for displaying individual certificate details such as the image, name, date, and additional information.\n\n#### Props\n\n- `id` (string/number): Unique identifier for the certificate.\n- `image` (string): URL for the certificate image.\n- `info` (string): Description of the certificate.\n- `name` (string): Certificate name.\n- `date` (string): Date of the certificate.\n\n#### Features\n\n- **Read More/Show Less**: The `Cert` component has a \"Read More\" toggle for lengthy descriptions.\n\n## Filtering Logic\n\nThe filtering is implemented in the `App` component. It extracts unique categories from the certificate data and adds an \"all\" category to allow users to reset the filter.\n\n```jsx\nconst allCategories = ['all', ...new Set(certificateData.map((cert) =\u003e cert.category))];\n\nconst filterItems = (category) =\u003e {\n  if (category === 'all') {\n    setFilteredCerts(certificateData);\n  } else {\n    const newItems = certificateData.filter((cert) =\u003e cert.category === category);\n    setFilteredCerts(newItems);\n  }\n};\n```\n\n## Styling\n\n- **Button Styles**: Buttons are styled using the class `.filter-btn`.\n- **Container Styles**: Components are styled using CSS classes such as `.btn-container`, `.certs`, `.single-cert`, etc.\n- **CSS Framework**: The styles can be customized using CSS or a preferred styling library.\n\n## Prop Types\n\nPropTypes are used to ensure the components receive the correct props, helping to catch bugs early during development.\n\nExample for `Cert` Component:\n\n```jsx\nCert.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  image: PropTypes.string.isRequired,\n  info: PropTypes.string.isRequired,\n  name: PropTypes.string.isRequired,\n  date: PropTypes.string.isRequired,\n};\n```\n\n## License\n\nThis project is open-source and available under the MIT License.\n\n## Contributing\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/bee08f78-9ff1-4b04-b020-6a66e14c584c/deploy-status)](https://app.netlify.com/sites/g-certs/deploys)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgah-code%2Fcerts-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgah-code%2Fcerts-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgah-code%2Fcerts-app/lists"}