{"id":50810654,"url":"https://github.com/mathdebate09/storika","last_synced_at":"2026-06-13T04:32:06.737Z","repository":{"id":246946915,"uuid":"821895955","full_name":"mathdebate09/storika","owner":"mathdebate09","description":"A dummy frontend shopping-cart website - made with ReactJS/TailwindCSS","archived":false,"fork":false,"pushed_at":"2024-07-05T19:00:48.000Z","size":15135,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-06T00:25:36.261Z","etag":null,"topics":["design","shopping-site","tailwind-ui"],"latest_commit_sha":null,"homepage":"https://storika.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathdebate09.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-06-29T18:42:30.000Z","updated_at":"2024-07-06T00:25:49.682Z","dependencies_parsed_at":"2024-07-06T00:25:41.130Z","dependency_job_id":"faf37f41-2fc2-428e-aa29-3b45c5f89e65","html_url":"https://github.com/mathdebate09/storika","commit_stats":null,"previous_names":["mathdebate09/storika"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mathdebate09/storika","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdebate09%2Fstorika","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdebate09%2Fstorika/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdebate09%2Fstorika/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdebate09%2Fstorika/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathdebate09","download_url":"https://codeload.github.com/mathdebate09/storika/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathdebate09%2Fstorika/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34272603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-13T02:00:06.617Z","response_time":62,"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":["design","shopping-site","tailwind-ui"],"created_at":"2026-06-13T04:32:06.146Z","updated_at":"2026-06-13T04:32:06.732Z","avatar_url":"https://github.com/mathdebate09.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storika\n\nA dummy frontend shopping-cart website using - with ReactJS/TailwindCSS\n\n\u003e [Live website](https://storika.vercel.app/)\n\n## Previews\n\n### Home\n\n![storika-home](https://github.com/mathdebate09/storika/assets/140599484/3b32c853-d2af-44c6-8f29-af15b6b1160b)\n\n### Products (Loading skeleton)\n\n![storika-loading](https://github.com/mathdebate09/storika/assets/140599484/9097b86e-2dd7-4708-bba9-e2b969af8e39)\n\n### Product (FakeStore API)\n\n![storika-products](https://github.com/mathdebate09/storika/assets/140599484/865aa4cc-67d2-4970-a4e5-3dc4a4010210)\n\n## Individual Product Route (Loading skeleton)\n\n![storika-product-load](https://github.com/mathdebate09/storika/assets/140599484/203fc081-16e7-43a4-aeb9-a9f3bebe64df)\n\n## Individual Product Route\n\n![storika-product-route](https://github.com/mathdebate09/storika/assets/140599484/46c5b8f1-5144-475a-9ff6-a549107dba98)\n\n### Cart (Empty page - I made that cute art :D)\n\n![empty-cart](https://github.com/mathdebate09/storika/assets/140599484/6e7ef753-53b0-428f-8b4e-bcdcd2e353c3)\n\n### Cart (Dummy checkout)\n\n![storika-checkout](https://github.com/mathdebate09/storika/assets/140599484/0f32731b-a725-47f8-bf0e-c299075ed4ab)\n\n### 404 Page (a little hobby I have)\n\n![storika-404-footer](https://github.com/mathdebate09/storika/assets/140599484/a8a44203-df0d-47c1-bfaa-3146b952f982)\n\n## Features\n\n- Beautiful light-themed interface. _coughs_\n- Unique and visually appealing 404 page \u0026\u0026 Empty Cart page (I really meant it when I said **UNIQUE** \u0026\u0026 I also made the [svg art](https://storika.vercel.app/cart) from the empty-cart page)\n- Products displayed and filtered using the Fakestore API\n- Properly routed pages with React Router\n- Responsive design for optimal viewing on all devices\n- Cart functionality allowing users to add, remove, and adjust quantities\n\n## Tools/Languages\n\n[![React](https://img.shields.io/badge/-React-000?style=for-the-badge\u0026logo=react)](https://react.dev/learn)\n[![JS](https://img.shields.io/badge/-JavaScript-000?style=for-the-badge\u0026logo=javascript\u0026logoColor=F0DB4F)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![HTML](https://img.shields.io/badge/-HTML-000?style=for-the-badge\u0026logo=html5)](https://developer.mozilla.org/en-US/docs/Web/HTML)\n[![TailwindCSS](https://img.shields.io/badge/-TailwindCSS-000?style=for-the-badge\u0026logo=tailwindcss\u0026logoColor=1572B6)](https://tailwindcss.com/docs/installation)\n[![Vite](https://img.shields.io/badge/-Vite-000?style=for-the-badge\u0026logo=vite)](https://vitejs.dev/guide/)\n[![Vitest](https://img.shields.io/badge/-Vitest-000?style=for-the-badge\u0026logo=vitest)](https://vitest.dev/guide/)\n[![Vercel](https://img.shields.io/badge/-Vercel-000?style=for-the-badge\u0026logo=vercel)](https://vercel.com/docs/getting-started-with-vercel)\n\n## Getting started\n\n- Make sure you have [Node 20.xx.x](https://nodejs.org/en/download/package-manager) or higher and [Git](https://git-scm.com/downloads) downloaded\n\n```bash\ngit clone git@github.com:mathdebate09/storika.git\ncd storika\nnpm install\nnpm run dev\n```\n\n## Learning Outcomes\n\n- Gained experience on working with `React Router` and managing routed pages.\n- Learned how to share states between components using `Context API`.\n- Writing UI tests using `vitest` and prop-checking with `propTypes`.\n- Also, attempted to use custom code-formatting using `Prettier` and `ES Lint` (been avoiding them for too long).\n\n## Asset credits\n\n- **Icon links**\n  - [Cart](https://lucide.dev/icons/shopping-bag)\n  - [Remove item](https://lucide.dev/icons/trash-2)\n  - [Visa](https://www.svgrepo.com/svg/328144/visa), [MasterCard](https://www.svgrepo.com/svg/508701/mastercard-full) \u0026 [Paypal](https://www.svgrepo.com/svg/508716/paypal)\n  - [Github](https://www.svgrepo.com/svg/512317/github-142)\n  - [EmptyCart Image](https://gtihub.com/amthdebta09) (yep I made that :D)\n- **Google fonts**\n  - Logo Font: [Playwrite USA Modern](https://fonts.google.com/specimen/Playwrite+US+Modern?preview.text=storika.)\n  - System Font: [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin?preview.text=Hello%20Wolrd)\n  - 404 Page heading: [EB Garamond](https://fonts.google.com/specimen/EB+Garamond)\n- **Carousel images**: [Desktop](https://www.artstation.com/artwork/kQQgaA), [Laptop](https://www.aroged.com/2024/06/25/apple-does-not-allow-the-release-of-pc-emulators-on-ios/), [Typewriter](https://unsplash.com/photos/black-typewriter-on-brown-wooden-table-rLNtIsnrp6A), [Walkman](https://medium.com/coinmonks/download-mp3-from-youtube-playlist-efa44493b47a) \u0026 [Game Console](https://quizgecko.com/learn/nintendo-trivia-rhntqm)\n- Homepage Painting: [Unsplash link](https://unsplash.com/photos/horse-and-carriage-inside-cave-painting-kVXGjqRe7IY)\n- Products data from [FakeStore API](https://fakestoreapi.com/).\n\n## Code snippets\n\n- CSS Resets: [Josh W. Comeau's Reset](https://www.joshwcomeau.com/css/custom-css-reset/) \u0026\u0026 [Andy Bell's Reset](https://piccalil.li/blog/a-more-modern-css-reset/)\n- Carousel: A [material-tailwind](https://www.material-tailwind.com/docs/react/carousel) component.\n- Footer: A [flowbite](https://flowbite.com/docs/components/footer/#social-media-icons) component.\n- Select dropdown: Another [flowbite](https://flowbite.com/docs/forms/select/#select-input-example) component.\n- Loading Skeleton: Yohohoho again, [flowbite](https://flowbite.com/docs/components/skeleton/#image-placeholder).\n- Meta tag in HTML: A [dev.to article](https://dev.to/mathdebate09/add-thumbnails-to-your-project-links-for-better-seo-5gca) by me\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathdebate09%2Fstorika","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathdebate09%2Fstorika","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathdebate09%2Fstorika/lists"}