{"id":24464294,"url":"https://github.com/asbhogal/react-tech-commerce.js-site","last_synced_at":"2026-05-04T09:33:16.461Z","repository":{"id":154252604,"uuid":"584522853","full_name":"asbhogal/React-Tech-Commerce.Js-Site","owner":"asbhogal","description":"An eCommerce site which offers a range of technology products using Commerce.js (Headless CMS). The site allows customers to browse the items, switch between cart, checkout and home and add single or multiple products. A Stripe gateway is also configured (in test mode), directing them to the checkout and payment page, styled using Material UI.","archived":false,"fork":false,"pushed_at":"2024-01-02T01:31:47.000Z","size":1489,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T11:16:18.973Z","etag":null,"topics":["api","commerce-js","commercejs","ecommerce","ecommerce-website","javascript","material-ui","react","react-hook-form","react-router","react-router-dom","reactjs","stripe","stripe-payments","typescript"],"latest_commit_sha":null,"homepage":"https://litelife.vercel.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/asbhogal.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}},"created_at":"2023-01-02T20:10:23.000Z","updated_at":"2024-12-05T14:06:40.000Z","dependencies_parsed_at":"2023-12-31T17:25:29.952Z","dependency_job_id":"4cdad08c-9996-4ecb-98b9-a5f7c5adfaa8","html_url":"https://github.com/asbhogal/React-Tech-Commerce.Js-Site","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/asbhogal/React-Tech-Commerce.Js-Site","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FReact-Tech-Commerce.Js-Site","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FReact-Tech-Commerce.Js-Site/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FReact-Tech-Commerce.Js-Site/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FReact-Tech-Commerce.Js-Site/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asbhogal","download_url":"https://codeload.github.com/asbhogal/React-Tech-Commerce.Js-Site/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asbhogal%2FReact-Tech-Commerce.Js-Site/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32601546,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"online","status_checked_at":"2026-05-04T02:00:06.625Z","response_time":58,"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":["api","commerce-js","commercejs","ecommerce","ecommerce-website","javascript","material-ui","react","react-hook-form","react-router","react-router-dom","reactjs","stripe","stripe-payments","typescript"],"created_at":"2025-01-21T05:15:09.524Z","updated_at":"2026-05-04T09:33:16.440Z","avatar_url":"https://github.com/asbhogal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ch1\u003eLite Life - React Tech Commerce.js Site\u003c/h1\u003e\n\n\u003c/div\u003e\n\nAn eCommerce site which offers a range of high-end technology products using Commerce.js Headless CMS. A Stripe gateway is also configured (in test mode) directing customers to the checkout and payment page with a mock transaction flow. This has been built using TypeScript, React, React Hook Form, Material UI, Babel, PostCSS \u0026 Webpack and deployed via Vercel.\n\n\u003cstrong\u003eFeatures:\u003c/strong\u003e\u003cbr\u003e\n  - eCommerce Site with several dummy products\n  - Allows multiple purchases of products\n  - Ability to update cart (increase/decrease/remove items and empty cart)\n  - Leverages Commerce.js and Stripe gateway for data storage and transactions\n  - Form validation with dynamic location/region fields (using React Hook Form)\n  - DOMPurify to sanitize HTML strings from Commerce.js\n  - Material UI used to render stylized React components\n  - Fully responsive\n  - Optimised for the web\n\nPlease note that the payment system is configured to sandbox mode (ie. no payments will be taken from an active card. If you wish to use dummy credit card details instead, Stripe have provided some \u003ca target=\"_blank\" href=\"https://stripe.com/docs/testing#cards\"\u003ehere\u003c/a\u003e)\n\n\u003cstrong\u003eStacks \u0026#38; Tools Used:\u003c/strong\u003e\u003cbr\u003e\n\u003cbr\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/typescript/typescript-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/typescript/typescript-original.svg\" alt=\"TypeScript logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/react/react-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/react/react-original.svg\" alt=\"React logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/babel/babel-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/babel/babel-original.svg\" alt=\"Babel logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/materialui/materialui-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/materialui/materialui-original.svg\" alt=\"MaterialUI logo\" width=\"50\" height=\"50\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/postcss/brand/blob/master/dist/postcss-logo-symbol.svg\"\u003e\u003cimg src=\"https://github.com/postcss/brand/blob/master/dist/postcss-logo-symbol.svg\" alt=\"postcss logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://avatars.githubusercontent.com/u/53986236?s=280\u0026v=4\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/53986236?s=280\u0026v=4\" alt=\"React Hook Form logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/devicons/devicon/blob/master/icons/webpack/webpack-original.svg\"\u003e\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/webpack/webpack-original.svg\" alt=\"Webpack logo\" width=\"50\" height=\"50\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\n\u003cstrong\u003eLinks\u003c/strong\u003e\u003cbr\u003e\n - \u003ca target=\"_blank\" href=\"https://litelife.vercel.app/\"\u003eLite Life - Commerce.js Site\u003c/a\u003e\n\nDisclaimer\n\n - The name 'Lite Life' used herein is solely fictional and any representation to an existing company, in part or whole, is entirely coincidental.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasbhogal%2Freact-tech-commerce.js-site","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasbhogal%2Freact-tech-commerce.js-site","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasbhogal%2Freact-tech-commerce.js-site/lists"}