Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eugenia1984/binance-lite

El proyecto de rediseño de Binance, simplificando la interfaz, realizado en equipo en emulación de NoCountry
https://github.com/eugenia1984/binance-lite

css3 material-ui react typescript vite

Last synced: about 2 months ago
JSON representation

El proyecto de rediseño de Binance, simplificando la interfaz, realizado en equipo en emulación de NoCountry

Host: GitHub
URL: https://github.com/eugenia1984/binance-lite
Owner: eugenia1984
Created: 2023-09-15T13:28:16.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-10-05T12:21:05.000Z (about 1 year ago)
Last Synced: 2023-10-06T09:28:55.845Z (about 1 year ago)
Topics: css3, material-ui, react, typescript, vite
Language: TypeScript
Homepage: https://binance-l.netlify.app/
Size: 483 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        #  Seleccionado 10 - Equipo 03 - Nestjs - React - TypeScript (Binance Lite)

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.

---

##  LINKS DE DEPLOY

- Front: [https://binance-l.netlify.app/](https://binance-l.netlify.app/)

- Back: [https://binance-production.up.railway.app/api/v1/docs#/](https://binance-production.up.railway.app/api/v1/docs#/) ó [https://binance-nocountry.zeabur.app/api/v1/docs/#/](https://binance-nocountry.zeabur.app/api/v1/docs/#/)

--- 

##  INTEGRANTES

|  FrontEnd  |  BackEnd |

| ----- | ---- |

| [ Eduardo Arevalo](https://github.com/Edu568) |  [  Nilo Ivan Soruco Guerrero](https://github.com/nilovili) |

| [ Victor Fernandez](https://github.com/vic-ferr) | [ Miguel Miche](https://github.com/migmm) |

|  [ Maria Eugenia Costa](https://github.com/eugenia1984) | - |

|  [ Sergio Calbino](https://github.com/SergioCalbino) | - |

|  UX/UI | PM |

| --- | -- |

|  [Paulo Crosetti](https://www.linkedin.com/in/paulo-crosetti) |  [Frida Azul Varela Lucius](https://www.linkedin.com/in/fridavlucius/) |

|  [Maria Belen Fernandez Morales](https://www.linkedin.com/in/belen-fernandez-morales) | - |

---

---

##   TECNOLOGÍAS UTILIZADAS

| FrontEnd |

| ------- |

|   HTML5 -  CSS3 -  [React](https://react.dev/) -  [Typescript](https://www.typescriptlang.org/) -   [MUI](https://mui.com/), Material UI icons | 

| Dependencias |

| ------------ |

| [ react-dom](https://www.npmjs.com/package/react-dom) - [ react-router-dom](https://www.npmjs.com/package/react-router-dom) - [ firebase](https://firebase.google.com/) - [swiperjs](https://swiperjs.com/)  - [axios](https://axios-http.com/) - react-hot-toast - react-router-dom |

| BackEnd |

| ------- |

| [ NodeJS](https://nodejs.org/en) -  [ NestsJS](https://nestjs.com/) -  [ Postgresql](https://www.postgresql.org/) -  [ TypeORM](https://typeorm.io) |

| Dependencias |

| ------------ |

| [ Typescript](https://www.typescriptlang.org/) -  [jest](https://jestjs.io/) -  [supertest](https://www.npmjs.com/package/supertest) -  [prettier](https://prettier.io/) -  [ ESLint](https://eslint.org/)  -  testing - [schematics](https://www.smartdraw.com/circuit-diagram/schematic-diagram-software.htm?id=66431) -  cli -  [bcrypt](https://www.npmjs.com/package/bcrypt) -  class-transformer y class-validator -  [joi](https://joi.dev/) -   pg -   [reflect-metadata](https://www.npmjs.com/package/reflect-metadata) -   [rxjs](https://rxjs.dev/) -   [ swagger](https://swagger.io/) |

| UX/UI |

| ----- |

|  Figma |

---

## Algunas vistas:

## Pantalla inicial: iniciar sesión o registro



## Pantalla de Registro

- 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.







## Pantalla de Inicio de sesión

- 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.







## Pantalla: Mercado (/market)

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

## Pantalla de compra

- 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.

  











## Pantalla: Cartera 



---

##  LINKS

-  [Trello](https://trello.com/b/ev59LkiN/nocountry-s10-binance)

- [Figma](https://www.figma.com/file/FYlQ2BEcjeEM52Ml8ZqJQm/Binance-Lite-Figma-(Copy)?type=design&node-id=7-2&mode=design&t=rmJs9B1AlPn4Jksr-0)

---

---

##  ¿Cómo nos organizamos con el equipo?

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):

---

### Funcionalidades para el MVP:

- 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

  

---

###  SPRINT 1 - Funcionalidades:

- 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

---

###   SPRINT 2 - Funcionalidades: 

- 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.

---

###   SPRINT 3 - Funcionalidades:

- 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.

  

---

###   SPRINT 4 - Funcionalidades:

- 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

---

###   SPRINT 5 - Funcionalidades

- 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.

---

---

##  ¿Cómo veo en local el Front y el Back ?

- 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```

---