🎟 Reto planteado
- Objetivos
- Objetivos generales y objetivos técnicos
- Hoja de ruta
- Resultado
- Imagen de la aplicación vista escritorio
- Imagen de la aplicación vista móvil
- Descripción del proyecto
- Conclusiones
1️⃣ Código documentado
2️⃣ Aplicar buenas prácticas
3️⃣ Implementar testing
☝ Proyecto desarrollado en ReactJs
✌️ Vista previa de un calendario actual
🤟 Evento click con ventana modal para añadir citas al calendario
🖖 Incluir formulario en modal con título, hora de inicio y hora final
🖐 Mostrar lista de citas ordenadas por hora de inicio
🆓 Usar librerías consideradas.
📝 Estructar pasos y ordenar plan de desarrollo
🕵️♀️ Investigación previa sobre implementar calendarios y posibles librerías para React
👩💻 Leer docu de librerías y estudiar su manejo
⚖️ Planteamiento de diferentes opciones y decisión final.
Vista escritorio
Vista mobile
El proyecto permite seleccionar una día en los días hábiles de calendario inicial (izquierda)
Tras seleccionar el día, aparece una modal con un formulario a rellenar. El formulario consta de tres inputs:
- el título o nombre de cita/evento
- una hora de inicio
- una hora final.
Al confirmar los datos, la ventana modal desaparece. Los datos introducidos se almacenan en el LocalStorage
Finalmente se recogen esos datos, se suben a un JSON (donde se encuentran añadidos los ejemplos iniciales) y se renderizan en el calendario de eventos, en el día seleccionado.
Durante el desarrollo de esta pequeña aplicación web se ha utilizado las siguientes tecnologías:
- Proptypes
- React day picker
- React modal
- Moment js
- Node Sass
- Material-ui
- Bootstrap
Componentes
- App (estados y gestión de eventos)
- Header (planteado para añadir mejora)
- Main
- Calendar (calendiario inicial)
- WindowModal (Modal)
- Formulario
- Schedule (calendario lista de eventos)
- Footer
Services
- data.json (ejemplo de eventos añadidos)
Stylesheets
- app.scss (variables y estilos)
- calendar.scss
- form.scss (modal y formulario)
- schedule.scss
- footer
Images
👩💻 Me he estrenado el en uso de librerías para trabajar con calendarios y he aprendido un montón.
He comprendido la importancia de analizar cual es la que mejor se adapta a mis conocimientos actuales. También la complejidad de averiguar cuál es la que presta servicios en relación a lograr los objetivos marcados y sobre todo, comprender su estructura para conseguir adapatarla a las necesidades del proyecto.
Para mejorar la experiencia del usuario:
- 1 Botón eliminar cita
- 2 Opción de cambiar cita
- 4 Salir de la modal clickando el fondo
- 5 Botón de mejora de accesibilidad
- 6 Añadir otras opciones de calendarios locales
- 7 Ruta para acceso a cita y añadir tareas
Aumentar garantía:
- 1 Validar formulario
- 2 Incluir un testing
Mejoras en el diseño
- 1 Aplicar un landing inicial en el componente Header.js
- 2 Añadir más animaciones o transiciones y aumetar el dinamismo
- 3 Botón cambiar estilos (temas)
Gracias!!