Proyecto: Invoice App 🧾

👋🏻 Bienvenidx al Proyecto de FrontEnd-Mentor desarrollado por la comunidad de Discord de vamoacodear 👩🏻‍💻

Introducción

Gracias al equipo de Diseño de Frontend Mentor 👀, tenemos un Design System que poner en marcha. Por lo que debemos tenerlo en cuenta en todo momento ya que debe respestarse.

En este proyecto, construiremos un sitio donde los usuarios finales podrán:

• Crear, leer, actualizar y eliminar facturas
• Reciba validaciones de formularios cuando intente crear/editar una factura
• Guarde borradores de facturas y marque facturas pendientes como pagadas
• Filtrar facturas por estado (borrador/pendiente/pagada)
• Ver el diseño óptimo para la aplicación según el tamaño de pantalla de su dispositivo
• Ver estados de desplazamiento para todos los elementos interactivos en la página
• Alternar dark y light mode

Va a quedar expectacular en tu portfolio 🚀

Objetivo del proyecto

Lo que intetamos hacer con este proyecto es simular un espacio de trabajo. Donde si bien no aplicamos al 100% metodologia Agile, ni marco Scrum, intentamos hacer lo posible considerando que es un grupo de trabajo interdiciplinario con diferentes usos horarios, que pueden tener o no experiencia en el mundo laboral.

De esta manera aprenderas cosas del día a día de un equipo de trabajo, como:

• Metodología Agile
• Marco Scrum y sus ceremonias (planning, daily, review, retro)
• Crear Pull Request
• Que te reavisen el código (Code Review)

• A utilizar diferentes tecnologías que votamos para utilizar en el proyecto:

  
  

  • Vite
  • Git
  • Github
  • Conventional Commits
  • ESLint, Prettier
  • React
  • TypeScript
  • Tailwind
  • Jest
  • Vitest
  • React Testing Library
  • React Hook Form
  • GitHub Actions
  • Deploy con Vercel

Extensiones

En el proyecto hay extensiones recomendadas en el archivo .vscode/extensions.json a tener en cuenta: puede salirte un cartel y le das a instalar o directamente podes ir a la pestaña de extensiones y buscarlas poniendo: @recommended

Obligatorias:

• Prettier - Code formatter
• ESLint

Pre-Instalación

El proyecto ya tiene una versión de Node seteada en el archivo .nvmrc, por lo que te recomendamos que instales nvm use, ya que también te va a servir por si trabajas en otros proyectos con distintas versiones.

Para instalarla: Mac o Linux: https://github.com/nvm-sh/nvm (curl o wget)

Windows: https://github.com/coreybutler/nvm-windows (instalador)

Luego de eso utilizar el comando nvm use, esto verifica si hay un archivo en el proyecto llamado .nvmrc y si no estas usando de node correcta, la setea.

Comandos comunes

npm install

Ejecutar la aplicación

npm run dev

Ejecutar los test

npm run test

Como contribuir

Queres aparecer entre los colaboradores? Te dejo el paso a paso con toda la info para poder colaborar en este link

Info detallada del Design System: link

Ayuda

Si tienes cualquier duda puedes preguntar en nuestro Discord canal #🧾-invoices-app

Colaboradores

License

MIT