Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nsdonato/front-invoices
🎨 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
https://github.com/nsdonato/front-invoices
cypress figma git jest prisma react reacthookform reacttestinglibrary tailwindcss typescript vercel vite zustand
Last synced: 2 months ago
JSON representation
🎨 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
- Host: GitHub
- URL: https://github.com/nsdonato/front-invoices
- Owner: nsdonato
- License: mit
- Created: 2023-01-12T21:28:35.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-20T04:39:41.000Z (over 1 year ago)
- Last Synced: 2024-10-01T00:43:05.482Z (3 months ago)
- Topics: cypress, figma, git, jest, prisma, react, reacthookform, reacttestinglibrary, tailwindcss, typescript, vercel, vite, zustand
- Language: TypeScript
- Homepage: https://front-invoices.vercel.app
- Size: 1010 KB
- Stars: 25
- Watchers: 5
- Forks: 4
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Proyecto: Invoice App 🧾
👋🏻 Bienvenidx al Proyecto de [FrontEnd-Mentor](https://www.frontendmentor.io/challenges/invoice-app-i7KaLTQjl) desarrollado por la comunidad de Discord de [vamoacodear 👩🏻💻](https://www.twitch.tv/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](https://www.frontendmentor.io/challenges/invoice-app-i7KaLTQjl), 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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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](CONTRIBUTING.md)
## Info detallada del Design System: [link](DESING_SYSTEM.md)
## Ayuda
Si tienes cualquier duda puedes preguntar en nuestro [Discord](https://discord.io/vamoacodear) canal #🧾-invoices-app
## Colaboradores
## License
[MIT](https://choosealicense.com/licenses/mit/)