🌟 Star Wars Page🌌🚀🌟

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.

Requerimientos:

1. ✅ Implementar la conexión con SWAPI para obtener la información de los 6 films de Star Wars.
2. ✅ Crear una landing page que permita navegar a las secciones de films y personajes.
3. ✅ Diseñar una página de films que muestre el nombre, imagen genérica y número de episodio de cada film.
4. ✅ 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.
5. ✅ 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.
6. ✅ Implementar filtros por color de ojos y género en la página de personajes, que se apliquen a todos los personajes.
7. ✅ 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".

Consideraciones generales:

• ✅ 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

Instalación y ejecución del proyecto (Next.js) 🛠️💻

Sigue estos pasos para clonar y el proyecto localmente:

1. Abre la consola en la ubicación deseada para clonar el repositorio.

2. Clona este repositorio en tu máquina local utilizando Git:

   git clone https://github.com/Schugu/prueba-tecnica-neowyze.git

3. Navega al directorio del proyecto clonado:

   cd prueba-tecnica-neowyze

4. Instala las dependencias del proyecto utilizando npm o yarn:

   npm install
   # o
   yarn

5. Inicia el servidor del proyecto utilizando npm:

   npm run dev

6. 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.

Personalización y comprensión del proyecto 🎨🧠

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.

Accesibilidad ♿️

• 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.

Capturas de pantalla 📸

💻 Computadora 💻	📱 Celular 📱