Empezar tutorial interactivo

← Volver a Proyectos

Daily Mood Tracker with React Native

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

📝 Instrucciones:

Crea una aplicación móvil que permita a los usuarios registrar su estado de ánimo diario (😃 Feliz, 😐 Neutral, 😢 Triste), visualizar su estado actual y un historial reciente.

🌱 Cómo comenzar este proyecto

Crea el proyecto con TypeScript usando Expo:

1npx create-expo-app@latest mood-tracker --template blank-typescript 2cd mood-tracker 3npm run start

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.

📝 Instrucciones:

  • La app debe permitir seleccionar un estado de ánimo tocando un emoji (😃, 😐, 😢).
  • Debe mostrarse el estado actual de hoy (por ejemplo: “Hoy te sientes: 😃 Happy”).
  • Debe existir un historial que liste los últimos estados con hora legible.
  • Cuando no haya registros, mostrar un mensaje: “No hay registros todavía”.
  • Incluir un botón para reiniciar el historial (limpiar lista y estado actual).
  • No uses fetch ni APIs externas; trabaja solo con estado local (useState) y efectos (useEffect).
  • Renderiza el historial con FlatList y claves estables.
  • Aplica renderizado condicional (sin estado actual vs. con estado, lista vacía vs. con datos).

💡 Tips para terminar este proyecto

No te pongas con el código de inmediato; primero diseña una estrategia:

  • ¿Qué estados vas a necesitar? (p. ej., currentMood, history).
  • ¿Qué acciones tendrá el usuario? (seleccionar estado, reiniciar).
  • ¿Cómo y cuándo usarás useEffect?
    • Uno al montar (logs/diagnóstico).
    • Otro cuando cambie currentMood para agregar al historial.
  • Usa tipos en TypeScript para los registros (MoodEntry) y valores base (MoodBase).
  • Piensa en accesibilidad: botones con accessibilityLabel.

Regístrate para obtener acceso gratis a este proyecto

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

Regístrate para obtener acceso gratis a este proyecto

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

8 hrs

Tecnologías