Skip to content

Instantly share code, notes, and snippets.

@darwinyusef
Last active May 5, 2024 23:02
Show Gist options
  • Save darwinyusef/d7153563723c5bbc3e85a4445476ffb5 to your computer and use it in GitHub Desktop.
Save darwinyusef/d7153563723c5bbc3e85a4445476ffb5 to your computer and use it in GitHub Desktop.
ID Paso Descripción Requerimientos Tecnologías
1 Planificación y diseño Definir objetivos, funcionalidades, arquitectura del sitio web, diseño de interfaz de usuario (UI) y experiencia de usuario (UX). - Requerimientos del cliente. - Definición de flujos de trabajo. - Diseño de wireframes y mockups. - Figma, Adobe XD, Sketch.
2 Configuración del entorno de desarrollo Instalar Node.js, React, herramientas de desarrollo y dependencias. - Node.js v16.14 o superior. - React v18 o superior. - NPM o Yarn. - Editor de código (VS Code, Sublime Text, WebStorm). - Node.js, React, NPM/Yarn, Editor de código.
3 Desarrollo del frontend Implementar la interfaz de usuario y la lógica del frontend utilizando React, componentes, hooks y estilos. - Conocimientos de React, JSX, hooks y estilos (CSS, SASS/SCSS). - Librerías de componentes (Material UI, Bootstrap). - React, JSX, Hooks, CSS/SASS/SCSS, Librerías de componentes.
4 Desarrollo del backend Crear API RESTful con Node.js, Express, MongoDB u otro gestor de bases de datos para manejar la lógica de negocio, autenticación y almacenamiento de datos. - Conocimientos de Node.js, Express, API RESTful, MongoDB u otro gestor de bases de datos. - Autenticación y autorización (JWT). - Node.js, Express, MongoDB, JWT.
5 Integración frontend-backend Conectar el frontend con el backend mediante API RESTful, utilizando Axios o Fetch API para la comunicación entre ambos. - Conocimientos de API RESTful, Axios o Fetch API. - Manejo de estados y respuestas. - Axios, Fetch API, Manejo de estados.
6 Pruebas y depuración Realizar pruebas unitarias, de integración y funcionales para asegurar el correcto funcionamiento del sitio web. Corregir errores y optimizar el rendimiento. - Jest, Enzyme, Cypress. - Herraminetas de depuración del navegador. - Jest, Enzyme, Cypress, Herramientas de depuración del navegador.
7 Despliegue y mantenimiento Publicar el sitio web en un servidor de producción (Vercel, Render, AWS, DigitalOcean, Azure, Google) y realizar el mantenimiento continuo, correcciones de errores y actualizaciones. - Conocimientos de servidores web y DevOps. - Monitorización y análisis de rendimiento. - Heroku, AWS, DigitalOcean, Monitorización de rendimiento.
8 Seguridad Implementar medidas de seguridad para proteger el sitio web de ataques y vulnerabilidades, como autenticación y autorización, CSRF, XSS, SQL injection. - Conocimientos de seguridad web y OWASP. - Librerías de seguridad (Helmet, OWASP). - Helmet, OWASP, Librerías de seguridad.
9 Optimización Optimizar el rendimiento del sitio web para mejorar la velocidad de carga, SEO y experiencia del usuario. Minimizar recursos, utilizar técnicas de caché y lazy-loading. - Conocimientos de optimización web, SEO y herramientas de análisis. - Librerías de optimización (React-loadable, Imagemin). - React-loadable, Imagemin, Herramientas de análisis.
10 Internacionalización y accesibilidad Implementar la internacionalización del sitio web para traducirlo a diferentes idiomas y la accesibilidad para que sea compatible con lectores de pantalla y otras tecnologías de asistencia. - Conocimientos de internacionalización y accesibilidad web. - Librerías de internacionalización (React-intl). - React-intl, Librerías de accesibilidad.
11 Pruebas de usuario Realizar pruebas de usuario con personas reales para obtener comentarios y mejorar la usabilidad, la experiencia del usuario y la tasa de conversión del sitio web. - Plan de pruebas de usuario y herramientas de análisis. - Reclutamiento de usuarios objetivo. - Herramientas de análisis de usabilidad, Reclutamiento de usuarios.
12 Documentación Crear documentación completa del sitio web, incluyendo arquitectura, código, API, flujos de trabajo y guías de uso para desarrolladores y usuarios. - Conocimientos de redacción técnica y herramientas de documentación. - Herramienta de documentación (JSDoc, Readme.md). - JSDoc, Readme.md, Herramienta de documentación.
13 Escalabilidad y rendimiento Implementar estrategias de escalabilidad y optimización del rendimiento para manejar un alto volumen de tráfico y usuarios concurrentes. Balanceo de carga, caché distribuido, clustering. - Conocimientos de arquitectura de software escalable y herramientas de monitorización. - Servicios en la nube (AWS, Google Cloud). - AWS, Google Cloud, Librerías de caché distribuido.
14 Despliegue continuo Implementar un proceso de despliegue continuo para automatizar la publicación de nuevas versiones del sitio web a producción de forma segura y eficiente. Integración continua, entrega continua. - Conocimientos de DevOps y herramientas de integración y entrega continua. - Jenkins, GitLab CI/CD. - Jenkins, GitLab CI/CD, Herramienta de automatización.
15 Análisis de datos Implementar herramientas de análisis de datos para comprender mejor el comportamiento de los usuarios y optimizar el sitio web en base a datos reales. Google Analytics, Matomo. - Conocimientos de análisis de datos y herramientas de visualización. - Google Analytics, Matomo. - Google Analytics, Matomo, Herramientas de visualización de datos.
16 Marketing y promoción Implementar estrategias de marketing y promoción para dar a conocer el sitio web y atraer nuevos usuarios. SEO, SEM, redes sociales. - Conocimientos de marketing digital y publicidad online. - Plataformas de marketing digital (Facebook Ads, Google Ads). - Facebook Ads, Google Ads, Plataformas de marketing digital.
17 Evolución y crecimiento Planificar la evolución del sitio web a largo plazo, incluyendo nuevas funcionalidades, mejoras y expansión a nuevas plataformas. - Visión estratégica del sitio web y su mercado. - Plan de desarrollo a largo plazo. - Software de gestión de proyectos, Hojas de ruta. Diseño de proyecciones con UML
18 Escalabilidad global Implementar estrategias de escalabilidad global para que el sitio web pueda ser accedido por usuarios de todo el mundo con un buen rendimiento. CDN, balanceo de carga global. - Conocimientos de redes y arquitectura de software escalable. - Proveedores de CDN y balanceo de carga global. - CDN, Balanceo de carga global, Proveedores de CDN y balanceo de carga.
19 Personalización Implementar funcionalidades de personalización para que los usuarios puedan adaptar el sitio web a sus preferencias. Temas, configuración de idioma, notificaciones personalizadas. - Conocimientos de diseño web y experiencia de usuario. - Librerías de personalización (React-i18next). - React-i18next, Librerías de personalización.
20 Soporte, Mantenimiento y actualizaciones Implementar un plan de mantenimiento para corregir errores, actualizar dependencias, agregar nuevas funcionalidades y mejorar el sitio web continuamente. Ofrecer soporte técnico a los usuarios del sitio web y realizar tareas de mantenimiento correctivo y preventivo. - Plan de mantenimiento y gestión de versiones. - Monitorización de errores y rendimiento. - Git, GitHub, Monitorización de errores y rendimiento. - Sistema de tickets de soporte, Base de conocimientos.

Frontend

  • Diseño web responsivo
  • Diseño intuitivo y fácil de usar
  • Tipografía legible y jerarquizada
  • Uso adecuado de imágenes y videos
  • Diseño optimizado para la velocidad de carga:
  • Paragraph y Text formatting
  • Links Router
  • Lists
  • Images
  • Tables
  • Forms
  • Extra Markup
  • Data formating
  • Introducing CSS 11. Color
  • Text
  • Boxes and Sectioning
  • Iframes
  • Layout HTML5
  • Semantic Layout HTML5 Intro to Inputs
  • input -> captura datos tipo texto o numero select -> datos prehechos a seleccionar input -> radio - circulo unico > input -> checkbox -> cuadrado multiple textarea -> parrafo form -> get | post | put | delete input -> submit
  • Media elements - Video & Audio
  • Formulario de contacto
  • Página de inicio atractiva
  • Barra de navegación clara y visible
  • Sistema de búsqueda eficaz
  • Paginación y filtros
  • Botones y llamadas a la acción claros:
  • Mensajes de error y validación
  • Accesibilidad
  • GRID Flexbox Box Marquee
  • Fetch front y back (GET, POST, PUT, DELETE)
  • Optimización de palabras clave
  • Enlaces permanentes amigables
  • Mapa del sitio: Se debe crear un mapa del sitio para ayudar a los buscadores a indexar la aplicación.
  • Metadatos
  • Rendimiento
  • Minificación y compresión
  • Almacenamiento en caché
  • CDN
  • Pruebas de usabilidad
  • Pruebas de compatibilidad con navegadores:
  • Pruebas de rendimiento
  • Documentación clara y actualizada
  • Código limpio y bien organizado
  • administrador del website
  • React Hooks
  • React state zustand
  • LAZYLOAD Y HOOKS AVANZADO STATE
  • ESLINT
  • REACT - ANGULAR CON TYPESCRIPT
  • COMPONENTES CON TAILWIND DESDE STORYBOOK
  • DESPLIEGUE
  • ATOMIC DESIGN, DESIGN SYSTEM
  • DESIGN TOCKENS
  • UI / UX
  • ANIMACIONES

Acciones requeridas en el backend

  • Node: orígenes y filosofía
  • EventLoop: asíncrona por diseño
  • Monohilo: implicaciones en diseño y seguridad
  • Configurar las variables de entorno en Node.js
  • Nodemon y PM2
  • Asincronía
  • Callbacks
  • Refactor
  • Promesas
  • Async/await
  • Globals
  • File system
  • Console
  • Errores (try / catch)
  • Procesos hijo
  • Módulos nativos en C++
  • HTTP
  • OS
  • Process
  • Utilizar los módulos y paquetes externos
  • Gestión de paquetes: NPM y package.json
  • Construyendo módulos: Require e Import
  • Módulos útiles
  • Datos almacenados vs en memoria
  • Buffers
  • Compiladores y Bundlers, webpack y babel
  • Helpers o build in
  • Streams
  • Debugger
  • Error First Callbacks
  • Scraping
  • Automatización de procesos
  • Aplicaciones de escritorio
  • Lamda

Administrables

  • dashboard
  • routes
  • errors
  • notifications
  • emails
  • menssages
  • reports
  • graphs
  • Observabilidad new relic
  • Observabilidad MELTS - Events - Metrics - Logs - Traces

Eventos - intermedios y avanzados en el back con Express

  • Construcción de una correcta REST
  • Paginación
  • Filtrados y orders - por sql y joins
  • filters eq, ne, gt, lt, ge y le
  • HTTPERRORS
  • Validaciones con joi y construccion de middleware
  • Errores con BOOM y creación de middleware errorHandler | logErrors | boomErrorHandler (status codes)
  • Autenticación completa
  • Express Router external
  • OAuth 2.0
  • OpenID
  • GraphQL
  • Commander
  • Multer
  • GET-POST-PUT-DELETE examples con pg y pool, mysql - pool
  • Mongoose y mongo db atlas
  • Helmet
  • Query Builders
  • Express slash
  • BullMQ manejo de colas
  • Job Scheduling:
  • Email
  • Winston
  • I18next - I18n and L10n Libraries Internacionalización - Localización l10n
  • Notificaciones push
  • socketio
  • taller de socketio
  • Express events Server-Sent Events (SSE)

Persitencia de datos - Express Postgresql con Sequelize | prisma

  • Migraciones
  • Seeds con faker
  • Entidades - ER
  • CRUD
  • Modelos
  • Multiple BD
  • Auth 0 y Auth2, 2f2
  • Pasport y jwt
  • Deploy
  • Docker con NODE
  • Passport con Express
  • Avanzado Middlewares
  • verificación
  • bcryptjs
  • hashsing -jose
  • proyeccion de rutas
  • owasp
  • roles y permisos

Construcción avanzada y microservicios

  • arquitectura de microservicios
  • multitenants y service tenants
  • paradigmas externos y / o aislados
  • uso de microservicios
  • comunicación con redis
  • comunicación con rabitmq
  • escalamiento con microservicios y nuevas arquitecturas kubernetes
  • Diseño de la arquitectura para soportar un alto número de usuarios.
  • Implementación de técnicas de escalado horizontal y vertical.
  • Monitoreo y ajuste de la infraestructura según la demanda.
  • Load Balancing
  • external Monitoring and Logging
  • Content Delivery Networks
  • Cloud Deployment Platforms
  • Streaming
  • Machine Learning Integration

Arquitectura - Seguridad - testing y pruebas TDD

  • Pruebas unitarias y de integración
  • Mocha/Chai
  • Monitoreo con Winston
  • Patrones de diseño
  • Versionado de API
  • Pruebas de extremo a extremo (E2E) Cypress
  • Desacople de código
  • Pruebas de mutación
  • 10 owasp

Algunos requerimientos no funcionales

Requerimientos no funcionales

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment