He realizado con éxito el desafío número 4, último desafío del programa Oracle Next Education (ONE). He creado un video de presentación de mi sitio web y este lo muestro a continuación:
El desafío 4 requiere utilizar la librería React para crear el siguiente diseño:
Sin embargo, dicho diseño lo he encontrado muy pobre frente a todo al potencial que presenta React para crear diseños más interesantes, es por ese motivo que he decidido crear un SUPER DESAFÍO al cual he denominado ProgrammingTUBE, plataforma para gestionar videos seleccionados de programación de modo tal de acceder a conocimiento de calidad y desde una fuente gratuita como lo es Youtube. Dicha plataforma la he creado desde 0 absoluto, es decir, desde una página en blanco. He diseñado todo desde cero ya sea el logo que utilizo y el slogan. Mi desafío lo he denominado como SUPER DESAFÍO ya que fusiono los desafíos 3 y 4, penúltimo y último, de modo de crear un sitio web 100% usando React y en donde me he desafiado a mi mismo para probar mis habilidades en base a todo lo aprendido en las formaciones del programa ONE. Los desafíos son ideales para aplicar el conocimiento adquirido junto con la exposición a nuevas situaciones que no fueron abordadas en los cursos del programa. Para crear este super desafío he creado una FAKE API usando json server y el link a dicha API esta aquí. La data que utilizo la obtengo desde Youtube y el link para crear las imagenes lo genero desde este sitio web.
A continuación presento y hago un recorrido por todas las páginas de mi sitio web:
He creado mi página HOME utilizando tres banner que cambian cada 5 segundos. Además he puesto en la parte inferior de la sección donde se muestra el banner, tres thumbnails de las mismas imagenes del banner y al hacer click alguna de ellas se muestra el nuevo banner correspondiente a ese thumbnails y se resetea el timer para cambiar los banner cada 5 segundos. Los tres Home que muestran los 3 banner son estos:
A continuación presento la página para crear un nuevo video a la cual le he creado un botón que muestra o esconde el formulario para crear/editar o eliminar categorías. Esta página contiene las dos páginas en una sola que se piden en el AluraFlix. Para ingresar a dicha página he creado un botón en el header que permite navegar a esta página:
Cada campo de los formularios para ingresar texto posee validación y he utilizando la librería Material UI para crear tales textfield. A continuación se pueden visualizar tales campos validados:
Además, he usado la librería SweetAlert para crear llamativas alertas y para el caso del ingreso de una URL, he utilizado la API de Youtube para realizar la validación si la URL ingresada corresponde a un video válido de youtube. Aquí muestro cuando NO se cumple tal validación y se genera una alerta de error:
A continuación muestro la alerta de éxito cuando creo un nuevo video:
Siguiendo el consejo de Christian Velasco he agregado una sweetalert la cual presenta las opciones de si se desea seguir agregando videos o si se desea ser redirigido a la página de inicio:
A continuación muestro la alerta de éxito cuando creo una nueva categoría:
Ahora muestro la nueva categoría y video creados. En primer lugar muestro la página que muestra los videos de la categoría creada en dos versiones, día y noche.
Nueva Categoría Versión Día:
Nueva Categoría Versión Noche:
En segundo lugar muestro la página para visualizar el nuevo video creado:
Por último, muestro mi página 404 personalizada:
Como se puede constatar hasta aquí ya he finalizado el desafío AluraFlix como tal y de ahora en adelante presento mis propias creaciones. En primer lugar muestro la página para visualizar cada video:
A continuación muestro la página ver categoría en dos versiones: versión día y versión noche para lo cual he creado un botón en la esquina superior derecha que permite hacer el switch de intercambio de versiones al hacer click sobre él:
Página Ver Categoría Versión Día:
Página Ver Categoría Versión Noche:
He creado una página que permite visualizar los resultados de las búsquedas de titulos de videos. Dicha página presenta 4 versiones: la versión día y cuando existen resultados de búsqueda, la versión noche y cuando existen resultados de búsqueda,la versión día y cuando NO existen resultados de búsqueda y, por último, la versión noche y cuando NO existen resultados de búsqueda. Dichas versiones se pueden visualizar a continuación:
Versión día y cuando existen resultados de búsqueda:
Versión noche y cuando existen resultados de búsqueda:
Versión día y cuando NO existen resultados de búsqueda:
Versión noche y cuando NO existen resultados de búsqueda:
El desafío Aluraflix no posee la manera de editar o eliminar videos creados por lo cual he creado mi propia página para realizar aquello. Dicha página la presento en dos versiones, día y noche:
Página Editar/Eliminar Videos versión Día
Página Editar/Eliminar Videos versión Noche
Dicha página presenta la manera de filtrar videos por categorías y los videos los presento debajo con dos botones, presento el botón Eliminar Video y Editar Video. Al hacer click en el botón eliminar video, el cual posee como icono una cruz, se elimina el video almacenado en la API y al hacer clic sobre el botón editar video, el cual posee como icono un lápiz se redirigue a una nueva página la cual es la siguiente:
En caso de que se lleguen a borrar todas las categorías, todos los videos se borrarán y se presentará una página mencionando el hecho de que no existe data en la API. Si se borran todos los videos dicha página también se mostrará. A continuación se puede visualizar dicha página en dose versiones, versión día y versión noche:
Página No Existe Data en la API versión día
Página No Existe Data en la API versión noche
He creado una página que muestra los derechos de autor los cuales pertenecen a sus respectivos dueños en caso de que se trate del contenido de los videos y la plataforma Youtube y, en todo otro caso, los derechos de autor me pertenecen siendo el diseñador. Dicha página también presenta dos versiones, versión día y versión noche:
Página Derechos de Autor versión día
Página Derechos de Autor versión noche
Por último, muestro el componente Acordion expandido el cual he creado desde cero en base a diseños que encontré en la web:
