{"id":13400692,"url":"https://github.com/midudev/javascript-100-proyectos","last_synced_at":"2025-05-14T08:07:43.597Z","repository":{"id":222536657,"uuid":"757392262","full_name":"midudev/javascript-100-proyectos","owner":"midudev","description":"100 proyectos de JavaScript con código y vídeos. ¡Gratis!","archived":false,"fork":false,"pushed_at":"2024-12-23T09:43:17.000Z","size":25017,"stargazers_count":2486,"open_issues_count":29,"forks_count":273,"subscribers_count":30,"default_branch":"main","last_synced_at":"2025-05-13T19:13:32.779Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://javascript100.dev","language":"HTML","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/midudev.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-02-14T12:00:57.000Z","updated_at":"2025-05-12T07:00:07.000Z","dependencies_parsed_at":"2024-03-05T09:43:40.612Z","dependency_job_id":"b059834a-ebad-4cc1-9de3-26b64e4df3e7","html_url":"https://github.com/midudev/javascript-100-proyectos","commit_stats":null,"previous_names":["midudev/javascript-100-proyectos"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midudev%2Fjavascript-100-proyectos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midudev%2Fjavascript-100-proyectos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midudev%2Fjavascript-100-proyectos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midudev%2Fjavascript-100-proyectos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/midudev","download_url":"https://codeload.github.com/midudev/javascript-100-proyectos/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101557,"owners_count":22014908,"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":[],"created_at":"2024-07-30T19:00:54.676Z","updated_at":"2025-05-14T08:07:38.586Z","avatar_url":"https://github.com/midudev.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://www.javascript100.dev\"\u003e\n    \u003cimg src=\"./web/public/readme.jpg\" /\u003e \n    \u003c/a\u003e\n  \u003ch3\u003e\n    \u003cstrong\u003e100 proyectos de JavaScript con código y vídeos\u003c/strong\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://www.javascript100.dev\"\u003e\n        Website\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;❖\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-proyectos\"\u003e\n        Proyectos\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;❖\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-contribuir\"\u003e\n        Contribuir\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;❖\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://www.youtube.com/c/midudev\"\u003e\n        YouTube\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;❖\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://twitter.com/midudev\"\u003e\n        Twitter\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;❖\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://twitch.tv/midudev\"\u003e\n        Twitch\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![JavaScript Badge](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript\u0026logoColor=000\u0026style=flat)\n![GitHub stars](https://img.shields.io/github/stars/midudev/javascript-100-proyectos)\n![GitHub issues](https://img.shields.io/github/issues/midudev/javascript-100-proyectos)\n![GitHub forks](https://img.shields.io/github/forks/midudev/javascript-100-proyectos)\n![GitHub PRs](https://img.shields.io/github/issues-pr/midudev/javascript-100-proyectos)\n![Astro Badge](https://img.shields.io/badge/Astro-BC52EE?logo=astro\u0026logoColor=fff\u0026style=flat)\n\n\u003c/div\u003e\n\n## ✨ Proyectos\n\n|  #   | Proyecto         | Descripción                                                              | Código                                                                                                                                                                                   | Website                                                       |\n| --- | ---------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |\n| 1   | **tinder-swipe** | Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript. | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/01-tinder-swipe) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/01-tinder-swipe) |\n| 2   | **arkanoid-game** | Juego mítico y clásico de Arkanoid para controlar con teclado. | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/02-arkanoid-game) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/02-arkanoid-game) |\n| 3   | **mecanografía** | Pon a prueba a qué velocidad tecleas | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/03-midu-typing-game) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/03-midu-typing-game) |\n| 4   | **chatgpt-local** | Creamos un ChatGPT que se ejecuta en tu navegador. 100% privado y gratuito | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/04-chatgpt-local) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/04-chatgpt-local) |\n| 5   | **buscar-info-IP** | Llama a una api para obtener información de cualquier IP | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/05-api-geo-ip) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/05-api-geo-ip) |\n| 6   | **tetris-canvas** | Creamos el famoso juego tetris como desafío de una prueba técnica | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/06-tetris-canvas) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/06-tetris-canvas) |\n| 7   | **tier-maker** | Arrastra imágenes de cosas y ponlas en el nivel que creas | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/07-tier-maker) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/07-tier-maker) |\n| 8   | **excel-js** | Creamos una hoja de SpreadSheets editable | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/08-excel-js) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/08-excel-js) |\n| 9   | **paint-win-95** | El clásico editor de imágenes de Windows | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/09-paint-win-95) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/09-paint-win-95) |\n| 10   | **stack-game** | Stack Game en 2D | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/10-stack-game) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/10-stack-game) |\n| 11   | **js-perf-benchmark** | Benchmark con JS | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/11-js-perf-benchmark) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/11-js-perf-benchmark) |\n| 12   | **moto-scroll** | Animación de fondo por scroll | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github\u0026logoColor=fff\u0026style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/12-moto-scroll) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel\u0026logoColor=fff\u0026style=flat-square)](https://www.javascript100.dev/12-moto-scroll) |\n\n## 🚀 Contribuir\n\n### **Introducción**\n\n1. Para contribuir, crea un [Fork](https://github.com/midudev/javascript-100-proyectos/fork) del proyecto.\n\n2. Clona el repositorio en tu máquina local:\n\n```bash\ngit clone git@github.com:tu_username/javascript-100-proyectos.git\n```\n\n### **Proyectos**\n\n1. Accede a la carpeta del proyecto que quieras:\n\n```bash\ncd 01-tinder-swipe\n```\n\n2. Instala la extensión [**Live Preview**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) en Visual Studio Code.\n\n3. Presiona `F1` y selecciona `Live Preview: Start Server`.\n\nRealiza los cambios y crea una pull request 🚀.\n\n### **Sitio web**\n\n- Para contribuir al sitio web es necesario tener [Node.js +18](https://nodejs.org/) instalado y [pnpm](https://pnpm.io/):\n\n```bash\nnpm install -g pnpm\n```\n\n1. Instala las dependencias:\n\n```bash\ncd web\npnpm install\n```\n\n2. Inicia el servidor de desarrollo:\n\n```bash\npnpm dev\n```\n\nRealiza los cambios y crea una pull request 🚀.\n\n## 🛠️ Stack\n\n**Proyectos**:\n\n- HTML, CSS \u0026 Javascript.\n\n**Website**:\n\n- [**Astro**](https://astro.build/) - The web framework for content-driven websites.\n- [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types.\n- [**Tailwind CSS**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.\n- [**@midudev/tailwind-animations**](https://tailwindcss-animations.vercel.app) - Easy peasy animations for your Tailwind project.\n\n## 👑 Contribuidores\n\n\u003ca href=\"https://github.com/midudev/javascript-100-proyectos/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=midudev/javascript-100-proyectos\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmidudev%2Fjavascript-100-proyectos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmidudev%2Fjavascript-100-proyectos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmidudev%2Fjavascript-100-proyectos/lists"}