prolog app

Este repositorio es parte del simulador de trabajo React donde trabaja en un entorno de desarrollo profesional con herramientas avanzadas y flujos de trabajo. Implementa tareas basadas en diseños que comienzan desde pequeñas correcciones de errores hasta características completas. Básicamente, aprendes muchas de las cosas prácticas que generalmente solo experimentas una vez que te unes a un equipo profesional React.

La aplicación

La aplicación es una herramienta de registro y monitoreo de errores similar a Sentry o Rollbar. Puede encontrar una versión implementada de la rama principal en Prolog.profy.dev. Nota: debe hacer clic en el enlace "Panel de tablero" en la esquina superior derecha para ver la aplicación como se muestra en la captura de pantalla a continuación.

CodeBase Tour

Mire este video para una gira a través de la base de código.

Empezando

1. Clon e instalar

Este proyecto está construido con módulos Next.js, TypeScript, Cypress & SCSS, entre otros. Para comenzar a trabajar en el proyecto, primero clona el repositorio en su máquina local e instale las dependencias.

npm install

2. Crear archivo .env

Copie el archivo .env.template en un nuevo archivo llamado .env . Este archivo contiene las variables de entorno requeridas que Next.js inyectan a través del paquete dotenv .

3. Ejecute el servidor de desarrollo

Finalmente, ejecute el servidor de desarrollo:

npm run dev

Ahora puede abrir http: // localhost: 3000 con su navegador para ver la aplicación.

Recomendadas VS Extensiones de código

Este proyecto utiliza herramientas como Eslint, Stylelint y Prettier. Para aprovechar al máximo estas herramientas, se recomienda instalar las extensiones correspondientes. Para el código vs, esos son:

• Eslint
• Stylelt
• Más bonito
• SCSS IntelliSense (por ejemplo, para la completación automática de las variables SCSS)
• Módulos CSS React (por ejemplo, para abrir la definición de clase CSS con CMD/CTRL + Haga clic y advierte sobre los nombres de clases inexistentes)

La extensión oficial de Stylelint puede necesitar algún ajuste de su archivo settings.json . Si no funciona fuera de la caja, intente agregar estas líneas:

 "css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],

Extensiones adicionales que me parece muy valiosas son

Código de corrector ortográfico Gitlens Svg Github Copilot (pagado)

Pruebas

Este proyecto está cubierto con pruebas de ciprés. Aunque la mayoría de las pruebas para aplicaciones de producción se escriben actualmente con la biblioteca de pruebas React, Cypress es la mejor opción para comenzar con las pruebas. Cuando eres nuevo en probar el comienzo, puede ser muy engorroso y sentir que estás en un entorno de desarrollo completamente nuevo.

Cypress hace que sea mucho más fácil comenzar con las pruebas. Todavía tienes que acostumbrarte a la nueva forma de codificar, pero gracias a su increíble depuración de la interfaz de usuario es fácil y muy similar a lo que usas de tu navegador.

Para ejecutar las pruebas de Cypress en su máquina local, use este comando:

npm run cypress

Libro de cuentos

Storybook es una gran herramienta para documentar sus componentes y probarlos visualmente de forma aislada. Para abrir el libro de cuentos ejecutar

npm run storybook