La aplicación Cubierto realizada con React TS, React Native TS, Express TS, Prisma y PostgreSQL
Clonar el repositorio.
Para levantar la aplicación móvil crear un .env en la carpeta mobile con la siguiente estructura
EXPO_PUBLIC_BACKEND = "" //URL del backend
EXPO_PUBLIC_OAUTH_ID = "" //Permisos de OAuth de Google (Google Cloud)
EXPO_PUBLIC_PUSHER_APIKEY = "" //API Key de Google
EXPO_PUBLIC_CLOUDINARY_UPLOAD_PRESET = "" //Upload preset de Cloudinary
EXPO_PUBLIC_CLOUDINARY_CLOUDNAME = "" //Cloudname de CloudinaryDespués abrir una terminal y ejecutar los siguientes comandos:
npm install npm startPara levantar el backend ingresar a la carpeta server y crear un archivo .env con la siguiente estructura
DATABASE_URL= "postgres://user:password@host:port/database" //Cadena de conexión a base de datos
CLIENT_ID = "" //ID del cliente de Oauth
CLIENT_SECRET = "" //Secreto del cliente de Oauth
BACKEND_URL = "" //Url del backend
PUSHER_KEY = "" //Llave secreta de pusher
PUSHER_SECRET = "" //Secreto del pusherDespués abrir una terminal y ejecutar los siguientes comandos:
npm install npm run dev
La carpeta app contiene los componentes que son las mismas rutas de la aplicación, ejm. el archivo index.tsx se refiere a la ruta "/", el archivo home.tsx se refiere a la ruta "/home".
La carpeta assets contiene los archivos multimedia de la aplicación.
La carpeta components contiene los componentes de la aplicación ordenadas por rutas, ejm. en la carpeta home están los componentes de la ruta home.
La carpeta context contiene los estados globales de la app (manejados con zustand).
La carpeta hooks contiene customHooks para manejar la lógica de la aplicación, ejm. el custom hook useGet sirve para hacer peticiones al backend.
La carpeta interfaces contiene las distintas interfaces de Typescript de las peticiones que llegan del backend.
La carpeta styles contiene algunas variables globales de los estilos, ejm. sombras y colores.
La carpeta utilities contiene distintas funciones que realizan lógica, ejm. formatear fechas, pedir permisos, etc.
La carpeta dist contiene la build de la aplicación.
La carpeta prisma contiene el diseño de la base de datos.
La carpeta controllers contiene los CRUD de cada una de las tablas, ejm. GET, POST, PUT, DELETE de la tabla users
La carpeta interfaces contiene las interfaces de Typescript de cada una de las tablas, así también la interfaz para añadir y modificar cada tabla.
La carpeta middlewares exporta un prisma modificando sus funcionalidades.
La carpeta utilities contiene funciones que realizan lógica.
Para leventar el frontend ingresar a la carpeta client y crear un archivo .env con la siguiente estructura
VITE_OUTHID="" //Permisos de OAuth de Google (Google Cloud)
VITE_BACK="" //Url del backend
VITE_CLOUDINARY_UPLOAD_PRESET = "" //Upload preset de Cloudinary
VITE_CLOUDINARY_CLOUDNAME = "" //Cloudname de CloudinaryDespués abrir una terminal y ejecutar los siguientes comandos:
npm install npm run dev
La carpeta assets contiene los archivos multimedia de la aplicación.
La carpeta components contiene los componentes de la aplicación ordenadas por rutas, ejm. en componente navbar están todas los botones de la pagina.
La carpeta context contiene los estados globales de la app (manejados con zustand).
La carpeta hooks contiene customHooks para manejar la lógica de la aplicación, ejm. el custom hook useGet sirve para hacer peticiones al backend.
La carpeta interfaces contiene las distintas interfaces de Typescript de las peticiones que llegan del backend.
La carpeta pages contiene todas las vistas de la pagina, ejm. el documento home es la vista principal de la pagina web.
La carpeta styles contiene algunas variables globales de los estilos, ejm. colores.
La carpeta utilities contiene distintas funciones que realizan lógica, ejm. formatear fechas, pedir permisos, etc.
El link propocionado contiene los archivos .fig de cada apartado diseñado de la App Cubierto ( Desktop - Mobile )