{"id":19109292,"url":"https://github.com/obrm/pricing-table","last_synced_at":"2026-05-02T17:32:34.712Z","repository":{"id":163453102,"uuid":"638920253","full_name":"obrm/pricing-table","owner":"obrm","description":"This project showcases a responsive pricing table built using React, Vite, TypeScript, and Sass. The table includes three pricing cards (Basic, Standard, and Enterprise) with different features and prices, as well as Get Started buttons.","archived":false,"fork":false,"pushed_at":"2023-06-04T08:56:56.000Z","size":88,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-22T10:57:29.002Z","etag":null,"topics":["react","sass","typescript","vite"],"latest_commit_sha":null,"homepage":"https://obrm-pricing-table.netlify.app","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/obrm.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":"2023-05-10T11:41:38.000Z","updated_at":"2023-05-10T12:03:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"ec98bae8-71a4-4a45-a389-8ce59f952498","html_url":"https://github.com/obrm/pricing-table","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/obrm/pricing-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fpricing-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fpricing-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fpricing-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fpricing-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/obrm","download_url":"https://codeload.github.com/obrm/pricing-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obrm%2Fpricing-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274367808,"owners_count":25272302,"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","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["react","sass","typescript","vite"],"created_at":"2024-11-09T04:19:56.368Z","updated_at":"2026-05-02T17:32:29.678Z","avatar_url":"https://github.com/obrm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pricing Table\nThis project showcases a responsive pricing table built using React, Vite, TypeScript, and Sass. The table includes three pricing cards (Basic, Standard, and Enterprise) with different features and prices, as well as Get Started buttons.\n\n\n## Versions\nThere are two versions of the app, each with a different implementation of the `PricingCard` component.\n\n### Master Branch - Regular React App\nIn the `master` branch, the `PricingCard` component is a regular React component that includes the `Title`, `Price`, a list of `Feature` components and a `Button` components directly inside it. The parent `App` component imports the `PricingCard` component and uses it without passing any children to it.\n\n### compound-components Branch - Compound Components\nIn the `compound-components` branch, the `PricingCard` component adheres to the compound components design pattern. By accepting child components, it offers increased flexibility in terms of composition. In this version, the `App` component imports the `PricingTable` component, which contains the `PricingCard`, `Title`, `Price`, `FeaturesList`, `Feature`, and `Button` components. These components are then utilized as children of the `PricingCard` component.\n\nTo switch between the two versions, you can check out the corresponding branch in your Git repository.\n\n\n## Features\n* Responsive design\n* Clean, modern look\n* Utilizes variables, mixins, and nesting in Sass\n\n\n## Screenshots\n\n### Desktop View\n![Pricing Table](./src/assets/desktop.png)\n\n### Mobile View\n\n![Pricing Table](./src/assets/mobile.png)\n\n## Live Demo\nExperience the Pricing Table in action by visiting the live demo:\n\n[Pricing Table Live Demo](https://obrm-pricing-table.netlify.app)\n\n## Usage\nTo run the app locally, follow these steps:\n\n1. Clone the repository and navigate to the project folder.\n2. Run `npm install` to install the required dependencies.\n3. Run `npm run dev` to start the development server.\n4. Open your browser and visit http://localhost:5173 to view the app.\n\n#### Technologies Used\n\n* [React](https://reactjs.org/)\n* [TypeScript](https://www.typescriptlang.org/)\n* [SCSS](https://sass-lang.com/)\n* [Vite](https://vitejs.dev/)\n\n#### License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n## Contact Information\nFor any questions, concerns, or support, feel free to reach me out via email: [obrm770@gmail.com](mailto:obrm770@gmail.com).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobrm%2Fpricing-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fobrm%2Fpricing-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobrm%2Fpricing-table/lists"}