Skip to content

Web de Estación Otaku, desarrollada en React y desplegada con Vercel

License

Notifications You must be signed in to change notification settings

EstacionOtaku/Estacion-Otaku

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Estación Otaku ㊙💻⛩️🎌 - Reto Final (parte 1)

El presente proyecto constó de proponer una web llamada "Estación Otaku". Estación Otaku es una comunidad en la que los fans podrán disfrutar de sus animes favoritos. Nuestro sueño es crear una plataforma de streaming peruana, low-cost y accesible para personas amantes de la cultura japonesa. Un lugar donde puedan encontrar contenido relacionado a series y películas de anime, y disfrutar de la mejor experiencia.

Para vivir la experiencia completa en la Estación Otaku 🚉, hemos dividido nuestra web en paradas:

1️⃣ Landing Page: te encontrarás con un Header que contiene un botón de Iniciar sesión. Además, tenemos un Hero y botones que te redireccionarán a la página de inscripción e inicio de sesión. Así también, en la sección de Tabs podrás ver vistas de la página en distintas pantallas y otra información de interés. Está página también contiene el acceso al juego de memoria. Tenemos al final una sección de Blog y Preguntas frecuentes.

2️⃣ Iniciar sesión: registra tus datos escribiendo tu nombre, correo y contraseña. Disfruta de la experiencia iniciando sesión. Podrás cerrar sesión cuando gustes. En tu cuenta, podrás cambiar de avatar, seleccionando tu personaje favorito.

3️⃣ Categorías: Descubre las más de 10 categorías que tenemos de tus animes y series favoritas. Podrás ver carruseles con lo más visto, tops trending en Perú y nuestras sugerencias.

4️⃣ Filtro de películas: Seleccionando el género de tu preferencia: ciencia ficción, terror, comedia, entre otros... podrás descubrir las películas de estos géneros que hemos filtrado para ti. Esto fue elaborado a partir de nuestra base de datos en json con cientos de animes.

5️⃣ Películas: Haciendo click en la portada de cada película, podrás acceder a la sinopsis, poster oficial y los 4 primeros episodios. Podrás dar click sobre cada video y automáticamente en nuestra página podrás verlo. Una recomendación, te invitamos a ver "Kikoy Senki Dragonar". Si deseas ver otro anime, en la parte inferior tenemos un carrusel con animes similares.

Adicional: Podrás ver la página "Nosotros" con información de nuestro equipo, accediendo a través de un botón desde la sección "Categorías".

Estación Otaku, tu mejor experiencia en un solo lugar...

Instalación 💻

  • Ubicarse en la carpeta del proyecto
  • Abrir la terminal de comandos

Esquemas / Moodboard

esquema-explicativo.jpg

moodboard-otaku.jpg

Nuestra presentación

https://docs.google.com/presentation/d/1oCbXdjY2Yj0tW9tRdCh2BASf1zgGjcGTz5A50pZuufw/edit?usp=sharing

Nuestro Figma

https://www.figma.com/file/63VB7ghR6J2haGqwBUXpA8/Estaci%C3%B3n-Otaku?node-id=105%3A65

Vistas del proyecto

Vista pantalla completa en laptop

web1.jpg

web2.jpg

web3.jpg

web4.jpg

web5.jpg

web6.jpg

web7.jpg

Vista responsive en mobile

otaku-mobile1.jpg

otaku-mobile2.jpg

otaku-mobile3.jpg

otaku-mobile4.jpg

otaku-mobile5.jpg

Arquitectura del proyecto

arquitectura1.jpg

arquitectura2.jpg

Lenguajes y herramientas

Se utilizaron diversas herramientas en una primera etapa, para el diseño gráfico, esquemas, mocks, y linea gráfica de la marca "Estación Otaku" y estudio UX/UI. En la segunda etapa, para desarrollar la web del proyecto, hemos utilizado los siguientes lenguajes y tecnologías aprendidas durante el módulo Front End del Bootcamp:

React HTML CSS JavaScript SASS Axios React Icons Bootstrap Json Slick.js Sweetalert2 Figma Photoshop

Contribuciones

Te pedimos leas los códigos de conducta de GitHub y el presente "README.md" para poder utilizar y contribuir con el proyecto. Se recomienda el uso del proyecto únicamente para fines académicos y educativos. Prohibido su uso para fines comerciales.

Todos los derechos reservados.

Autores

Neko Coders

  • Cerpa Salas, Valeria
  • Chan Yance, Bruno
  • Lazarinos Armendariz, Jeanfranco
  • Huamán Lazo, Diego
  • Palomino Portugal, Clarissa
  • Peña Pacora, Gina
  • Yong Zea, Paula

Licencia

Este proyecto contiene una licencia MIT - ver el archivo adjunto en el repositorio para conocer los detalles.

Agradecimientos

  • Profesor Elliot Garamendi, por la enseñanza.
  • Fundación Es Hoy y CODIGO, por la oportunidad de formarnos en desarrollo web.

Este proyecto fue desarrollado con ❤️ por Neko coders