- Proyecto 📝
- Diagramas
- Instalación 🛠️
- Estructura del proyecto
- Tecnologías
- Uso
- Contribución 🤝
- Coders👩💻
- Demo
Desarrollo de una aplicación de viajes en la que cada usuario puede ver, añadir, editar y eliminar destinos a los que quiere ir, además de ver los destinos de otros usuarios.
La aplicación permite a los usuarios hacer login, y es a través de esta autenticación que tienen acceso a editar y eliminar sus destinos creados.
En el proyecto se ha creado tanto la parte del Front on React js con Tailwind para el CSS partiendo de prototipos dados por el cliente, como toda la parte del Back con Java SpringBoot y PostgreSQL.
Funcionalidades
- Poder ver todos los destinos
- Formulario de registro
- Formulario de acceso con e-mail y contraseña
- Al acceder, el usuario autenticado ve los botones de editar y eliminar en sus destinos
- Los usuarios regostrados pueden ver el detalle de cada destino
- Todas als acciones del usuario con CRUD o registro/acceso tienen alertas
- Todos los formularios tienen validación y control de errores
- Cambio de iconos en navbar cuando el usuario accese a la app
- Buscador funcional para buscar por nombre de destino o ubicación
- Poder crear destinos
- Poder editar destinos
Para entender la funcionalidad de la aplicación y la lógica a seguir se ha realizado un diagrama de flujo.
Se ha normalizado a segunda forma las tablas de la base de datos, resultando en dos tablas: una de destinos y una de usuarios.
- 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/LauraGDev/happy-travel-front
Back:
git clone https://github.com/flaviferri/HappyTravel-BackEnd
-
Haz npm install en el repo del front
-
Crea tu base de datos y conectála al repo del back:
pon el link de acceso, tu usuario y contraseña de pgAdmin o de tu BBDD en el archivo application.resources
Como proyecto Full-Stack, la estructura se divide en Front y en Back.
El back del proyecto se ha realziado con Java SpringBoot, con una arquitectura MVC de 3 capas.
La estructura final del back es la siguiente:
/
├── happy-travel-back
│ ├── src/
│ │ ├── main
│ │ │ ├── java
│ │ │ │ ├── config
│ │ │ │ │ ├── ApplicationConfig
│ │ │ │ │ └── SecurityConfig
│ │ │ │ ├── controllers
│ │ │ │ │ ├── AuthController
│ │ │ │ │ ├── AuthResponse
│ │ │ │ │ ├── DestinationController
│ │ │ │ │ ├── LoginRequest
│ │ │ │ │ ├── RegisterRequest
│ │ │ │ │ └── UserController
│ │ │ │ ├── jwt
│ │ │ │ │ └── JwtAuthenticationFilter
│ │ │ │ ├── models
│ │ │ │ │ ├── Destination
│ │ │ │ │ └── User
│ │ │ │ ├── repositories
│ │ │ │ │ ├── DestinationRepository
│ │ │ │ │ └── UserRepository
│ │ │ │ ├── role
│ │ │ │ │ └── Role
│ │ │ │ ├── services
│ │ │ │ │ ├── AuthService
│ │ │ │ │ ├── DestinationService
│ │ │ │ │ └── JwtService
│ │ │ │ └── HappyTravelApplication
│ │ │ └── resources
│ │ │ └── application.properties
│ │ └── test
│ │ └── HappyTravelApplicationTests
│ ├── target
│ └── .mvn
├── .gitignore
├── mvnw
├── mvnw.cmd
├── pom.xml
└── README.md
Front
Back
El programa debe iniciarse primero en el back.
Para compilar:
Da al play para compilar automáticamente.
Una vez iniciado el back, en el front:
npm run dev
Abre el enlace que aparece con tu puerto local.
- Haz un fork al repositorio.
- Crea una nueva rama:
git checkout -b feature/name. - Haz tus cambios.
- Haz push de tu rama:
git push origin feature/name. - Crea un pull request.
Las coders que hemos trabajado en este proyecto somos:
Versión móvil:
happytravel-mobile.1.mp4
Versión desktop:
