👋🏻 Bienvenidx al Proyecto de FrontEnd-Mentor desarrollado por la comunidad de Discord de vamoacodear 👩🏻💻
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 🚀
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
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:
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.
npm install
npm run dev
npm run test
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
Si tienes cualquier duda puedes preguntar en nuestro Discord canal #🧾-invoices-app