Prueba técnica de NEOWYZE con Next.js y Tailwind CSS ✨
🎯 Objetivo: Desarrollar una aplicación web con motivo a las películas de Star Wars.
La aplicación se conecta con SWAPI para obtener información sobre los 6 films de Star Wars. Se crea una landing page que permite la navegación entre las secciones de films y personajes. La página de films muestra el nombre, imagen genérica y número de episodio de cada film. Para la página de detalle del film, se muestra información adicional como el director y una lista de personajes relacionados. La página de personajes muestra el nombre, imagen genérica, color de ojos y género de cada personaje, con opciones de paginación o scroll infinito. Se implementan filtros por color de ojos y género que se aplican a todos los personajes. Finalmente, se crea una página de detalle del personaje que muestra información detallada, omitiendo propiedades con valores "n/a" o "unknown".
La aplicación utiliza Tailwind CSS para los estilos y Next.js para el desarrollo web, cumpliendo con los requisitos establecidos. Se aprovecha la API proporcionada por Next.js y se ha desarrollado en JavaScript. La navegación entre páginas se realiza mediante el sistema de rutas del framework. La información de SWAPI se adapta a la vista requerida sin utilizar su librería. Además, la aplicación es responsive como un plus.
- ✅ Implementar la conexión con SWAPI para obtener la información de los 6 films de Star Wars.
- ✅ Crear una landing page que permita navegar a las secciones de films y personajes.
- ✅ Diseñar una página de films que muestre el nombre, imagen genérica y número de episodio de cada film.
- ✅ Desarrollar una página de detalle del film que muestre el nombre, imagen genérica, número de episodio y director, así como una lista de personajes con su nombre, imagen genérica y enlace al detalle de cada personaje.
- ✅ Diseñar una página de personajes que muestre el nombre, imagen genérica, color de ojos y género de cada personaje, con la opción de paginación o scroll infinito.
- ✅ Implementar filtros por color de ojos y género en la página de personajes, que se apliquen a todos los personajes.
- ✅ Crear una página de detalle del personaje que muestre información detallada como nombre, imagen genérica, color de ojos, año de cumpleaños, color de pelo, altura, color de piel y masa, omitiendo las propiedades con valor "n/a" o "unknown".
- ✅ Los estilos se deben desarrollar con tailwind.
- ✅ Se espera que la aplicación web sea desarrollada con next.
- ✅ Se debe usar la api que provee Next.
- ✅ El lenguaje de programación es a elección del desarrollador (JavaScript o TypeScript).
- ✅ Se debe navegar entre páginas haciendo uso del sistema de rutas del framework.
- ✅ Se espera que la data que recibe de SWAPI sea mapeada de acuerdo a como la vista va a mostrar.
- ✅ No usar la librería que SWAPI ofrece.
- ✅ Como plus, la aplicación puede ser Responsive
Sigue estos pasos para clonar y el proyecto localmente:
-
Abre la consola en la ubicación deseada para clonar el repositorio.
-
Clona este repositorio en tu máquina local utilizando Git:
git clone https://github.com/Schugu/prueba-tecnica-neowyze.git
-
Navega al directorio del proyecto clonado:
cd prueba-tecnica-neowyze -
Instala las dependencias del proyecto utilizando npm o yarn:
npm install # o yarn -
Inicia el servidor del proyecto utilizando npm:
npm run dev
-
Una vez que el servidor de desarrollo end esté en funcionamiento, abre tu navegador web y navega a la dirección local para ver el proyecto en acción.
Para personalizar y comprender el proyecto, sigue estas instrucciones:
- Archivos locales: Si deseas modificar o entender cómo funciona el proyecto, te recomiendo revisar los archivos y carpetas dentro de
App. En estas carpetas vas a encontrar los archivos que contienen la lógica y personalización de la página.
- Mi aplicación web es accesible gracias a la implementación adecuada de los atributos
tabindex. Esto garantiza una navegación fluida y eficiente para todos los usuarios, incluidos aquellos que dependen de tecnologías de asistencia para interactuar con la aplicación.
|
|
|
|
|
|
|
|
|
|
|
|
|
|