{"id":21922849,"url":"https://github.com/martinwebdev95/audiophileecommerceastro","last_synced_at":"2026-04-09T11:02:39.381Z","repository":{"id":221134891,"uuid":"753507701","full_name":"MartinWebDev95/AudiophileEcommerceAstro","owner":"MartinWebDev95","description":"E-commerce website based in the Frontend Mentor Challenge design","archived":false,"fork":false,"pushed_at":"2024-03-13T12:45:02.000Z","size":3160,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-27T10:43:42.642Z","etag":null,"topics":["astro","css-modules","frontend","frontend-mentor-challenge","javascript","reactjs","vercel-deployment","zustand"],"latest_commit_sha":null,"homepage":"https://audiophile-ecommerce-astro.vercel.app","language":"Astro","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/MartinWebDev95.png","metadata":{"files":{"readme":"README.en.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}},"created_at":"2024-02-06T09:06:32.000Z","updated_at":"2024-02-21T08:20:48.000Z","dependencies_parsed_at":"2024-02-06T12:48:35.193Z","dependency_job_id":"ae901e88-7eb0-4142-9cce-c991e84e1008","html_url":"https://github.com/MartinWebDev95/AudiophileEcommerceAstro","commit_stats":null,"previous_names":["martinwebdev95/audiophileecommerceastro"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MartinWebDev95%2FAudiophileEcommerceAstro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MartinWebDev95%2FAudiophileEcommerceAstro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MartinWebDev95%2FAudiophileEcommerceAstro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MartinWebDev95%2FAudiophileEcommerceAstro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MartinWebDev95","download_url":"https://codeload.github.com/MartinWebDev95/AudiophileEcommerceAstro/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244945623,"owners_count":20536297,"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":["astro","css-modules","frontend","frontend-mentor-challenge","javascript","reactjs","vercel-deployment","zustand"],"created_at":"2024-11-28T21:07:30.426Z","updated_at":"2025-12-30T21:51:14.738Z","avatar_url":"https://github.com/MartinWebDev95.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"[Button Language]: https://img.shields.io/badge/Leer%20En%20Español-000000?style=for-the-badge\n\n[![Button Language]](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/README.md)\n\n# Audiophile E-commerce                                 \n---\n\n[Audiophile E-commerce Web]: https://img.shields.io/badge/Audiophile%20Ecommerce%20Web-D87D4A?style=for-the-badge\n\nThis project is a challenge from the [Frontend Mentor](https://www.frontendmentor.io/challenges/audiophile-ecommerce-website-C8cuSd_wx) website that provides you with the design of the website. It's about creating an audio device store.\n\n[![Audiophile E-commerce Web]](https://audiophile-ecommerce-astro.vercel.app/)\n\n## 👨🏽‍💻 What technologies have I used?\n---\n\n[Button Vercel]: https://img.shields.io/badge/Deploy%20on%20Vercel-000000?style=for-the-badge\u0026logo=vercel\n[Button Astro]: https://img.shields.io/badge/Astro-000000?style=for-the-badge\u0026logoColor=BC52EE\u0026logo=astro\n[Button React]: https://img.shields.io/badge/React-000000?style=for-the-badge\u0026logo=react\n[Button Modules]:https://img.shields.io/badge/CSS%20Modules-000000?style=for-the-badge\u0026logo=css-modules\n[Button Zustand]:https://img.shields.io/badge/Zustand-000000?style=for-the-badge\u0026logo=zustand\n\n[![Button Astro]](https://astro.build/)\n[![Button React]](https://es.react.dev/)\n[![Button Modules]](https://github.com/css-modules/css-modules?tab=readme-ov-file)\n[![Button Zustand]](https://zustand-demo.pmnd.rs/)\n[![Button Vercel]](https://vercel.com/)\n\n- **Astro:**  I have used Astro as the main framework of the project, creating the vast majority of components. Astro is a framework that does not load JavaScript by default on the client, it's SSR (Server Side Rendering), and that causes the loading of the website to be practically instantaneous.\n\n- **React:** I have used React for all components that are interactive with the user, that is, all those components that trigger an event.\n\n- **CSS Modules:** I have used CSS Modules to style React components.\n\n- **Zustand:** I have used Zustand to manage the global shopping cart state. Zustand is a small, fast and scalable state management solution. Its state management is centralized and action-based.\n\n## 📸 Some Screenshots!\n---\n\n![Hero Section Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/heroSection.png)\n\n![Category Page Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/categoryPage.png)\n\n![Product Page Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/productPage.png)\n\n![Cart Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/cart.png)\n\n![Checkout Page Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/checkoutPage.png)\n\n![Checkout Page Error Screenshot](https://github.com/MartinWebDev95/AudiophileEcommerceAstro/blob/main/public/assets/screenshots/checkoutPageError.png)\n\n## 🗃️ Project Structure\n---\n\nThis is the structure that I have used in this project:\n\n```text\n/\n├── public/\n│   └── assets/          \n│       └── folder/\n│           └── image.jpg\n│\n├── src/\n│   ├── components/\n│   │   └── Component.astro\n│   │   └── Component/\n│   │       └── index.jsx\n│   │       └── Component.module.css\n│   ├── hooks/\n│   │   └── useHook.js\n│   ├── layouts/\n│   │   └── Layout.astro\n│   ├── lib/\n│   │   └── products.json\n│   ├── pages/\n│   │   └── index.astro\n│   │   └── [category]/\n│   │       └── [slug].astro\n│   ├── scripts/\n│   │   └── script.js    \n│   ├── store/\n│   │   └── store.js    \n│   └── utils/\n│       └── util.js \n└── package.json\n```\n\n## 👀 Where you can find me?\n---\n\n[Button Portfolio]: https://img.shields.io/badge/Visit%20my%20Portfolio-000000?style=for-the-badge\n[Button Linkedin]: https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge\n\n[![Button Portfolio]](https://portfolio-martinwebdev95.vercel.app/en)\n[![Button Linkedin]](https://www.linkedin.com/in/jamartindev/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinwebdev95%2Faudiophileecommerceastro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinwebdev95%2Faudiophileecommerceastro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinwebdev95%2Faudiophileecommerceastro/lists"}