{"id":25580478,"url":"https://github.com/mzipi/react-store","last_synced_at":"2026-05-07T23:41:59.514Z","repository":{"id":37642786,"uuid":"498559943","full_name":"mzipi/react-store","owner":"mzipi","description":"Store front-end web app ","archived":false,"fork":false,"pushed_at":"2025-02-12T11:47:29.000Z","size":413,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-11T07:25:05.034Z","etag":null,"topics":["bootstrap","firebase","front-end","react"],"latest_commit_sha":null,"homepage":"https://gamestore-mzipi.vercel.app/","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/mzipi.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-01T02:06:41.000Z","updated_at":"2025-02-13T06:08:34.000Z","dependencies_parsed_at":"2025-02-12T12:51:26.772Z","dependency_job_id":"95302d51-0a9b-4882-b646-c648a7911d3d","html_url":"https://github.com/mzipi/react-store","commit_stats":null,"previous_names":["mzipi/react-store","mzipi/coderhouse-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mzipi/react-store","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzipi%2Freact-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzipi%2Freact-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzipi%2Freact-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzipi%2Freact-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzipi","download_url":"https://codeload.github.com/mzipi/react-store/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzipi%2Freact-store/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32760953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["bootstrap","firebase","front-end","react"],"created_at":"2025-02-21T04:16:19.702Z","updated_at":"2026-05-07T23:41:59.493Z","avatar_url":"https://github.com/mzipi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# INDICE\n1. [Introducción](#introducción)\n2. [Tecnologías](#tecnologías)\n3. [Implementaciones](#implementaciones)\n4. [Requerimientos](#requerimientos)\n5. [Instalación](#instalación)\n6. [Ejecución](#ejecución)\n7. [Video](#video)\n\n## Introducción\n\n### Esta aplicación es una tienda de videojuegos desarrollada con React para el proyecto de fin de curso de Coderhouse.\n\nEn la página principal puede verse el catalogo completo. Mientras que mediante la barra de navegación puede acceder a una categoría en concreto.  \nSi selecciona un juego tendrá una vista más detallada del mismo.  \nEn el detalle del producto puede agregar el juego al carrito, así como aumentar o diminuir la cantidad que desee comprear.  \nPara finalizar la compra dirijase al carrito e ingrese sus datos personales.\nLa app le devolerá una factura con los datos de la compra.\n\n## Tecnologías\n* create-react-app [enlace](https://www.npmjs.com/package/create-react-app)\n* react v18.1.0 [enlace](https://www.npmjs.com/package/react)\n* react-dom v18.1.0 [enlace](https://www.npmjs.com/package/react-dom)\n* react-router-dom v6.3.0 [enlace](https://www.npmjs.com/package/react-router-dom)\n* firebase v9.8.4 [enlace](https://www.npmjs.com/package/firebase)\n* bootstrap v5.2.0-beta1 [enlace](https://www.npmjs.com/package/bootstrap)\n* bootstrap-icons v1.8.3 [enlace](https://www.npmjs.com/package/bootstrap-icons)\n\n## Implementaciones\n\n### React y React dom\nUtilice React y React-dom para hacer una aplicación que cargara una sola vez y el usuario pudiera navegar rápido por sus secciones.  \nDe está librería aproveche **useState** para guardar datos y cambiar dinamicamente pequeñas partes del contenido.   \nTambién use **useEffect** para poder cargar los datos de los productos luego de haberse renderizado el componente.  \n**useContext** es el que centraliza todos los datos de la compra.\n\n### React router dom\nEsta librería me permite agregar navegación entre los componentes.   \nCon **useParams** obtengo parte de la URL en la que estoy ubicado y la aprovecho para mostrar una cosa u otra.\n\n### Firestore\nEn firestore cree una colección que contiene documentos por cada juego. Y otra colección que contiene los documentos como ordenes de compra.  \nUtilizo **getDocs** y **collection** para obtener todos los documentos de la colección de juegos.  \n**query** y **where** para filtrar los documentos por el genero de juego.\nUtilizo **getDoc**, **doc** y **collection** para obtener un juego en concreto.\n\n### Bootstrap\nBootstrap lo utilizo para maquetar facilmente y centrarme en la lógica de la aplicación.\n\n### Bootstrap icons\nBootstrap icons unicamente lo utilizo para mostrar un ícono de carga en algunas partes, otro de copyrirght y el carrito.\n\n## Requerimientos\n* Un terminal\n* Navegador web\n    * Chrome [enlace](https://www.google.com/intl/es/chrome/?brand=YTUH\u0026gclid=Cj0KCQjw_viWBhD8ARIsAH1mCd4bGJlLD5NwmC03wrf6p_17319JpVVembMglYzt_3K8lv2xTACWcKcaAg2cEALw_wcB\u0026gclsrc=aw.ds)\n    * Firefox [enlace](https://www.mozilla.org/es-ES/firefox/new/)\n    * Edge [enlace](https://www.microsoft.com/es-es/edge)\n* Node.js [enlace](https://nodejs.org/es/download)\n    * Para comprobar si tiene node instalado:\n        * `node -v`\n* NPM (se instala junto a node)\n    * Para comprobar si tiene npm instalado:\n        * `npm -v`\n\n## Instalación\n1. Abrir la terminal\n2. Dirigirse al directorio donde desea descargar la aplicación\n3. Clonar el repositorio al equipo local\n    * `git clone mzipi/gamestore-zipitria`\n4. Ingresar al directorio de la aplicación\n    * `cd gamestore-zipitria`\n5. Instalar las dependencias\n    * `npm install`\n\n## Ejecución\n1. Ejecutar la aplicación\n    * `npm start`\n2. Ir a la página principal\n    * localhost:3000 [enlace](http://localhost:3000)\n    * 127.0.0.1:3000 [enlace](http://127.0.0.1:3000)\n\n## Video\n[![Watch the video](https://i.imgur.com/4reLU8G.png)](https://drive.google.com/file/d/1zfmCVv9OFTiAUEyr7HbFXqKYXqcjLTlL/view?usp=sharing)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzipi%2Freact-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzipi%2Freact-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzipi%2Freact-store/lists"}