Practicas de desarrollo - VibeCoding

Applicando

22 Progressive Web Apps funcionales creadas con VibeCoding. Cada app accede a un recurso distinto del dispositivo movil. Abrelas en el movil desde el navegador.

Bloque 1 - Fundamentos PWA

Pantalla, gestos y datos locales

Primeras apps: estructura PWA, interaccion tactil y almacenamiento local.

NIVEL 00
📲
Mi Primera Pantalla Movil
Primera PWA. Pantalla adaptable. Manifest + service worker.
PWAManifestService Worker
Abrir appZIP
NIVEL 01
👆
Gestos Moviles
Tap, swipe, pinch y gestos multitactiles. Touch Events API.
Touch EventsSwipe
Abrir appZIP
NIVEL 02
⏰
Registro con Hora
Registra momentos con fecha y hora. Persistencia con localStorage.
localStorageDate API
Abrir appZIP
NIVEL 03
📋
Lista Temporal
Lista de tareas con anadir, completar y borrar. sessionStorage.
sessionStorageDOM
Abrir appZIP
NIVEL 04
📓
Mi Cuaderno Local
Notas persistentes que sobreviven al cierre del navegador.
localStorageNotas
Abrir appZIP
NIVEL 05
📶
Estoy Online
Detecta conexion a internet. Reacciona al cambio de red en tiempo real.
Navigator.onLineOffline
Abrir appZIP

Bloque 2 - Hardware del dispositivo

Vibracion, camara, microfono y GPS

Primer contacto con los recursos fisicos del movil desde el navegador.

NIVEL 06
📳
Boton Haptico
Vibracion programada. Patrones e intensidad con la Vibration API.
Vibration API
Abrir appZIP
NIVEL 07
📸
Foto Evidencia
Accede a la camara. Captura fotos con getUserMedia y Canvas.
getUserMediaMediaDevices
Abrir appZIP
NIVEL 08
🎙
Prueba de Microfono
Accede al microfono. Nivel de audio en tiempo real con Web Audio API.
Web Audio APIMediaRecorder
Abrir appZIP
NIVEL 09
🎤
Nota de Voz
Graba y reproduce notas de voz con MediaRecorder y Blob.
MediaRecorderBlob
Abrir appZIP
NIVEL 10
📍
Estoy Aqui
Posicion GPS con coordenadas, precision y enlace a Google Maps.
Geolocation APIGPS
Abrir appZIP
NIVEL 11
🗺
Ruta Simple
Registra una ruta GPS mientras el usuario se desplaza y calcula distancia.
watchPositionRuta GPS
Abrir app

Bloque 3 - Sensores del dispositivo

Acelerometro, brujula, luz y mas

Acceso a los sensores fisicos: movimiento, orientacion, luz ambiental, presion y temperatura.

NIVEL 12
⬤
Nivel de Bolsillo
Nivel de burbuja digital usando el giroscopio. Inclinacion en tiempo real.
DeviceOrientationGiroscopio
Abrir appZIP
NIVEL 13
📳
Detector de Sacudidas
Detecta cuando agitas el movil con el acelerometro. Reacciona con vibracion.
DeviceMotionAcelerometro
Abrir appZIP
NIVEL 14
📊
Acelerometro
Visualiza los ejes X, Y, Z del acelerometro con grafica en tiempo real.
DeviceMotionEjes X Y Z
Abrir appZIP
NIVEL 15
↻
Gira el Movil
Detecta la orientacion y reacciona al giro horizontal/vertical. Screen Orientation API.
Screen Orientation
Abrir appZIP
NIVEL 16
🧭
Brujula Web
Brujula digital con magnetometro. Indica el norte magnetico con aguja animada.
DeviceOrientationMagnetometro
Abrir appZIP
NIVEL 17
☀
Modo Luz
Mide la luz ambiental. Adapta la interfaz automaticamente a la luminosidad.
AmbientLightSensor API
Abrir appZIP
NIVEL 18
🔦
Linterna Web
Enciende y apaga el flash de la camara trasera como linterna.
ImageCaptureTorch
Abrir appZIP
NIVEL 19
🌡
Presion Ambiental
Lee el barometro. Muestra la presion atmosferica en hPa con historico grafico.
BarometerSensor API
Abrir appZIP
NIVEL 20
🌡
Temperatura Local
Sensor de temperatura ambiental del dispositivo.
ThermometerSensor API
Abrir appZIP
NIVEL 21
📔
Cuaderno de Campo
Cuaderno avanzado con categorias, busqueda y exportacion. Version completa del nivel 04.
IndexedDBExport
Abrir appZIP

Bloque 4 - React Native + Expo

Apps nativas con React Native

Aplicaciones Android/iOS construidas con React Native y Expo mediante VibeCoding.

📅
CitaYa
Gestion de citas para peluquerias, clinicas y estetica. Supabase.
AsyncStorageSupabase
Ver presentacion
🍽
ComandaGo
Comandas digital para bares y restaurantes. Pedidos en tiempo real.
Tiempo realMulti-dispositivo
🧮
PrecioMaker
Calculadora de precios con margen, IVA y comparativas. Offline.
OfflineAsyncStorage
⏱
FichajeApp
Control horario. Entrada, salida, historial y exportacion CSV/JSON.
CSVexpo-sharing
📝
Notas en la Nube
Notas sincronizadas en tiempo real con Supabase. Multi-dispositivo.
SupabaseRealtime
Abrir app web
Ver pack completo de 30 apps Presentacion 5 apps esenciales