IaconoG/Proyecto-Bootcamp-de-React--CF

My Home

Proyecto React - CodigoFacilito

Tecnologías

• React
  • Suspense: Permite a los componentes mostrar un fallback mientras se cargan los datos.
• TypeScript

Sistema de Compilación

• Vite

Manejo de Estado

• Zustand
• LocalStorage
  • setItem: Almacena un par clave-valor.
  • getItem: Obtiene el valor asociado con la clave especificada.

Llamadas a la API

• Fetch API

Google API Login

• npm i jwt-decode: Decodifica un token JWT y devuelve el objeto decodificado.

Enrutamiento

• React Router
  • createBrowserHistory: Utiliza la API DOM History para actualizar la URL y administrar la pila del historial.
  • RouterProvider: Todos los objetos del router de datos se pasan a este componente para representar su aplicaoicn y habilitar el resto de las API de datos.
  • Outlet: Permite que la interfaz de usuario anidada aparezca cuando se renderizan las child routes.
  • useRouteError: Devuelve un objeto con la ruta actual y la información de error.
  • isRouteErrorResponse: Verifica si el error de la ruta actual es una respuesta de error.

Formularios

• React Hook Form
  • useForm: Devuelve todos los métodos necesarios para construir un formulario.

Dates

• date-fns

Iconos

• React Icons

Testing

• React Testing Library

Lineamientos

• Hooks Reusables
• Zustand
  • Minimo 2 stores
  • Almacenar inforamcion obtenida de una API
  • Herramientas o/y middleware de Zustand
• Llamadas a la API
• Routing
  • Al menos 3 rutas
• Formularios
  • Implementar validaciones
  • Implementar mensajos de errores
• Deploy a servidor
  • Deploy en Vercel
  • La url del proyecto debe ser de acceso publico
• Testing
  • Al menos 2 componentes con test
• Documentacion - PDF
  • Informacion acerca del proyecto, quienes trabajaron en él.
    • Que hace el proyecto.
    • Tecnologias / Dependencias utilizadas.
    • Descripción de los componentes y hooks utilizados.
    • Descripción de la API utilizada.
    • Descripción de los test realizados.
    • Descripción de los stores utilizados.
    • Capturas de pantalla del proyecto.
  • Desafios que se presentaron en el desarrollo del proyecto y como los resolvieron.
  • Puntos clave a destacar del proyecto.
  • Instrucciones especiales para ejecutar si es que existen.
    • Credencial de prueba.

Hoooks & Components & Referencia de la API

Hooks

• useFetch
• useLocalStorage
• useEffect
• useState
• context
• useTransition
• useCallback
• useMemo
• useRef
• useLocation
• useParams

Components

• Suspense
• ErrorBoundary

API

• memo