Wallet

BIENVENIDOS A

PINGUI WALLET -FRONTEND-

👨‍💻 Dependencias

• Node 16.19.0
• React : 18.2.0:
• Vite 4.3.2
• react-redux: 8.0.5
• @reduxjs/toolkit": 1.9.5
• react-dom: 18.0.11
• react-router-dom: 6.11.2.
• axios: 1.4.0
• uuid: 9.0.0
• tailwindcss: 3.3.2
• @mui/material: 5.13.2

• iconos
  • @heroicons/react": 1.0.4,
  • IonIcons : 7.1.0, directamente en el HTML sin instalarlo.

• para normalizar codigo
  • autoprefixer: 10.4.14
  • eslint: 8.38.0
  • eslint-plugin-react-hooks: 4.6.0
  • eslint-plugin-react-refresh: 0.3.4
  • standard: 17.0.0
  • postcss": 8.4.23

🚀 Caracteristica

• Landing page (pagina de precentacion)
• Login/Reegistro
• Seccion exclusiva para el usuario.
• CRUD de tarjeta de credito.
• CRUD de Usuario (a medias, se puede listar y modificar).
• Transacciones, se pueden realizar transacciones entre usuarios, (transferir dinero o pagar factura).
• Se visualiza el historial de Transacciones.
• Canales de Contacto, Denuncias y Reclamos.
• Se creo los slice, para poder crear, modificar, listar y eliminar, en todos los casos, aunque no se usaron todos.
• CRUD de Presupuestos (no se puede modifica, si elmiminar y añadir uno nuevo)

📦 Instalación

• Clonamos el repo

  ╭─pescado at rabioso in ~/
  ╰─± git clone https://github.com/No-Country/Virtual_Wallet_MERN/tree/develop
  

• Accedemos al Cliente:

  ╭─pescado at rabioso in ~/
  ╰─± cd Virtual_Wallet_MERN/client
  

• Instalamos las dependencias necesarias:

  ╭─pescado at rabioso in ~/Virtual_Wallet_MERN/client
  ╰─± npm install
  

• Iniciamos la Applicación web

  ╭─pescado at rabioso in ~/Virtual_Wallet_MERN/client
  ╰─± npm run dev
  

😘 Demo

📷 Capturas de Pantalla

🥰 Vistaso al Home

🥰 Responsive Home & Presupuesto

🥰 Responsive Perfil & Transaccion

💻, 🎨 Integrantes del Front-end

Guillermo Neculqueo	Fabian Torres

🛠️💾 Integrante del Backend

Cristian

🎨🌈 Integrante de UX/UI

Jerson

🧪🔎, Integrante Tester

Yesid

PINGUI WALLET - UI/UX -

🎨 Arquitectura

🎨 User Story

Mockup

PINGUI WALLET -BACKEND REST API-

Servidor

Esta REST API consta de varios modelos y sus controladores para llevar a cabo la funcionalidad de la Wallet abasteciendo en el servicio al Frontend, persistiendo los datos en un cluster de MongoDB. Manteniendo la seguridad mediante JWT para los accesos de usuarios a sus operaciones.

NOTA

• Importante: Esta REST API es soporte al Frontend del siguiente repositorio: https://github.com/No-Country/Virtual_Wallet_MERN/tree/develop/client

Tecnologias

Para desarrollar el Backend se utilizo lo siguiente con conceptos de DevOps:

• NodeJS
• Express
• MongoDB
• Mongoose
• JWT
• Docker
• Ansible
• K8S
• Prometheus
• Grafana
• Github Actions
• Railway.app

Testing

Se realizaron un conjunto de pruebas manuales funcionales a la plataforma de PinguiWallet. Entre las herramientas usadas están:

• API Postman.
• Jira.
• Selenium IDE.
• Browser Stack (Mobile testing).

Link de cargas de pruebas: https://drive.google.com/drive/folders/1suF_9jD0geLas8YVIVp9dOUOGKRueBUw?usp=sharing

Installation

PINGUI SERVER REQUIERE Node.js v18+ PARA INICIAR.

Instalar las dependencias y las dependencias de desarrollo antes de correr el servidor.

cd server
npm i
npm run dev

Contenedores

El Backend esta apto para correr en un entorno de produccion o desarrollo. En caso de ultiza entorno de produccion puede correr el Deploy con docker compose.

cd server
generar la imagen Docker: docker build...
generar el contenedor Docker: docker run...

Monitorizacion

Se ha anexado al servidor local Prometheus con Grafana para ver el servicio de datos.

K8S

El Backend esta adaptado para ser deployado en servidores como AWS, AZURE o GCP mediante un cluster en Kubernetes.

Para el manejo de K8S lo puede realizar con KUBECTL

AUTOMATIZACION CI/CD

El CD esta basado en Github Actions y el CI esta anexado a Docker Hub para que Kubernetes obtenga la imagen actualizada de Deploy. Para esto puede utilizar ANSIBLE.

DEPLOY URL

https://rest-api-wallet-no-country-production.up.railway.app/

• Importante: agregar " /api " ademas de los declarados en " /routes " para acceder a los datos de la base de datos. Ejemplo: https://rest-api-wallet-no-country-production.up.railway.app/api/user/get-all