Logo, una animación de memoji sonriendo

Proyecto: App de Recordatorios para móviles

Introducción

Proyecto app de Recordatorios para móviles inspirada por los recordatorios de iOS. Hecha con las siguientes tecnologías: React 18, React Router, Firebase Auth, Realtime DB y Storage. Multiusuario.

Tipo:

  • Aplicación web
  • Optimizada para móviles

Herramientas:

  • CSS & HTML
  • React 18
  • React Router 6
  • Firebase backend
  • Git & GitHub
  • Netlify

En vivo:

Propósito del proyecto

Inspirado por la app de recordatorios de iOS, he decidido recrearla parcialmente utilizando un stack basado en React y Firebase como backend.

La app puede ser usada por varios usuarios, cada uno con su propio login. Se pueden crear y borrar listas y también los recordatorios con un retraso por si se cambia la intención. Se pueden añadir imágenes a cada recordatorio.

Existen listas predefinidas como las tareas de hoy y de los próximos tres días...

Mi papel en el proyecto

Utilizando la app Figma se ha creado el diseño y la UI de la app.

Posteriormente, paso a paso fui construyendo la estructura de la app y el flujo de UX. La conexión con Firebase se utilizó como backend. Luego se añadieron diferentes características. Al final, se utilizó Netlify vía GitHub para el despliegue.

La idea es seguir añadiendo nuevas características y mejorar el diseño.

Tres tarjetas de ofertas

Web stack y explicación

Lugar de trabajo: Visual Studio Code. Utilicé Vite como entorno de desarrollo rápido junto con ESLint y Prettier para mantener un código limpio y consistente.

Figma: Utilicé Figma para diseñar y crear interfaces de usuario atractivas, centrándome en la experiencia del usuario y la interfaz de usuario.

CSS: Transformé diseños en aplicaciones funcionales utilizando CSS moderno. Hice uso de Flexbox, Grid y la nueva container query para lograr un diseño fluido y responsivo.

React: Componentes reutilizables, props. Uso de renderizado condicional. Control de formularios con estado a través de value y onChange. useEffect para consultas de red y otras oportunidades. useState. React Context.

Firebase: Implementé registro de usuarios, envío de datos a la base de datos en tiempo real, inicio y cierre de sesión, así como funcionalidad para eliminar datos.

Netlify: Logré una implementación continua y sin problemas a través de GitHub, asegurando actualizaciones fluidas y constantes.

Extras: Integré react-markdown y react-feather para mejorar la funcionalidad y el aspecto visual de la aplicación.

Git: Gestioné eficazmente el control de versiones utilizando commits, ramas, merge, restore y push para mantener un historial de cambios coherente.