evoratec / instacode-web

InstaCode Web - MiniCodeLab

Lista de tareas pendientes:

• Instalar React Router
• Instalar axios
• Instalar React Hook Form
• Instalar emotion (alternativa a styled-components)
  • npm install @emotion/react
  • npm install @emotion/styled
  • Añadir config en el plugin de react

---

• Crear design system sobre Emotion
  • Crear variables globales de CSS
  • Importar las fonts del proyecto Roboto (regular & bold)
• Crear sistema de routing con react-router-dom
• Crear componente ruta protegida
• [] Autenticarnos con la API
  • Registrarse
  • [] Logearse

Próximo día:

• Config de Prettier

• Config de Eslint

  • npx eslint --init
  • npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

• Config de Jest

• Config de Husky

  • npm i -D husky lint-staged

  "husky": {
      "precommit": "lint-staged"
    },
  "lint-staged": {
    "\*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --quiet --fix",
      "jest --passWithNoTests"
    ]
  }
  

• Refactor del registro

  • [-] Crear hook de autenticación
  • Crear servicio API
  • Guardar datos del user en Context
  • Guardar token en localstorage

---

• Crear componentes para el formulario

  • Input
  • Select
  • Form
  • Botón
  • AuthenticateLayout

• Añadir forms y pantalla de Registro y login

  • Registro
  • Login
  • Añadir redireccion a la ruta /styleguide

---

• Propagar email de registro a login
• Cargar datos de usuario al cargar la aplicación
• Crear las vistas de las rutas protegidas
• Crear componente lista de codes
  • Crear componente Code Snippet

---

• Snippets:
  • Conectarse con la API para traer snippets
  • Formulario para crear snippets

---

Refactors pendientes:

• Snippets 🎉

  • Filtro por lenguaje
  • Añadir toast para errores - npm install --save react-toastify
  • Añadir paginación
  • Scroll para snippets

• [] General

• • Crear la navbar con botón de logout
  • Vista de crear Snippet
  • Vista de edición de perfil
  • [] Refactor general de estilos
  • Despliegue a prod en Vercel

---

• [X][] Añadir tests con RTL

• [] Refactor general del backend

• [] Refactor Formularios

  • [] Componetizar los inputs de forma más genérica
  • [] HOC para que los users logeados no entren en Authenticate
  • [] Controlar los errores generales del form

---

• [] Cuando creamos snippet, redirigir a /snippets?mode=owner
• [] Añadir emoji a la navbar
• [] Crear edición de perfil/contraseña - BE & FE
• [] Arreglar recarga en cualquier ruta del despliegue
• [] Maquetar snippets para hacer un masonry

---

• Contextos => Custom hooks
  • Auth Context
  • Snippet Context
• Servicios => Abstraer funciones comunes
• Unit Tests => Componentes y funciones