/next-social-front

NextSocial es un prototipo de red social. Este proyecto se centra en la implementación del frontend, proporcionando una interfaz de usuario para interactuar con datos de usuarios, álbumes, fotos y tareas (TODOs) a través de APIs externas.

Primary LanguageJavaScriptApache License 2.0Apache-2.0

NextSocial Frontend

NextSocial es un prototipo de red social. Este proyecto se centra en la implementación del frontend, proporcionando una interfaz de usuario para interactuar con datos de usuarios, álbumes, fotos y tareas (TODOs) a través de APIs externas.

Tecnologías Utilizadas

  • React: Utilizado para construir la interfaz de usuario con componentes reutilizables.
  • Vite: Como herramienta de construcción y servidor de desarrollo para un rápido recargado.
  • Chakra UI: Biblioteca de componentes de UI para un diseño atractivo y responsivo.
  • Axios: Cliente HTTP para realizar solicitudes a APIs externas.
  • Zustand: Biblioteca de gestión de estado para manejar el estado global de la aplicación.
  • React Router: Para el manejo de rutas en la aplicación de una sola página (SPA).
  • Jest y Testing Library: Para pruebas unitarias y de integración.
  • ESLint y Prettier: Para asegurar la calidad del código y mantener un estilo consistente.
  • GitHub Actions: Para integración y despliegue continuos (CI/CD).
  • Docker: Para el despliegue de la aplicación en contenedores.

Características

  • Vista con listado de usuarios y detalles de usuario.
  • Listado de álbumes y fotos asociadas a cada usuario.
  • Gestión de tareas (TODOs) con capacidad para añadir, modificar y eliminar.
  • Búsqueda reactiva de tareas (TODOs) por texto.
  • Persistencia de álbumes recién visitados entre sesiones.
  • Diseño responsivo y modo oscuro.

Instalación y Uso

Requisitos Previos

Asegúrate de tener instalado Node.js (recomendamos la versión 14.x o superior) y npm en tu sistema para poder ejecutar el proyecto.

Pasos para la Instalación

  1. Clona el repositorio:
git clone https://github.com/jmtrs/next-social-front.git
cd next-social-front
  1. Instala las dependencias:
npm install
  1. Ejecuta la aplicación en modo de desarrollo:
npm run dev
  1. Abre http://localhost:3000 en tu navegador para ver la aplicación.
  2. ¡Listo! Ahora puedes empezar a interactuar con la aplicación.

Pruebas

Para ejecutar las pruebas unitarias y de integración, puedes utilizar el siguiente comando:

npm run test

Docker

Si prefieres ejecutar la aplicación en un contenedor Docker, puedes utilizar el siguiente comando:

docker build -t next-social-front .
docker run -p 3000:3000 next-social-front

Licencia

Este proyecto está licenciado bajo la Licencia Apache 2.0. Consulta el archivo LICENSE para más detalles.