StudyBoard ✏️ 📚

Índice

Proyecto 📝
- Diseño
Diagramas
- Diagrama de flujo
- Diagrama de datos
Instalación 🛠️
- Requerimientos
Estructura del proyecto
Tecnologías
Uso
Contribución 🤝
Coders👩‍💻
Demo

Proyecto

Study Board permite a los usuarios crear grupos de estudio donde pueden compartir y organizar sus ideas utilizando post-its. Cada post-it puede contener texto, fragmentos de código o puntos clave para la discusión del grupo. Además, la aplicación está integrada con un calendario, lo que ayuda a los usuarios a fijar fechas importantes y mantenerse organizados con sus tareas. Esto convierte a Study Board en una herramienta invaluable tanto para estudiantes como para profesionales que buscan una forma eficiente de colaborar y gestionar sus tiempos de estudio.

Nació de la visión de nuestro cliente, Alejandro Arends, quien identificó la necesidad de una plataforma interactiva que haga del estudio una experiencia más colaborativa y organizada.

Este proyecto refleja nuestro compromiso con el uso de la tecnología para resolver problemas reales. Creemos que Study Board fomentará mejores experiencias de aprendizaje, apoyará la colaboración entre usuarios, ayudándoles en sus estudios a través de la organización conjunta.

Es un proyecto full-stack, aquí está el repositorio del front, desarrollado en un período de 3 semanas como proyecto final pedagógico del bootcamp FemCoders (P5).

Diseño

El diseño de la interfaz fue generado en un primer momento en Figma, donde se delimitaron en primera instancia los elementos más atómicos, para ir construyendo componente a componente el diseño completo de la aplicación.

Se ha diseñado mobile-first, con diseño responsive en dos puntos de quiebre: tablet y desktop.

Figma: diseño completo

Diagramas

Se han trabajado diferentes diagramas, tanto de usuario como de flujo, para poder comprender y acotar la experiencia de usuario y la funcionalidad de la página. Así, se ha facilitado el desarrollo y diseño de lógica e interfaz.

Diagrama de flujo

Ver diagrama de flujo

Diagrama de flujo usuario

Ver diagrama de flujo de usuario

Diagrama de datos

La aplicación de StudyBoard implementa diferentes roles que, a su vez, tienen distintos permisos. Esto ha resultado en una aplicación de alta complejidad en las relaciones entre entidades. Para poder visualizar y comprender dichas relaciones se ha creado un diagrama de datos que puede verse a continuación.

Ver diagrama de datos

Instalación 🛠️

Requerimientos

Node.js
VSC con extensión Java Pack VSC, IntelliJ or tu IDE de preferencia
Base de datos

Clona los repositorios:

Front:
 git clone https://github.com/Euge-Saravia/studyBoard-frontend

Back:
 git clone https://github.com/flaviferri/studyBoard-BackEnd

Haz npm install en el repo del front
Crea tu base de datos (en este caso se ha usado PostgreSQL) y conectála al repo del back:

En application.properties:

Añade el link de acceso, tu usuario y contraseña de pgAdmin o de tu base de datos

En el caso de que estes usando otra BBDD, instala las dependencias respectivas en el documento pom.xml

Para el registro y login con Github:

Incluye en application.properties tu CLIENT_ID y CLIENT_SECRET de Github

https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app

En values.properties:

incluye tu secret key en BASE64 para encripción de token

Estructura del proyecto

Como proyecto de desarrollo Full-Stack, se divide en Front y en Back, resultando en dos estrcuturas distintivas que pueden verse en los respectivos README.

El back del proyecto se ha desarrollado en SpringBoot, centrándose en una arquitectura de MVC de tres capas.

La estructura actual del back es la siguiente:

/
├── STUDYBOARD-BACKEND
│   ├── src/main/java
│   │    ├── config
│   │    │     ├── jwt
│   │    │     │    ├── JwtAuthenticationFilter
│   │    │     │    └── JwtService
│   │    │     ├── AppConfig
│   │    │     └── SecurityConfig
│   │    ├── controller
│   │    │     ├── AuthController
│   │    │     ├── AuthResponse
│   │    │     ├── BoardController
│   │    │     ├── GroupController
│   │    │     ├── LoginController
│   │    │     ├── PostItController
│   │    │     └── UseController
│   │    ├── dto
│   │    │     ├── AuthRequest
│   │    │     ├── BoardDTO
│   │    │     ├── CreatedByDTO
│   │    │     ├── GroupDTO
│   │    │     ├── PostitDTO
│   │    │     └── RegisterRequest
│   │    ├── exceptions
│   │    │      ├── BoardNotFoundException
│   │    │      ├── EmailExistsException
│   │    │      ├── ErrorObject
│   │    │      ├── GlobalExceptionHandler
│   │    │      ├── GroupHasNoBoards
│   │    │      ├── GroupNotFoundException
│   │    │      └── NoPostItsOnSelectedDate
│   │    ├── model
│   │    │      ├── BaseEntity
│   │    │      ├── Board
│   │    │      ├── Group
│   │    │      ├── PermissionEntity
│   │    │      ├── Postit
│   │    │      ├── RoleEntity
│   │    │      ├── RoleEnum
│   │    │      ├── UserEntity
│   │    │      └── UserGroupRole
│   │    ├── repository
│   │    │      ├── BoardRepository
│   │    │      ├── GroupRepository
│   │    │      ├── PermissionRepository
│   │    │      ├── PostItRepository
│   │    │      ├── RoleRepository
│   │    │      ├── UserGroupRoleRepository
│   │    │      └── UserRepository
│   │    ├── service
│   │    │      ├── AuthService
│   │    │      ├── BoardService
│   │    │      ├── CustomUserDetailsService
│   │    │      ├── GroupService
│   │    │      ├── IBoardService
│   │    │      ├── IGroupService
│   │    │      ├── IPostitService
│   │    │      ├── IUserService
│   │    │      ├── PostItService
│   │    │      ├── RoleService
│   │    │      ├── SetupDataLoader
│   │    │      ├── UserGroupRoleSerivce
│   │    │      └── UserService
│   │    ├── StudyBoardBackendApplication
│   │    ├── resources
│   │    │    ├── application.properties
│   │    │    └── values.properties
│   │    └── test
│   ├── target
│   ├── .env
│   ├── .gitignore
│   ├── mvnw
│   ├── mvnw.cmd
│   ├── pom.xml
└── └── README.md