An open API service indexing awesome lists of open source software.

https://github.com/midudev/javascript-100-proyectos

100 proyectos de JavaScript con código y vídeos. ¡Gratis!
https://github.com/midudev/javascript-100-proyectos

Last synced: 28 days ago
JSON representation

100 proyectos de JavaScript con código y vídeos. ¡Gratis!

Awesome Lists containing this project

README

        






100 proyectos de JavaScript con código y vídeos




Website

 ❖ 

Proyectos

 ❖ 

Contribuir

 ❖ 

YouTube

 ❖ 

Twitter

 ❖ 

Twitch

![JavaScript Badge](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000&style=flat)
![GitHub stars](https://img.shields.io/github/stars/midudev/javascript-100-proyectos)
![GitHub issues](https://img.shields.io/github/issues/midudev/javascript-100-proyectos)
![GitHub forks](https://img.shields.io/github/forks/midudev/javascript-100-proyectos)
![GitHub PRs](https://img.shields.io/github/issues-pr/midudev/javascript-100-proyectos)
![Astro Badge](https://img.shields.io/badge/Astro-BC52EE?logo=astro&logoColor=fff&style=flat)

## ✨ Proyectos

| # | Proyecto | Descripción | Código | Website |
| --- | ---------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| 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&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/01-tinder-swipe) |
| 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&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/02-arkanoid-game) |
| 3 | **mecanografía** | Pon a prueba a qué velocidad tecleas | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/03-midu-typing-game) |
| 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&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/04-chatgpt-local) |
| 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&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/05-api-geo-ip) |
| 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&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/06-tetris-canvas) |
| 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&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/07-tier-maker) |
| 8 | **excel-js** | Creamos una hoja de SpreadSheets editable | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/08-excel-js) |
| 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&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/09-paint-win-95) |
| 10 | **stack-game** | Stack Game en 2D | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/10-stack-game) |
| 11 | **js-perf-benchmark** | Benchmark con JS | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/11-js-perf-benchmark) |
| 12 | **moto-scroll** | Animación de fondo por scroll | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=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&logoColor=fff&style=flat-square)](https://www.javascript100.dev/12-moto-scroll) |

## 🚀 Contribuir

### **Introducción**

1. Para contribuir, crea un [Fork](https://github.com/midudev/javascript-100-proyectos/fork) del proyecto.

2. Clona el repositorio en tu máquina local:

```bash
git clone [email protected]:tu_username/javascript-100-proyectos.git
```

### **Proyectos**

1. Accede a la carpeta del proyecto que quieras:

```bash
cd 01-tinder-swipe
```

2. Instala la extensión [**Live Preview**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) en Visual Studio Code.

3. Presiona `F1` y selecciona `Live Preview: Start Server`.

Realiza los cambios y crea una pull request 🚀.

### **Sitio web**

- Para contribuir al sitio web es necesario tener [Node.js +18](https://nodejs.org/) instalado y [pnpm](https://pnpm.io/):

```bash
npm install -g pnpm
```

1. Instala las dependencias:

```bash
cd web
pnpm install
```

2. Inicia el servidor de desarrollo:

```bash
pnpm dev
```

Realiza los cambios y crea una pull request 🚀.

## 🛠️ Stack

**Proyectos**:

- HTML, CSS & Javascript.

**Website**:

- [**Astro**](https://astro.build/) - The web framework for content-driven websites.
- [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types.
- [**Tailwind CSS**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
- [**@midudev/tailwind-animations**](https://tailwindcss-animations.vercel.app) - Easy peasy animations for your Tailwind project.

## 👑 Contribuidores