{"id":17011050,"url":"https://github.com/pablomayobre/tienda-coderhouse","last_synced_at":"2026-05-09T00:44:47.207Z","repository":{"id":85483232,"uuid":"395051767","full_name":"pablomayobre/tienda-coderhouse","owner":"pablomayobre","description":"Proyecto de E-Commerce hecho con React y TypeScript para el curso de React dictado por Coderhouse","archived":false,"fork":false,"pushed_at":"2021-10-13T02:05:18.000Z","size":6354,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-27T12:48:13.635Z","etag":null,"topics":["coderhouse","ecommerce","react"],"latest_commit_sha":null,"homepage":"https://rulosartisticos.netlify.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/pablomayobre.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":"2021-08-11T16:26:03.000Z","updated_at":"2021-10-13T02:05:21.000Z","dependencies_parsed_at":"2023-03-03T11:45:53.413Z","dependency_job_id":null,"html_url":"https://github.com/pablomayobre/tienda-coderhouse","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablomayobre%2Ftienda-coderhouse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablomayobre%2Ftienda-coderhouse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablomayobre%2Ftienda-coderhouse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pablomayobre%2Ftienda-coderhouse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pablomayobre","download_url":"https://codeload.github.com/pablomayobre/tienda-coderhouse/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244960043,"owners_count":20538742,"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":["coderhouse","ecommerce","react"],"created_at":"2024-10-14T06:06:06.965Z","updated_at":"2026-05-09T00:44:42.164Z","avatar_url":"https://github.com/pablomayobre.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rulosartisticos\n\nEsta es una e-Commerce ficticia, presentada como proyecto final del curso de React de Coderhouse (Camada 16155)\n\nLa demo esta disponible en [Netlify](https://rulosartisticos.netlify.app).\n\n\n## Instalación\n\nPara instalar esta aplicación es necesario clonar el repositorio:\n```\ngit clone https://github.com/pablomayobre/tienda-coderhouse.git\n```\n\n### Dependencias\nLuego se deberá instalar las dependencias\n```\ncd tienda-coderhouse\nnpm install\n```\nSi da error, se deberá usar `npm install --force` ya que se utilizan librerías experimentales y puede que existan problemas de compatibilidad con React.\n\n### Ejecutar (Modo Desarrollo)\n\nLa aplicación fue creada con [`create-react-app`][create-react-app] por lo que se puede ejecutar en modo de desarrollo utilizando el siguiente comando:\n```\nnpm start\n```\n\nEsto permite ejecutar la página en un entorno local y que esta responda a cambios en los archivos.\n\n### Ejecutar (Modo Producción)\n\nLa otra alternativa es compilar en modo producción, para esto se utiliza el siguiente comando:\n```\nnpm run build\n```\nUna vez compilado, se creará la carpeta `build` con nuestra app lista para ser puesta en un servidor.\n\nCabe destacar que se deberá configurar el servidor para que todas las URLs dirijan a `index.html` ya que este es el punto de entrada de nuestra página web.\n\n## Dependencias\n\nEsta es una lista de las dependencias principales del proyecto.\n\n### React\n\nComo ya se mencionó anteriormente esta aplicación fue hecha a partir de [`create-react-app`][create-react-app] sin embargo React fue actualizado a la version [experimental 18.0.0][react].\n\nLa razón siendo que esta versión cuenta con funcionalidades como [Suspense][suspense] y Concurrent Mode que facilitan el desarrollo de aplicaciones que deben esperar a una API para renderizar sus páginas.\n\nEs decir que esta aplicación se beneficia de Suspense simplificando el código necesario para para mostrar pantallas de carga.\n\n\n### TypeScript\n\nEste proyecto fue desarrollado al 100% en [TypeScript][typescript], esto se logró utilizando el [template de TypeScript][typescript-template] provisto por `create-react-app`.\n\nCabe destacar que se modificó la configuración para hacer uso del modo estricto con `strict: true` y otras funciones provistas por TypeScript.\n### Chakra UI\n\nLa siguiente dependencia más usada de este proyecto es [Chakra][chakra], un conjunto de componentes muy completo que se pueden personalizar con facilidad. Toda la interfáz de usuario fue hecha con estos componentes.\n\nDe hecho las unicas 2 librerías que se agregaron fueron [`react-icons`][react-icons] para los iconos usados en la interfaz y [`formik`][formik] para el manejo de formularios (en particular el formulario de órdenes)\n\nChakra a su vez depende de [`emotion`][emotion] y [`framer-motion`][framer-motion] sin embargo estas no fueron usadas directamente, sino a travez de Chakra.\n\n### React Router\n\nPara poder navegar a través de la página de una manera más rápida, se utiliza [React-Router][react-router], en este caso tambien se utiliza la version 6.0.0 que está actualmente en beta.\n\nEsta versión permite utilizar Suspense para hacer [lazy-loading de rutas][lazy-loading] (es decir que solo se cargan las rutas necesarias y no toda la aplicación completa).\n\n### Reactfire\n\nPara interactuar con Firebase se utiliza [Reactfire][reactfire], esta librería provee una serie de Hooks y Contexts que permiten interactuar con Firebase de una forma más nativa a React.\n\nSin embargo la verdadera razón de su uso es la posibilidad de usar [Suspense][suspense] mientras se cargan los resultados de Firebase.\n\nEsta librería fuerza a usar la version 9 de Firebase, por lo que se adopta la [API modular][firebase9] de Firestore.\n\n### SWR\n\nPor ultimo [SWR][swr] o State-while-revalidate provee un Hook llamado useSWR que permite hacer pedidos asincrónicos y obtener los resultados facilmente, empleando un cache interno para no pedir un mismo resultado dos veces.\n\nEsta librería se integra muy bien con [Suspense][suspense] lo cual facilita mucho su uso.\n\nSe utilizó para hacer mocks a una API ficticia antes de incorporar Firebase, y se utiliza, en la versión final, para la carga asincrónica de las imágenes de la página.\n\n## Por Mejorar\n\nAún quedan cosas por mejorar, esta es una lista de cosas que me gustarían implementar en un futuro.\n\n### Busqueda\n\nLa barra de busqueda no es funcional, la idea era implementar [Algolia Search][algolia] para realizar una busqueda en los productos de la página.\n\n### Wishlist\n\nQue el usuario pueda marcar sus productos favoritos y añadirlos al carrito desde su Wishlist personal\n\n### Firebase Function\n\nMe gustaría que la orden de compra se realizara en una [función de Firebase][cloud-function], permitiendo así que el cliente no ejecute el código de actualización de stock y que el precio se garantice desde el backend.\n\nEsto permitiría que las reglas sean más estrictas y el cliente solo tenga permisos de escritura.\n\nLa función haría lo que [`useSaveOrder`][useSaveOrder] hace actualmente y devolvería el ID de la orden en un objeto JSON.\n\n### Validación\n\nEl formulario de orden de compra podría contar con validación de campos, en especial los referidos a e-mail y teléfono.\n\n### Contacto\n\nMe gustaría agregar un formulario de contacto y linkearlo en un footer.\n\nEste formulario guardaría la información en Firebase y contaría con un CAPTCHA para evitar el spam.\n\n### Mejorar vistas\n\nLa vista de orden de compra no es completamente responsive.\n\nAñadir una opción al modal de orden de compra para que aún con una cuenta iniciada se pueda comprar con otros datos.\n\n## Licencia\n\nCopyright (c) 2021 - Pablo Ariel Mayobre\n\n\n[create-react-app]: https://create-react-app.dev/\n[react]: https://es.reactjs.org/blog/2021/06/08/the-plan-for-react-18.html\n[suspense]: https://es.reactjs.org/docs/concurrent-mode-suspense.html\n[typescript]: https://typescriptlang.org/\n[typescript-template]: https://create-react-app.dev/docs/adding-typescript/\n[chakra]: https://chakra-ui.com/\n[react-icons]:https://react-icons.github.io/react-icons/\n[formik]:https://formik.org/\n[emotion]:https://emotion.sh/docs/introduction\n[framer-motion]:https://www.framer.com/motion/\n[react-router]:https://github.com/remix-run/react-router/blob/dev/docs/installation/getting-started.md\n[lazy-loading]:https://reactjs.org/docs/code-splitting.html\n[reactfire]:https://github.com/FirebaseExtended/reactfire\n[firebase9]:https://firebase.google.com/docs/web/modular-upgrade\n[swr]:https://swr.vercel.app/\n[algolia]:https://www.algolia.com/\n[cloud-function]:https://firebase.google.com/docs/functions\n[useSaveOrder]:https://github.com/pablomayobre/tienda-coderhouse/blob/main/src/api/useSaveOrder.ts#L35-L105","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpablomayobre%2Ftienda-coderhouse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpablomayobre%2Ftienda-coderhouse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpablomayobre%2Ftienda-coderhouse/lists"}