El objetivo de este proyecto ha sido el diseño y desarrollo de una web PERN Fullstack, comprendiendo un front end con react, backend con express.js y Node.js, así como un modelo y base de datos PostgreSQL.
- Conectar a BBDD según env.example, puede ser en local
- npm i para instalar las dependencias necesarias
- npm run dev para arrancar el server (localhost:3000)
- splittear la terminal y ejecutar por terminal: cd client. Una vez dentro npm i para instalar react y demás dependencias del front-end.
- npm run dev y visualizar en navegador: (localhost:5173)
-
(Fase I): Desarrollo del modelo de datos usando el diagrama E/R, con su consecuente modelo físico de tablas SQL (elegido para el modelado de datos por su mayor rigidez y por la tipología del proyecto, el cual relaciona dos tablas many-to-many (N:M) mediante la tabla intermedia favoritos, descartando así MongoDB para esta interacción para mayor limpieza del código), así como la organización del proyecto en VScode, utilizando una estructura server-client en la misma carpeta, e instalando vite-react en la dependencia client del mismo.
-
(Fase II): Back-End. API REST con Express.js.
En este caso se ha dimensionado un servidor con Express y Node.js , siguiendo MVC (modelo-vista-controlador) para ser la API que comunicará el front-end (vista) con la BBDD (desplegada en Render), garantizando la correcta enrutación y posterior acceso a la misma desde los componentes funcionales de React, que realizarán las necesarias peticiones HTTP. -
(Fase III): Front-End con React.
Para el front-end de la aplicación "Madrid Venues" se ha seguido la organización de árbol de componentes funcionales de react, contando con 19 componentes, en los cuales se utilizan manejo de estados (con hooks useState y useEffect), contexto provider-consumer (useContext) y enrutación de componentes con useNavigate, lo cual garantiza una correcta experiencia de usuario y completa el ciclo de full-stack de la aplicación. -
(Fase IV): DEV-OPS, documentación, testing y mejora de UX/UI.
En esta fase del proyecto se comprenden las operaciones devops como el despliegue completo de la aplicación utilizando contenedores de imagenes mediante Docker, documentación de la web-app con swagger y testing E2E con cypress y testing unitarios.
- API REST (Express.js y Node.js)
- Leaflet React
- ES6
- Asincronía
- Gestión del proyecto en Github desde el principio. Uso de ramas. Despliegue en GitHub Pages
- Diseño responsive, mobile first, semántica HTML5 y CSS3
- PostgreSQL
- React (Hooks, estados, contexto)
- JWT, bcrypt
- MUI Material Design
- Swagger
- Cors
- MVC
- axios
- Peticiones HTTP
- Postman
- Trello
- PGAdmin4
- Docker
- Render
- Morgan
- Sass (SCSS)
Como se menciona anteriormente, se presenta el siguiente modelo de tablas físico SQL:
Incluyendo también una estimación del árbol de componentes del front con React. Rutas de prueba con postman, presentes en la carpeta utils-postman con formato .json
El siguiente paso ha sido crear el server con Express, implementando la lógica necesaria para las peticiones http y su manejo dentro del código.
Se han utilizado componentes funcionales comunicados por props, context y levantamiento de estado, así como peticiones asíncronas a la propia API del proyecto mediante axios. Se ha maquetado la aplicación buscando un diseño adaptado a móvil (Mobile First) y teniendo en cuenta otros tamaños de pantalla, usando mediaqueries y maquetación por componentes con Sass.
Admin dashboard (Auth by role para utilizar al 100% el CRUD de markers desde el front)
Events con WebScraping y guardado en MongoDB por las características del tipo de datos, en este momento solo mock
Deployment en Docker
Sistema de ratings de salas y reviews
Edit user profile desde el front (Solo disponible en Back-end)
Sequelize y testing (E2E y unitarios)
- Víctor Garritano Pérez (FullStack Dev student en The Bridge), 2024