{"id":20879809,"url":"https://github.com/joserafael0160/e-commerce","last_synced_at":"2025-09-05T23:54:53.717Z","repository":{"id":250805539,"uuid":"835522687","full_name":"joserafael0160/E-commerce","owner":"joserafael0160","description":"This project is an E-commerce application developed in React 🛠️. It allows users to explore products 🛍️ and add them to a shopping cart 🛒. This project is designed with the intention of enhancing my skills with hooks such as useID(), useReducer(), useContext(), and others.","archived":false,"fork":false,"pushed_at":"2024-08-08T21:39:48.000Z","size":343,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-12T02:44:11.265Z","etag":null,"topics":["e-commerce","ecommerce","ecommerce-framework","ecommerce-website","react","react-ecommerce","react-hooks","react-project","react-projects","reactjs"],"latest_commit_sha":null,"homepage":"https://joserafael0160.github.io/E-commerce/","language":"JavaScript","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/joserafael0160.png","metadata":{"files":{"readme":"README.es.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,"zenodo":null}},"created_at":"2024-07-30T02:37:16.000Z","updated_at":"2025-04-15T08:40:37.000Z","dependencies_parsed_at":"2024-08-09T03:46:47.319Z","dependency_job_id":null,"html_url":"https://github.com/joserafael0160/E-commerce","commit_stats":null,"previous_names":["joserafael0160/e-commerce"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/joserafael0160/E-commerce","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joserafael0160%2FE-commerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joserafael0160%2FE-commerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joserafael0160%2FE-commerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joserafael0160%2FE-commerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joserafael0160","download_url":"https://codeload.github.com/joserafael0160/E-commerce/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joserafael0160%2FE-commerce/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273838358,"owners_count":25177162,"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-05T02:00:09.113Z","response_time":402,"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":["e-commerce","ecommerce","ecommerce-framework","ecommerce-website","react","react-ecommerce","react-hooks","react-project","react-projects","reactjs"],"created_at":"2024-11-18T07:17:54.416Z","updated_at":"2025-09-05T23:54:53.686Z","avatar_url":"https://github.com/joserafael0160.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca id=\"top\"\u003e\u003c/a\u003e\n\n\u003ch1 align=\"center\"\u003e\u003cimg src=\"./public/favicons/favicon-96x96.png\" width=\"30\" align=\"center\"\u003e E-commerce\u003c/h1\u003e  \n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/made%20with-love-E760A4.svg\" alt=\"Hecho con amor\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"Licencia\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"#-acerca-del-proyecto\" target=\"_blank\"\u003e\n        Acerca Del Proyecto\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-vista-previa\" target=\"_blank\"\u003e\n        Vista Previa\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-características\" target=\"_blank\"\u003e\n        Características\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-tecnologías\" target=\"_blank\"\u003e\n        Tecnologías\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-cómo-empezar\" target=\"_blank\"\u003e\n        Cómo Empezar\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-comandos\" target=\"_blank\"\u003e\n        Comandos\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-contribuciones\" target=\"_blank\"\u003e\n        Contribuciones\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-licencia\" target=\"_blank\"\u003e\n        Licencia\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-Soporte\" target=\"_blank\"\u003e\n        Soporte\n    \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003eSi quieres leer este readme en **inglés**:\n\u003e- [**README en Inglés**](https://github.com/joserafael0160/E-commerce/blob/main/README.md)\n\n## 📜 Acerca Del Proyecto\nBienvenido a nuestro E-commerce: En nuestro sitio, puedes explorar una amplia variedad de productos, desde ropa de hombre y mujer hasta equipos electrónicos y joyería. \n\n¿Buscas algo específico? Utiliza nuestros filtros por categoría o precio mínimo para encontrar lo que necesitas. \n\n¡Disfruta de la comodidad de comprar en línea y descubre todo lo que tenemos para ofrecerte! 💻🛒\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\" \u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n## 👀 Vista previa\n\u003ch4\u003eEn un iPhone SE (375x667)\u003c/h4\u003e\n\u003cimg src=\"./src/assets/images/webp/E-commerce(iPhone_SE).webp\" alt=\"Captura de pantalla del proyecto con una resolucion de 375x667\" width=\"200\"\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n## 💬 Características\n - **Soporte de Favicon**: Se ha añadido soporte para una amplia v dad de tamaños de favicon, asegurando que el ícono del sitio se muestre correctamente en todos los dispositivos y plataformas.\n\n - **Etiquetas Open Graph y Twitter**: Se han incluido etiquetas meta de Open Graph y Twitter, lo que optimiza la vista previa del sitio web en plataformas sociales como Facebook y Twitter.\n\n - **Compatibilidad entre navegadores**: La página web utiliza la etiqueta meta `X-UA-Compatible`, que garantiza la compatibilidad con varios navegadores, especialmente versiones antiguas de Internet Explorer.\n\n - **Mostrar una lista de productos desde un JSON**: He creado una interfaz para mostrar una lista de productos que provienen de un archivo JSON. Esto permite a los usuarios ver los productos disponibles en la tienda.\n\n - **Diseño de cuadrícula responsive**: En esta aplicación, los productos se mostrarán en filas y columnas, ajustándose para verse bien tanto en pantallas grandes como en dispositivos móviles.\n\n - **Filtrar por categoría**: Se implementó un filtro que permite a los usuarios seleccionar una categoría específica (por ejemplo, “Jewelery”, “Electronics”, etc.). Al aplicar el filtro, la lista de productos se actualiza para mostrar solo los productos de esa categoría.\n\n - **Filtrar por precio**: Agregé la funcionalidad de filtrar productos por rango de precios. Los usuarios pueden establecer un mínimo, y la lista de productos se ajusta automáticamente para mostrar solo los productos dentro de ese rango.\n\n\n - **Uso de useContext para evitar pasar props innecesarios**: Utilizar useContext para administrar el estado global de la aplicación. Esto evita la necesidad de pasar props manualmente entre componentes y mejora la eficiencia.\n \n - **Carrito de compras**: \n1. **Agregar productos al carrito:**\n   - Se ha implementado la capacidad de agregar productos al carrito desde la lista de productos. Los usuarios pueden hacer clic en un botón para agregar al carrito y el producto se agrega a su selección.\n\n2. **Eliminar productos del carrito:**\n   - Los usuarios pueden eliminar productos del carrito si cambian de opinión o si ya no desean comprar un artículo específico.\n\n3. **Modificar la cantidad de productos en el carrito:**\n   - Se ha implementado la funcionalidad para que los usuarios puedan ajustar la cantidad de un producto en el carrito. Esto es útil si desean comprar más o menos unidades de un artículo.\n\n4. **Sincronización de cambios en el carrito con la lista de productos:**\n   - Cuando los usuarios agregan o eliminan productos del carrito, los cambios se reflejan automáticamente en la lista de productos. Esto garantiza una experiencia coherente para los usuarios.\n\n5. **Guardar el carrito en localStorage:**\n   - Al guardar el carrito en el almacenamiento local (localStorage), los usuarios pueden recuperar su selección incluso después de recargar la página. Esto mejora la usabilidad y la comodidad.\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n\n## 🧰 Tecnologías utilizadas\n- [**React**](https://reactjs.org/) - Una biblioteca de JavaScript para construir interfaces de usuario interactivas.\n- [**Vite**](https://vitejs.dev/) - Un entorno de desarrollo rápido y ligero para aplicaciones web modernas.\n- [**ESLint**](https://eslint.org/) - Una herramienta de código abierto que te ayuda a encontrar y corregir problemas en tu código JavaScript.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n\n## 🚀 Cómo Empezar\n1. **Haz un Fork** o clona este repositorio\n\n```bash\ngit clone git@github.com:joserafael0160/E-commerce.git\n```\n\n2. Instala las dependencias:\n\n- Usé [**bun**](https://bun.sh) para instalar y gestionar las dependencias.\n  \n```bash\n## Instala bun para MacOS, WSL \u0026 Linux:\ncurl -fsSL https://bun.sh/install | bash\n\n# Instala bun para Windows:\npowershell -c \"iwr bun.sh/install.ps1|iex\"\n\n# Instala con bun:\nbun install\n```\n\n- o puedes usar [**pnpm**](https://pnpm.io):\n\n```bash\n# Instala pnpm globalmente si no lo tienes:\nnpm install -g pnpm\n\n# Instala las dependencias:\npnpm install\n```\n\n3. Ejecuta el servidor de desarrollo:\n\n```bash\n# Ejecuta con bun:\nbun run dev\n\n# Ejecuta con pnpm:\npnpm run dev\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n## 🧞 Comandos\n|      | Comando   | Acción                                         |\n| :--- | :-------- | :-------------------------------------------- |\n| ⚙️    | `dev`     | Inicia el servidor de desarrollo local.           |\n| ⚙️    | `build`   | Genera la versión de producción en `./dist/`.    |\n| ⚙️    | `lint`    | Ejecuta ESLint para encontrar problemas en tu código JavaScript. |\n| ⚙️    | `preview` | Muestra una vista previa de la versión local.                      |\n| ⚙️    | `predeploy` | Genera la versión de producción antes de implementarla. |\n| ⚙️    | `deploy`  | Implementa el sitio en GitHub Pages desde la carpeta `dist`. |\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n## 🤝 Contribuciones\n\n¡Las contribuciones son siempre bienvenidas! Ya sea que estés informando errores, solicitando nuevas funciones o mejorando las funcionalidades existentes, tu ayuda es **muy apreciada**.\n\nSi tienes alguna sugerencia que podría mejorar el proyecto, por favor haz un [_fork_](https://github.com/joserafael0160/E-commerce/fork) del repositorio y crea una [_pull request_](https://github.com/joserafael0160/E-commerce/pulls). También puedes simplemente abrir un [_issue_](https://github.com/joserafael0160/E-commerce/issues) con la etiqueta \"enhancement\".\n\nAquí tienes una guía rápida:\n\n1. Haz un [_fork_](https://github.com/joserafael0160/E-commerce/fork) del Proyecto\n2. Clona tu [_fork_](https://github.com/joserafael0160/E-commerce/fork) (`git clone \u003cURL del fork\u003e`)\n3. Añade el repositorio original como remoto (`git remote add upstream \u003cURL del repositorio original\u003e`)\n4. Crea tu Rama de Funcionalidad (`git switch -c feature/NuevaFuncionalidad`)\n5. Realiza tus Cambios (`git commit -m 'Add: alguna NuevaFuncionalidad'`)\n6. Haz Push a la Rama (`git push origin feature/NuevaFuncionalidad`)\n7. Abre una [_pull request_](https://github.com/joserafael0160/E-commerce/pulls)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n## 🔑 Licencia\n[MIT](https://github.com/joserafael0160/E-commerce/blob/main/LICENSE)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n## 🙏 Soporte\nNo olvides dejar una estrella ⭐️\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eVolver al inicio 🔝\u003c/a\u003e)\u003c/p\u003e\n\n\u003cbr\u003e\n\u003chr\u003e\n\u003cp align=\"center\"\u003e✌️\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003csub\u003e\u003csup\u003eUn proyecto creado por \u003ca href=\"https://github.com/joserafael0160\"\u003e@joserafael0160\u003c/a\u003e\u003c/sup\u003e\u003c/sub\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoserafael0160%2Fe-commerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoserafael0160%2Fe-commerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoserafael0160%2Fe-commerce/lists"}