H8ter™️

Contenido 📝

1. Objetivo
2. Sobre el proyecto
3. Deploy
4. Stack
5. Instalación
6. Vistas
7. Funcionalidades
8. Futuras funcionalidades
9. Contribuciones
10. Webgrafia
11. Contacto

Zona para profesores ℹ️

1. Usuario superadmin:

   [email protected]
   password: 123456789
   

2. Usuario de prueba

   [email protected]
   password: 123456789
   

3. Usuario inactivo

   [email protected]
   password: 123456789
   

Objetivo 🎯

Este proyecto requería conexión a una API funcional y usar react para crear una web que conecte con la API encargada de gestionar una red social llamada H8ter.

Funcionalidades

⚡El usuario puede crear un post tanto desde home como desde su perfil y en la vista de detalles de un post

⚡El usuario puede editar su descripción, su banner y su avatar

⚡El usuario puede borrar sus propios posts

⚡El usuario puede dar o quitar likes tanto en la vista de perfil como en la de detalle o en home

⚡En home se muestran los posts de perfiles privados

⚡El admin puede inactivar usuarios

⚡Si un usuario está inactivo no puede iniciar sesión

⚡Manejo de errores en las peticiones del back-end

Deploy 🚀

Url a producción 🚀🚀🚀

Stack

Instalación en local

1. Clonar el repositorio
2. $ npm install
3. $ npm run dev

Vistas

Landing sin haber iniciado sesión
Landing sin haber iniciado sesión
Register Login Perfil de usuario Creación de post en perfil de usuario Creación de post en home Vista detalle de un post Admin

Futuras funcionalidades

⬜ Creación de imágenes en el post, ya que el back-end lo permite

⬜ Comentarios y seguir a usuarios para que la vista de post en detalle sea más completa

⬜ Poder hacer peticiones de amistad a usuarios privados

⬜ Reactivar usuarios inactivos

Contribuciones

Las sugerencias y aportaciones son siempre bienvenidas.

Puedes hacerlo de dos maneras:

1. Abriendo una issue
2. Crea un fork del repositorio
   • Crea una nueva rama

     $ git checkout -b feature/nombreUsuario-mejora
     

   • Haz un commit con tus cambios

     $ git commit -m 'feat: mejora X cosa'
     

   • Haz push a la rama

     $ git push origin feature/nombreUsuario-mejora
     

   • Abre una solicitud de Pull Request

Webgrafia:

Para conseguir mi objetivo he recopilado información y usado estas librerías:

• https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--docs
• https://mui.com/material-ui/material-icons/ y https://mui.com/
• https://github.com/motdotla/dotenv
• https://momentjs.com/
• https://reactstrap.github.io/?path=/story/home-installation--page

Contacto