{"id":22907187,"url":"https://github.com/kellenkjames/product-preview","last_synced_at":"2026-05-07T04:36:15.978Z","repository":{"id":266336877,"uuid":"898031179","full_name":"Kellenkjames/product-preview","owner":"Kellenkjames","description":"A simple and elegant product-preview component built using Angular and SASS","archived":false,"fork":false,"pushed_at":"2024-12-10T18:55:23.000Z","size":9214,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T09:07:38.408Z","etag":null,"topics":["angular","sass","typescript"],"latest_commit_sha":null,"homepage":"https://kellenkjames.github.io/product-preview/","language":"SCSS","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/Kellenkjames.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-12-03T17:01:52.000Z","updated_at":"2024-12-10T18:54:34.000Z","dependencies_parsed_at":"2024-12-03T19:41:29.174Z","dependency_job_id":null,"html_url":"https://github.com/Kellenkjames/product-preview","commit_stats":null,"previous_names":["kellenkjames/product-preview"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kellenkjames%2Fproduct-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kellenkjames%2Fproduct-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kellenkjames%2Fproduct-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kellenkjames%2Fproduct-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kellenkjames","download_url":"https://codeload.github.com/Kellenkjames/product-preview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246612488,"owners_count":20805355,"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","sass","typescript"],"created_at":"2024-12-14T03:13:48.774Z","updated_at":"2025-10-09T19:04:51.344Z","avatar_url":"https://github.com/Kellenkjames.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Product Preview Card Component\n\n**A responsive and visually appealing product preview card built using Angular, SASS, and TypeScript.**\n\nThis project focuses on implementing responsive design principles, optimizing image assets for different breakpoints, and ensuring a seamless user experience across devices. It demonstrates the use of modern frontend development practices to achieve a polished and efficient layout.\n\n## Features\n\n- Built with **Angular** for scalable and maintainable component-based architecture.\n- Styled using **SASS**, leveraging variables, nesting, and mixins for efficient and reusable styles.\n- Responsive design that adapts gracefully to mobile, tablet, and desktop breakpoints.\n- Uses optimized image assets for different screen sizes to improve loading performance.\n- Clean, modern, and accessible design that ensures usability for all users.\n\n## Screenshot\n\nHere is a preview of the Product Preview Card Component:\n\n![Product Preview Card Screenshot](./product-preview/src/assets/images/final_screenshot.png)\n\n## Technologies Used\n\n- **Angular** - A robust JavaScript framework for building dynamic, component-based applications.\n- **SASS** - A CSS preprocessor that simplifies styling with advanced features like variables and nesting.\n- **HTML5** - Semantic and structured markup for content organization.\n- **CSS3** - Modern styles with responsive and visually appealing layouts.\n\n## Project Structure\n\n```plaintext\n/src\n├── app\n│   ├── components\n│   │   └── card\n│   │       ├── card.component.html\n│   │       ├── card.component.scss\n│   │       └── card.component.ts\n├── assets\n│   ├── styles\n│   │   └── styles.scss\n│   └── images\n│       ├── product-desktop.jpg\n│       └── product-mobile.jpg\n```\n\n## Setup and Installation\n\nTo run this project locally:\n\n#### 1. Clone the repository:\n\n```bash\ngit clone https://github.com/kellenkjames/product-preview.git\n```\n\n#### 2. Navigate to the project directory:\n\n```bash\ncd blog-preview-card\n```\n\n#### 3. Install the dependencies:\n\n```bash\nnpm install\n```\n\n#### 4. Start the Angular development server:\n\n```bash\nng serve\n```\n\nThe project will be available on http://localhost:4200.\n\n## Design Reference\n\nThis blog preview card was designed to closely match the design specifications provided. The design assets, including images and color palette, can be found in the /images and style-guide.md files, respectively.\n\n## Deployment\n\nThe project can be deployed using any modern hosting platform. Recommended platforms include:\n\n- GitHub Pages\n- Vercel\n- Netlify\n\n## Future Enhancements\n\n- Implement accessibility improvements to ensure compliance with WCAG standards.\n- Refactor the component into reusable subcomponents for potential future extensions.\n\n## License\n\n- This project is open-source and available under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkellenkjames%2Fproduct-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkellenkjames%2Fproduct-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkellenkjames%2Fproduct-preview/lists"}