Giter Club home page Giter Club logo

nsdonato / front-invoices Goto Github PK

View Code? Open in Web Editor NEW
26.0 26.0 5.0 1.01 MB

🎨 Front de: Invoice App 🧾 | Simulación de trabajo en equipo con la comunidad de Twitch https://twitch.tv/vamoacodear y Discord https://discord.io/vamoacodear

Home Page: https://front-invoices.vercel.app

License: MIT License

Shell 1.29% JavaScript 5.11% HTML 1.37% TypeScript 90.81% CSS 1.41%
cypress figma git jest prisma react reacthookform reacttestinglibrary tailwindcss typescript vercel vite zustand

front-invoices's Introduction

Hola, soy Noelia 👋

Acerca de mí

  • 👩🏻‍💻 FrontEnd Developer con React, trabajando en @ Capitole Consulting.

  • 💜 Contribuir a proyectos Open Source

  • 🎯 Me gusta brindar apoyo a las personas que ingresan en el mundo Tech, hacer proyectos junto a la comunidad de Twitch, donde de diferentes personas se unen, sea por un nuevo comienzo o continuar creciendo en su carrera.

  • 🤓 Me interesa continuar aprendiendo Typescript y Next.js

  • 🆕 Creo contenido en:

    Vamo a codear Twitter Vamo a codear YouTube Vamo a codear Twitch Vamo a codear TikTok


Proyectos:

Proyecto: Recursos Tech

Creé el proyecto Open Source RecursosTech para ayudar a la comunidad a tener identificados, de manera más fácil, recursos que nos sirven en el día a día como programadores, sin importar el área a la que pertenezcas. ¡En la web también podés encontrar conferencias, streamers y videos donde diferentes personas de la comunidad habla hispana, enseñan o cuentan sobre las diferentes herramientas mencionadas en la web!

Proyecto con la comunidad: 🌎 Planets Facts

Junto a la comunidad realicé una simulación de trabajo en Twitch, para que personas sin experiencia puedan aprender como es trabajar en equipo y las diferentes dinámicas con las que nos enfrentamos en un entorno laboral.

🎨 Planets Facts - Front

🔙 Planets Facts - Back

Proyecto: Mujeres en Tecnologia

Charlas distendidas, con mujeres que trabajan en el mundo del desarrollo y que nos cuentan su experiencia dentro de las áreas en las que se desarrollan. Youtube

Estadísticas de GitHub

Noelia's github stats

front-invoices's People

Contributors

allegrim avatar boguita avatar jpaddeo avatar juanisilva avatar maadeval avatar moaqz avatar neilchavez avatar nsdonato avatar phreakphreak avatar rretta avatar svadotwave avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

boguita svadotwave rretta vamoacodear rhazerpk

front-invoices's Issues

Crear componente Modal

COMO desarrollador QUIERO crear el componente Modal PARA poder:

  • Confirmar la eliminación de una factura.
  • Confirmar que se marca como paga
  • Confirmar la edición de la factura.

Definición de hecho:
Que se pueda ver el componente, con la información mencionada tal cual esta diseñado en el Design System.

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Crear componente Header

COMO desarrollador QUIERO crear el componente Header PARA poder contener los elementos que se muestran en la imagen

image

Definición de hecho:

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Configurar auto assign pr en el pipeline

COMO desarrollador QUIERO poder automatizar la asignación del pr al creador del mismo PARA que quede indentificado el responsable y no haya dos personas haciendo lo mismo.

Definición de hecho:
Que se pueda autoasignar el PR en el pipeline del ci/cd

Crear component NavBar

COMO desarrollador QUIERO crear el componente NavBar PARA poder mostrar lo diseñado en el Design System.

Definición de hecho:
Que se pueda ver el NavBar, no tiene comportamiento (el botón de cambio de theme no esta comprendido en la tarea)

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

image

Crear component Button

COMO desarrollador QUIERO crear el componente Button PARA poder mostrar dar de alta una nueva factura

Definición de hecho:
Que se pueda ver el componente Button, no debe tener comportamiento por el momento

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Crear componente Date Picker

COMO desarrollador QUIERO crear el componente Date Picker PARA poder ingresar la fecha de emición (Issue Date)

Definición de hecho:
Que se pueda ver el componente Date Picker tal cual esta diseñado en el Design System.

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Crear componente Filter

COMO desarrollador QUIERO crear el componente Filter PARA poder filtrar por los diferentes estados de una factura:

Draft
Pending
Paid

Definición de hecho:

  • Que se pueda hacer click ver el componente Date Picker tal cual esta diseñado en el Design System.
  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Crear componente InvoiceItem

COMO desarrollador QUIERO crear el componente InvoiceItem PARA mostrar el detalle acotado de una factura especifica.

Definición de hecho:
Que se pueda ver el componente, con la información mencionada tal cual esta diseñado en el Design System.

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Mejora en workflow ci/cd

COMO desarrollador QUIERO poder verificar que los pasos de el workflow esten de manera correcta PARA poder deployar el front a Vercel de la mejor manera.

Definición de hecho:
Que cuando se realice el pr, se pueda ver todo el workflow corriendo de manera correcta , dependiendo si es pr o merge a main.

Crear componente Dropdown

COMO desarrollador QUIERO crear el componente Dropdown PARA poder ingresar seleccionar los terminos del pago (Payment Terms) que pueden ser:

Net 1 Days
Net 7 Days
Net 14 Days
Net 30 Days

Definición de hecho:
Que se pueda ver el componente Dropdown, con la información mencionada tal cual esta diseñado en el Design System.

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Crear componente Input

COMO desarrollador QUIERO crear el componente Input PARA poder ingresar la información necesaria.

Definición de hecho:
Que se pueda ver el componente Input, no tiene comportamiento

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Agregar Light/Dark mode

COMO desarrollador QUIERO poder agregar light/dark mode PARA poder cumplir con el Design System.

Definición de hecho:

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Que se pueda ver la app en ligth o dark mode. Podes hacer un botón (no necesariamente estilado, sino más bien para las pruebas del cambio de theme)

Crear componente ListInvoices

COMO desarrollador QUIERO crear el componente ListInvoices PARA poder mostrar todos los invoices generados.

Definición de hecho:
Que se pueda ver el componente, con la información mencionada tal cual esta diseñado en el Design System.

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Preparación de pre-demo con el objetivo del Sprint 2

Fecha estimativa 07/02 por Discord hacemos pre-demo: Entra, lo que ya estaba estipulado como MVP: o sea, navbar, emptyState y header y se suma, botón dark mode con interacción, listado de facturas y total de invoices listadas.

Image

Crear las rutas necesarias

COMO desarrollador QUIERO poder identificar las rutas necesarias PARA realizar el desarrollo y poder navegar la aplicación según corresponda.

Definición de hecho:

  • Se puede navegar las rutas creadas
  • Tiene su test correspondiente
  • Comprende todas las rutas necesarias en el Design System

Preparación de pre-demo con el objetivo del Sprint 2

Fecha estimativa 07/02 por Discord hacemos pre-demo: Entra, lo que ya estaba estipulado como MVP: o sea, navbar, emptyState y header y se suma, botón dark mode con interacción, listado de facturas y total de invoices listadas.

Desde el backend se debe poder listar las facturas.

Pasar información del Design System a Tailwind

COMO desarrollador QUIERO poder configurar en Tailwind las variables del Design System PARA poder respestar el diseño dado.

El archivo de figma esta en: Invoice-app-figma.zip

Definición de hecho:
En el archivo de configuración de tailwind deben quedar todas las variables mencionadas en el Design System.

Crear componente EmptyState

COMO desarrollador QUIERO crear el componente EmptyState PARA cuando no hay creada ninguna factura

Definición de hecho:
Que se pueda ver el componente, con la información mencionada tal cual esta diseñado en el Design System.

  • Se ve correctamente en todos los diseños (desktop, tablet, mobile)
  • Tiene su test correspondiente
  • Cumple con el Design System

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.