Demantur

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 16 Open GitHub ↗

¡El futuro de la banca en línea!

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Contributors][contributors-shield] ![License][license-shield] ![Stars][stars]

</span>

<p align="center">
	<a href="#"><img src="./client/src/pages/static/assets/img/logos/png/Logo_Icon-1.png" width="150px"  height="200px"></a>
	<h3 align="center"> Demantur Bank  </h3>
	<p align="center"> "Cuida de los pequeños gastos; un pequeño agujero hunde un barco" </p>
</p>

<br />

<table align="center">
  <tr>
    <td align="center">
        <a href="https://github.com/Akilelk23">
            <img src="https://avatars.githubusercontent.com/Akilelk23" width="100px;" alt=""/>
            <br />
            <sub><b>Luis Márquez</b></sub>
        </a>
        <br />
	<a href="https://github.com/Javithor360/Demantur/commits?author=Akilelk23" title="Documentación">📖</a>
        <a href="https://github.com/Javithor360/Demantur/commits?author=Akilelk23" title="Front-End">🎨</a>
    </td>
    <td align="center">
        <a href="https://github.com/Javithor360">
            <img src="https://avatars.githubusercontent.com/Javithor360" width="100px;" alt=""/>
            <br />
            <sub><b>Javier Mejía</b></sub>
        </a>
        <br />
        <a href="https://github.com/Javithor360/Demantur/commits?author=Javithor360" title="Documentación">📖</a>
	<a href="https://github.com/Javithor360/Demantur/commits?author=Javithor360" title="Back-End">💻</a>
    </td>
    <td align="center">
        <a href="https://github.com/RealAlvinJS">
            <img src="https://avatars.githubusercontent.com/RealAlvinJS" width="100px;" alt=""/>
            <br />
            <sub><b>Alvin Meléndez</b></sub>
        </a>
        <br />
	<a href="https://github.com/Javithor360/Demantur/commits?author=RealAlvinJS" title="Back-End">💻</a>
    </td>
    <td align="center">
        <a href="https://github.com/Javithor360">
            <img src="https://avatars.githubusercontent.com/Menendez2004" width="100px;" alt=""/>
            <br />
            <sub><b>Kevin Menéndez</b></sub>
        </a>
        <br />
	<a href="https://github.com/Javithor360/Demantur/commits?author=Menendez2004" title="Back-End">💻</a>
    </td>
    <td align="center">
        <a href="https://github.com/Deadpool345">
            <img src="https://avatars.githubusercontent.com/Deadpool345" width="100px;" alt=""/>
            <br />
            <sub><b>Steve Sánchez</b></sub>
        </a>
        <br />
        <a href="https://github.com/Javithor360/Demantur/commits?author=Deadpool345" title="Front-End">🎨</a>
    </td>
    <td align="center">
        <a href="https://github.com/DanielVasquezV">
            <img src="https://avatars.githubusercontent.com/DanielVasquezV" width="100px;" alt=""/>
            <br />
            <sub><b>Daniel Vásquez</b></sub>
        </a>
        <br />
	<a href="https://github.com/Javithor360/Demantur/commits?author=DanielVasquezV" title="Front-End">🎨</a>
	<a href="https://github.com/Javithor360/Demantur/commits?author=DanielVasquezV" title="Back-End">💻</a>
    </td>
  </tr>
</table>

## Nuestro proyecto

Los sistemas financieros en línea juegan un papel importante en las actividades cotidianas de cualquier usuario en Internet, ciertamente el uso de las herramientas electrónicas virtuales simplifican en gran medida los procesos que una entidad financiera conlleva. Para bien o para mal, muchos de los sistemas actuales son precarios y han quedado desfasados con el pasar de los últimos años y es por ello que no hacen uso del verdadero potencial de las tecnologías.

## Objetivos

1. Brindar un servicio moderno, confiable y de calidad con las herramientas necesarias para proveer una experiencia amigable y dinámica, proporcionando una sostenibilidad en relación a la inclusión financiera, creando un entorno de aprendizaje para quienes necesiten una orientación en base a los procesos bancarios.

2. Ahorrar tiempo valioso brindando las herramientas para poder realizar los trámites requeridos en cualquier lugar y cualquier momento.

3. Utilizar el verdadero potencial de las tecnologías actuales.

<table>
	<tr>
		<td align="center">
			<b>Misión</b>
		</td>
		<td align="center">
			<b>Visión</b>
		</td>
	</tr>
	<tr>
		<td>
			Ofrecer una plataforma bancaria de calidad, en la cual se prioriza la atención, la experiencia dinámica y amigable con los clientes, mediante la implementación de procesos financieros innovadores que permiten tener un nivel de eficiencia y productividad bastante elevado, satisfaciendo así, las necesidades de los clientes.
		</td>
		<td>
            Ser una empresa reconocida nacional e internacionalmente por los clientes, a través del uso de tecnologías y estrategias digitales que ofrecen soluciones financieras útiles y responsables, todo esto, gracias a la interacción y cooperación entre los usuarios y el banco, teniendo siempre en cuenta la actitud de servicio y los valores.
        </td>
	</tr>
</table>

## Aspectos técnicos

El proyecto tiene sus bases en la metodología MVC (Modelo Vista Controlador) el cual es una herramienta que facilita la interfaz entre lo que el usuario y el programador ve, facilitando una óptima funcionalidad y un flujo entendible en el proyecto.

<table>
    <tr>
        <td align="center" colspan="4">
            Tecnologías utilizadas
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://www.vectorlogo.zone/logos/mongodb/mongodb-icon.svg" height="64px" width="64px">
        </td>
        <td>
            MongoDB
        </td>
        <td>
            +5.0
        </td>
        <td>
            Base de datos no relacional utilizada para almacenar colecciones de dato para las cuentas e información bancaria de los clientes, empleados y administradores
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://www.vectorlogo.zone/logos/expressjs/expressjs-icon.svg" height="64px" width="64px">
        </td>
        <td>
            Express.js
        </td>
        <td>
            +4.18.1
        </td>
        <td>
            Entorno de trabajo para Node.js utilizado para manejar la API del Back-End
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://www.vectorlogo.zone/logos/reactjs/reactjs-icon.svg" height="64px" width="64px">
        </td>
        <td>
            React
        </td>
        <td>
            +18.1
        </td>
        <td>
            Biblioteca de Javascript que permite realizar las interfaces de usuario y renderizar elementos traídos del Back-End en el Front-End
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://www.vectorlogo.zone/logos/nodejs/nodejs-icon.svg" height="64px" width="64px">
        </td>
        <td>
            Node.js
        </td>
        <td>
            +16.14.2
        </td>
        <td>
            Entorno de ejecución que permite ejecutar Javascript desde el servidor, complemento para ejecutar Express.js
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://www.vectorlogo.zone/logos/socketio/socketio-icon.svg" height="30px" width="64px">
        </td>
        <td>
            Socket.IO
        </td>
        <td>
            +4.5.1
        </td>
        <td>
            Permite ejecutar acciones en tiempo real como el envío de transferencias y el procesamiento de solicitudes
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg" height="30px" width="64px">
        </td>
        <td>
            Tailwind CSS
        </td>
        <td>
            +4.0
        </td>
        <td>
            Framework de CSS que permite estilizar el contenido del Front-End con facilidad
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://cdn.worldvectorlogo.com/logos/sass-1.svg" height="64px" width="64px">
        </td>
        <td>
            SASS
        </td>
        <td>
            +1.52.3
        </td>
        <td>
            Framework de CSS que permite estilizar el contenido del Front-End con facilidad
        </td>
    </tr>
</table>

## Cómo instalar

1. Asegurarse de tener instalado **Mongo DB**, **Node.js** y **Visual Studio Code** con su extensión de **Thunder Client**.

2. Descargar el repositorio.

3. Abrir el proyecto en Visual Studio Code y abrir cuatro terminales. En la primer terminal, ejecutar el comando `mongod` para inicializar **Mongo DB**.
![Paso 3](https://i.imgur.com/Gl35ExI.png)

4. Instalar las dependencias con las otras tres terminales, ejecutando el comando en la segunda terminal, ejecutar los comandos, `cd client && npm install`, `cd server && npm install` y `cd socket && npm install`, en una terminal diferente.
![Paso 4](https://i.imgur.com/4hIIGl7.png)

5. Abrir el archivo `.env` y completar las variables seguidas del `=`. En `MONGO_URI` colocar la dirección URI para establecer la conexión a la base de datos, si se desea manejar de manera local, definir el campo con `mongodb://127.0.0.1/DemanturDB`

6. Definir los campo `JWT_SECRET`, `JWT_SECRET_ALTERNATIVE` y `JWT_EXPIRE` con `3938dc1ab14fa1be82477f328fcb5e22f580015941611b4358bc106382ab4c3253413c`, `8cec5756b364430e9f5ff033591aa2d0a254cb73d2abb1911943fd4cf570ccc7672e06` y `10min` respectivamente.

7. Para la variable `PORT`, definir el número de puerto que se desea utilizar en el Back-End (se recomienda el puerto `4000`).

8. En la variable `EMAIL_HOST` definir con `smtp.gmail.com`, igualmente con `EMAIL_PORT` definir el número de puerto (se recomienda el puerto `465`), para la variable `EMAIL_USERNAME` escribir el correo a utilizar para el envío de e-mails, seguidamente el campo `EMAIL_PASSWORD` con la contraseña del correo y finalmente la variable `EMAIL_FROM` donde de debe definir el emisor del correo (el mismo correo utilizado)
![Paso 8](https://i.imgur.com/v2wlqO0.png)

9. Iniciar el proyecto, ejecutando el comando `npm start` en la terminal de la carpeta `client`, `server` y `socket`.

10. Abrir Thunder Client y abrir la ruta `http://localhost:4000/api/accounts/create/admin` para crear un administrador, deberán enviarse los siguientes parámetros.
```json
{
    "Name": "admin",
    "Password": "2012"
}
```

11. Asimismo, abrir la ruta `http://localhost:4000/api/admin/actions/create-dui` para registrar un DUI en la base de datos y poder iniciar sesión como cliente.
```json
{
  "DuiFirstNames": "nombre1 nombre2",
  "DuiLastNames": "apellido1 apellido2",
  "DuiNumber": "000000-0",
  "DuiDateBirth": "31/12/1969"
}
```

# Características del proyecto

Demantur cuenta con un sinfín de funcionalidades disponibles para todo tipo de usuarios, entre las principales se puede mencionar:

- ### Página principal

Un diseño simple pero intuitivo definido por un sistema de navegación.

![Index](https://i.imgur.com/nlRy6na.png)

- ### Sistema de traducción

Expandir los métodos comunicativos es importante y es por ello que el idioma de la página puede ser cambiado entre español e inglés.

![Translator](https://media.discordapp.net/attachments/829462689037287436/1019781249755271169/unknown.png)

- ### Centro de ayuda y contacto

En relación a la inclusión financiera, el sitio web cuenta con un centro de ayuda el cual contiene información relacionada a los procesos bancarios para orientar a los usuarios que lo necesiten.

![Help](https://media.discordapp.net/attachments/829462689037287436/1019781927655460884/unknown.png)

- ### Envío de correos

El sistema cuenta con el envío de correos personalizados para mantener al cliente notificado y proceder con procesos de validación.

![Email](https://media.discordapp.net/attachments/829462689037287436/1019784382359273543/unknown.png)

- ### Panel de cliente

Únicamente accesible para aquellos clientes previamente registrados, cuenta con los procesos necesarios para ejecutar acciones financieras y mostrar la información relacionada para cada cliente.

![Client](https://media.discordapp.net/attachments/829462689037287436/1019782345068384256/unknown.png)

- ### Panel de empleado

Contiene todas las acciones que un empleado puede llevar a cabo y para acceder al panel se debe ingresar a la ruta `http://localhost:3000/auth/employee/login`

![Employee](https://media.discordapp.net/attachments/829462689037287436/1019782834761781258/unknown.png)

- ### Panel de administrador

Restringido solo para administradores de la página, para iniciar sesión se debe acceder a la ruta `http://localhost:3000/auth/admin/login` y permite ejecutar acciones reservadas para administrador.

![Admin](https://media.discordapp.net/attachments/829462689037287436/1019783281119592448/unknown.png)

## Un proyecto desarrollado por

<p align="center">
	<a href="#"><img src="./client/src/pages/static/assets/img/logos/depayser/Dépayser-Inc_Simplified-Logo-PNG-BG_White.png" width="200px"  height="200px"></a>
	<h3 align="center"> Dépayser Industries </h3>
</p>

## Versión Beta 1.0.0

El proyecto aún está en una fase de desarrollo beta, proximamente habrán más novedades.

[contributors-shield]: https://img.shields.io/github/contributors/Javithor360/Demantur.svg?style=for-the-badge
[license-shield]: https://img.shields.io/github/license/Javithor360/Demantur.svg?style=for-the-badge
[stars]: https://img.shields.io/github/stars/Javithor360/Demantur?color=yellow&style=for-the-badge

Demantur

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README