---
title: "Proyectos Full Stack e Interactivos | Bader Idris"
canonical_url: "https://baderidris.com/es/projects"
last_updated: "2026-06-13T21:30:15.065Z"
locale: es
meta:
  description: "Explora mis proyectos Full Stack con Nuxt, Vue, Node, GSAP y Three.js. Mostrando diseño responsivo y herramientas interactivas."
  "og:description": "Explora mis proyectos Full Stack con Nuxt, Vue, Node, GSAP y Three.js. Mostrando diseño responsivo y herramientas interactivas."
  "og:title": "Proyectos Full Stack e Interactivos"
---

- HTML
- CSS
- Javascript
- Vue
- Typescript
- Sass
- Docker
- Nginx
- Nuxt
- Electron
- ThreeJs
- CapacitorJs

### // Página de producto de comercio electrónico

[![Página de producto de comercio electrónico](https://raw.githubusercontent.com/Bader-Idris/ecommerce-product-page/main/design/desktop-preview.jpg)go to Página de producto de comercio electrónico](https://bader-idris.github.io/ecommerce-product-page/)

Página de producto de comercio electrónico interactiva y receptiva, puede agregar y eliminar artículos del carrito y ver la cantidad total de artículos en el carrito, y navegar a través de las imágenes del producto

### // Mi primer desafío 3D: Rumbo al horizonte

[![Mi primer desafío 3D: Rumbo al horizonte](https://baderidris.com/imgs/train-gif.gif)go to Mi primer desafío 3D: Rumbo al horizonte](https://baderidris.com/es/projects/train)

¡Simulación de locomotora 3D de alta fidelidad con ajuste de sombras profesional, extracción de rutas de clasificación angular, vapor de chimenea dinámico y un sistema de suspensión reactivo en un terreno interactivo!

### // Clon de aplicación web de agencia de diseño

[![Clon de aplicación web de agencia de diseño](https://raw.githubusercontent.com/Bader-Idris/guru-agency-duplication-site/refs/heads/bader/brave_703HxjzGmt.png)go to Clon de aplicación web de agencia de diseño](https://beautiful-web-application.netlify.app/)

Una impresionante aplicación web diseñada para una agencia de diseño, que muestra hermosas interacciones CSS. La aplicación presenta un innovador efecto de conversión de color de fondo al pasar el mouse, así como varias técnicas de manipulación de texto, lo que la convierte en una experiencia visualmente atractiva y atractiva para los usuarios.

### // API de Países

[![API de Países](https://raw.githubusercontent.com/Bader-Idris/countries-api/refs/heads/bader/design-assets/design/desktop-preview.jpg)go to API de Países](https://countries-apis-bader.netlify.app/)

Explore datos globales con esta aplicación elegante y receptiva. Obtenga detalles de los países, cambie entre el modo oscuro/claro y busque o filtre por región sin esfuerzo.

### // Página de precios

[![Página de precios](https://raw.githubusercontent.com/Bader-Idris/pricing_options_page/main/design/desktop-preview.jpg)go to Página de precios](https://bader-idris.github.io/pricing_options_page/)

Explore mi página de precios interactiva y receptiva con una variedad de planes, que ofrece suscripciones anuales y mensuales. Elija entre tres planes principales adaptados a sus necesidades.

### // Aplicación de tareas

[![Aplicación de tareas](https://raw.githubusercontent.com/Bader-Idris/todo-app/main/screenshots/dark-desk.png)go to Aplicación de tareas](https://bader-idris.github.io/todo-app/)

Una aplicación de tareas que se basa en el almacenamiento local, por lo que puede salir de la página de forma segura y volver cuando sea necesario. Es una aplicación de tareas interactiva y receptiva que le permite agregar, eliminar, marcar como completada y filtrar tareas.

### // Formulario de varios pasos

[![Formulario de varios pasos](https://raw.githubusercontent.com/Bader-Idris/multi-step-form/main/design/desktop-preview.jpg)go to Formulario de varios pasos](https://bader-idris.github.io/multi-step-form/)

Me enorgullece mostrar un formulario de varios pasos muy avanzado, fácil de usar y visualmente atractivo, que consta de 4 pasos, incluida una página de agradecimiento, que es un ejemplo perfecto de cómo puedo conectar con éxito muchos elementos DOM con un solo botón.

### // Generador de Citas Aleatorias

[![Generador de Citas Aleatorias](https://raw.githubusercontent.com/Bader-Idris/random-quote/refs/heads/main/Screenshot%20from%202025-01-12%2021-39-33.png)go to Generador de Citas Aleatorias](https://bader-idris.github.io/random-quote/)

¡Inspírate con citas aleatorias! Esta aplicación limpia y receptiva cuenta con un elegante botón de dados para generar nuevas citas al instante.

### // Juego de caracteres árabes

[![Juego de caracteres árabes](https://baderidris.com/imgs/letters-game-image.webp)go to Juego de caracteres árabes](http://letters-game.online)

Un juego competitivo basado en letras árabes usando websocket, un proyecto avanzado profundo construido en dos meses de desarrollo. Desarrollado durante más de 250 horas, utilizando Docker, Docker Compose, Nginx, Redis, MongoDB, Nuxt 3 y Nitro 2.

### // Panel - Chat y Video Seguro

[![Panel - Chat y Video Seguro](https://baderidris.com/es/dashboard/__og-image__/image.png)go to Panel - Chat y Video Seguro](https://baderidris.com/es/dashboard)

Acceda a contenido exclusivo, recursos y servicios en la plataforma de Bader Idris. Incluye chat en tiempo real, videollamadas y gestión segura de usuarios.