Participando en la emulación de No Country, realizamos un rediseño de Binance Lite basado en los principios de simplificación de “The laws of simplicity” de John Maeda, apuntado a crear una interfaz más amigable para los principiantes.
Entendemos que el mundo del trading puede resultar complicado y abrumador para aquellos que recién comienzan, por lo que queremos lograr una reversión en la que se sientan cómodos, centrando su atención en los conceptos básicos y las operaciones esenciales.
-
Back: https://binance-production.up.railway.app/api/v1/docs#/ ó https://binance-nocountry.zeabur.app/api/v1/docs/#/
 FrontEnd |
 BackEnd |
|---|---|
 Eduardo Arevalo |
Nilo Ivan Soruco Guerrero |
| Victor Fernandez |
Miguel Miche |
| Maria Eugenia Costa |
- |
| Sergio Calbino |
- |
 UX/UI |
PM |
|---|---|
| Paulo Crosetti | Frida Azul Varela Lucius |
| Maria Belen Fernandez Morales | - |
| FrontEnd |
|---|
 HTML5 -  CSS3 -  React -  Typescript -  MUI, Material UI icons |
| Dependencias |
|---|
 react-dom - react-router-dom -  firebase - swiperjs - axios - react-hot-toast - react-router-dom |
| BackEnd |
|---|
 NodeJS -  NestsJS -  Postgresql -  TypeORM |
| Dependencias |
|---|
Typescript - jest - supertest - prettier -  ESLint - testing - schematics - cli - bcrypt - class-transformer y class-validator - joi - pg - reflect-metadata - rxjs -  swagger |
| UX/UI |
|---|
 Figma |
-
El usuario se registra con correo electrónico y contraseña.
-
Siempre se va informando al usuario de los errores, para poder corregirlos y completar con exito el registro.
- Siempre se le informa al usuario si hay errores al completar, si ocurre algún errores al hacer la acción, como en la segunda imagen que se informa que el correo o la contraseña son erroneas.
Una vez que se inicia sesión se ingresa a la pantalla de mercado, donde...
... se puede ver el saldo u ocultarlo
... tenemos un slider con las criptomonedass más vendidas
... tenemos la tabla para ver a los que venimos siguiendo en Lista de seguimiento y podemos ver todas las criptomonedas en Monedas
1er pantalla: Lista de monedas // 2da pantalla: Lista de seguimiento // 3ra pantalla: Desde el listado de monedas se puede agregar o sacar de la lista de seguimiento (las criptomonedas favoritas) // 4ta pantalla: desde el navbar podemos comprar y vender las criptomonedas
1er pantalla: Lista de favortios // 2da pantalla: Como hay un máximo de favoritos si se quiere agregar màs, se avisa al usuario
- Una vez que se elige desde el navbar la opción de compra se accede a la pantalla
-
Se puede filtrar por el nombre y elegir la criptomoneda para comprar y en el proximo paso ingresamos la cantidad
-
Elegimos le metodo de pago y tenemos un resumen de lo que sera la compra. Y luego completamos los datos de la tarjeta.
Utilizamos la metodología ágile y scrum.
Intentamos coordinar con nuestro UX/UI para contar con la información en Figma y con el grupo de BackEnd para tener los servicios a utilizar en las tareas de cada Sprint.
Creamos un MVP y dividimos las tareas en sprints (con duración de una semana):
-
Registro
-
Logueo
-
Ver la pantalla de mercado, seleccionar/deseleccionar favoritos e ir a compra
-
Ver la pantalla de compra
-
Ver la pantalla de venta
-
Ver la pantalla de billetera
-
Crear el Footer, Header y Navbar
-
Pantalla de Login y Registro, la maquetación, sin la funcionalidad
-
Pantalla de mercado, por el momento se trae la inforamcion desde una API publica, para luego unir con el Back
-
Creacion de base de datos para login y registro
-
Se ajusta tanto el login como el registro para poder conectar back y front
-
Se ajusta la pagina de market para traer la informacion de las monedas ya con el back y dejar la API
-
Se rediseña la tabla que muestra las monedas, apra poder reagruparlas por la información que muestra en columnas, siempre manteniendo mobile first, es responsive en todos los dispositivos.
-
Se pasa a un context tanto la informacion de login como las monedas, y se hacen los ajustes en la parte de login, los condiconales para mostrar o no el navbar dependiendo de si esta logueado o no. Tambien se ajusta como se muestra la moneda en la pagina de market.
-
Se crea un contexto para un estado general de carga, asi cuando se está realizando el llamado de datos, se pone la pantalla griseada y se ve una animación similar a la de Binance de las barras al cargar. Asi el usuario sabe que se esta haciendo una carga o busqueda.
-
Se completa la funcionalidad para agregar o sacar monedas favoritas
-
Se continua con las paginas de compra y venta
-
Se agrega la pagina Not Found que redirige a market en el caso de ser un usuario ya loguedo.
-
Se finalizan las paginas de compra y venta
-
Se ajustan los datos del usuaurio para mostrarlos una vez logueado
-
Se realiza la página de billetera
-
Se hicieron varios ajustes en el layout y ajuste en el responsive.
-
Se completa la funcionalidad de favoritos, para poder agregar o eliminar las cryptomonedas de la Lista de Seguimiento.
-
Se guardan algunos datos en el localStorage para que siempre esten visibles y no se borren si se actualiza la página.
- 1ro: copiar el repositorio con:
git clone https://github.com/No-Country/s10-03-t-node-nest-react-binance.git
2do: Para el Back ir al repositorio server y ya dentro:
-> Instación de dependencias: $ npm install
-> Para correr la app:
En development: $ npm run start
(watch mode): $ npm run start:dev
En modo produccion: $ npm run start:prod
-> Para los test:
(unit tests): $ npm run test
(e2e tests): $ npm run test:e2e
(test coverage): $ npm run test:cov
3ro.: para el Front, ir al repositorio en client y ya dentro:
-> Instación de dependencias: $ npm install
-> Para correr la app:
En development: $ npm run dev