Calendar App 📆

Este es un proyecto simple de un calendario implementado utilizando React y Redux Toolkit. El objetivo principal de este proyecto es aprender y practicar el uso de estados globales, hooks personalizados, integración de API con axios, y la administración del estado con Redux Toolkit en una aplicación de React. Esta aplicación se integra con un backend que fue programado utilizando Node js, Express y MongoDB que se encuentra en otro repositorio Link del repositorio del Backend Calendar App.

Características

Autenticación de Usuario: Los usuarios pueden crear una cuenta personalizada y luego iniciar sesión para acceder a la aplicación y gestionar sus eventos de manera segura.
Vista de calendario detallado: Permite al usuario visualizar eventos y actividades en un calendario limpio y organizado en el que podrá cambiar su apariencia (en forma de agenda, diario, semanal y mensual).
Agregar, editar y remover sus propios eventos: Los usuarios pueden agregar nuevos eventos al calendario, así como actualizar y eliminar los detalles de sus propios eventos existentes.
Visualización de eventos de otras personas: Los usuarios pueden visualizar los eventos de otras personas, lo que facilita la coordinación y la planificación en grupo.

Uso

Pantalla para autenticación

Para crear e ingresar a la cuenta podrá ingresar sus datos para poder generar una cuenta. En caso de ya haberla creado, puede loguearse.

Pantalla de carga durante la verificación del usuario

Pantalla del calendario

Los eventos creados por el usuario se mostrarán en color azul. En caso de que no sean creados por el usuario, se mostrarán en color gris.

Creación y actualización de eventos

Se podrá crear y actualizar el evento con el uso del botón de color rojo. El usuario podrá ingresar los detalles del evento como fecha y hora exacta, además de agregar una descripción.

Eliminación de eventos

El usuario debe hacer click en el evento a eliminar para que se mantenga activo, y se visualizará el botón rojo para poder remover el evento.

Visualización mensual de los eventos

El usuario deberá presionar el botón "Mes" ubicado en la parte superior derecha para visualizar los eventos del mes

Visualización diaria de los eventos

El usuario deberá presionar el botón "Día" ubicado en la parte superior derecha para visualizar los eventos del día

Visualización en forma de agenda de los eventos

El usuario deberá presionar el botón "Agenda" ubicado en la parte superior derecha para visualizar los eventos en un listado

Contribución

Si te gustaría contribuir a este proyecto y mejorar aún más la aplicación de calendario, ¡te doy la bienvenida! Siéntete libre de hacer un fork del repositorio, realizar tus cambios y enviar una solicitud de pull. ¡Espero ver tus contribuciones pronto!

Autor

Nombre: Mirian Alejandra Arévalo 🙋.
Correo Electrónico: mirianalejandra1996@gmail.com.
GitHub: https://github.com/mirianalejandra1996.
Linkedin: https://www.linkedin.com/in/mirian-arevalo/.

Instalación y Desarrollo

Este proyecto ha sido inspirado en el curso de Fernando Herrera de React js.

Clona este repositorio en tu máquina local.

    git clone https://github.com/mirianalejandra1996/Calendar-App-Frontend.git

Renombra el archivo .env.template file a .env
Reemplaza los valores a las variables de entorno.

    REACT_APP_API_URL="http://localhost:4000/api"

Navega al directorio del proyecto.

    cd calendar-app

Instala las dependencias.

    npm install

Inicia la aplicación.

    npm start

Inspiración