Konbini Otaku, Web E-Commerce del proyecto Estación Otaku, desarrollada con Next.js y desplegada con Vercel

Overview

Konbini Otaku 💬 🛒 ⛩️ 🎌 - Reto Final (parte 2)

Este proyecto constó de proponer "Konbini Otaku", la cual es una tienda virtual en la que podrás adquirir productos, ropa, regalos, arte y souveniers. Adquiere tu producto favorito en la temática del mundo Anime. Konbini Otaku forma parte de la marca "Estación Otaku" y será el lugar ideal para encontrar aquel detalle que necesitas. Nuestro catalogo se actualiza frecuentemente ¡Contamos con productos de los animes de moda! En adición, ofrecemos una experiencia nueva a nuestros clientes a través de nuestro reto. Podrás jugar nuestro quiz Otaku. Responde a la mayoría de preguntas y gana vales de descuento para tu próxima compra.

¿Aceptas nuestro reto?

Para vivir la experiencia completa en Konbini Otaku 🛒 , hemos dividido nuestra web en las siguientes secciones:

1️⃣ Landing page: contiene un Header, un botón de "la promoción del mes" (Poster Bleach a S/. 25) y la sección de productos en venta. Podrás descubrir todos los productos que tenemos nuestro catálogo.

2️⃣ Información del producto: muestra la información de cada producto. Podrás ver la imagen en mayor tamaño, así como mayor información. Tenemos un botón de pedido por Whatsapp, en el cual podrás comunicarte con nuestra tienda y continuar tu compra.

3️⃣ Quiz Otaku: Te invitamos a resolver nuestro quiz sobre animes. Responde las 12 preguntas y al final podrás revisar tus respuestas.

Adicional: Nuestra tienda presenta links a "Estación Otaku" (web de streaming de animes) y a la página de Nosotros (conoce a nuestro equipo).

Instalación 💻

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

Esquemas / Moodboard

konbini-esquema.jpg

konbini-moodboard.jpg

Nuestra presentación

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

Vistas del proyecto

Vista pantalla completa en laptop

web-konbini.jpg

web-konbini1-5.jpg

web-konbini2.jpg

web-konbini3.jpg

Vista responsive en mobile

mobile-konbini1.jpg

mobile-konbini2.jpg

mobile-konbini3.jpg

mobile-konbini4.jpg

Arquitectura del proyecto

konbini-arquitectura.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 "Konbini 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:

Next.js HTML CSS JavaScript Axios Shopify Storefront API GraphQL React Icons Tailwind CSS Figma Photoshop Nano ID

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

You might also like...

A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed

A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed

WordPressWooCommerceDashboard - A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed. This program provides shipping tracking for Delhivery.

Jan 3, 2022

Aplicación final del curso de Next de Fernando

Next.js Telo Shop Para correr localmente, se necesita la base de datos. docker-compose up -d El -d, significa detached Configurar las variables de en

Dec 29, 2022

🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

🐲 Epic NFTs [UI] El proyecto se encuentra deployado en Vercel para que puedan verlo e interactuar con él, toda crítica o comentario se agradece, pued

Oct 22, 2022

Chontaduro, Borojo, Sancocho de gallina y algo sustancia perico fueron usadas para crear el mejor proyecto de código en toda la historia de Colombia

Chontaduro, Borojo, Sancocho de gallina y algo sustancia perico fueron usadas para crear el mejor proyecto de código en toda la historia de Colombia

Chontaduro, Borojo, Sancocho de gallina y algo sustancia perico fueron usadas para crear el mejor proyecto de código en toda la historia de Colombia

May 11, 2022

Server Base - Proyecto ONG

Server Base - Proyecto ONG Envinroment setup Create database Copy .env.example to .env and fill with database credentials. To install dependencies, ru

May 3, 2022

Proyecto gratis, hecho en comunidad.

Adopcanem landing page Este es un proyecto gratuito hecho en comunidad, usando Next.js, React, ChakraUI y TypeScript. El prototipo se puede encontrar

Jul 10, 2022

Server Base - Proyecto ONG

Server Base - Proyecto ONG Envinroment setup Create database Copy .env.example to .env and fill with database credentials. To install dependencies, ru

Jun 18, 2022

Frontend - Proyecto final Henry FT25B-G4

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Aug 4, 2022

My personal website built with Next.js, TypeScript, twin.macro, Framer Motion, MDX and deployed on Vercel.

chrvaskos.com My personal website / blog built with some of my favorite technologies where I can showcase my work and write articles about anything ne

Mar 25, 2022
Este repositorio contendrá el proyecto final de Angular con temática de Pokemon Unite

ProyectoFinal This project was generated with Angular CLI version 14.0.2. Development server Run ng serve for a dev server. Navigate to http://localho

null 2 Jun 19, 2022
A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

MongoDB Starter – Developer Directory A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integrati

Vercel 246 Dec 20, 2022
Plataforma del Registro de Autoexclusión del Juego

WebApp boilerplate with React JS and Flask API Styles You can update the styles/index.scss or create new .scss files inside styles/ and import them in

Daniel Bañobre Dopico 7 Feb 4, 2022
Recreación del entorno de escritorio del sistema operativo macOS Monterey utilizando HTML, CSS y JavaScript

macOS Réplica del sistema operativo macOS Monterey utilizando HTML, CSS y JavaScript. GitHub pages https://jonathan-yv.github.io/macOS/ Componentes Ve

Jonathan Yair Vazquez 4 Feb 4, 2022
Questi sono i miei plugin del cazzo, scritti col culo, ma con tanto amore. 50 euro.

ReaperianiJS Questi sono i miei plugin del cazzo, scritti col culo, ma con tanto amore. 50 euro. Spiegone: Il fuorilavoce è un plugin di eq M/S (mid s

null 9 Feb 11, 2022
Codigo del Webinar de Organizador de Tareas con autenticación

Webinar Organizador de Tareas con autenticación Bienvenido al repositorio ??️ del Webinar donde podrás encontrar el codigo expuesto ??️ Para comenzar

Eduardo de Rivero Manrique 4 Jun 24, 2022
Un experimento personal con el portal del Centro de Documentación de la Imagen de Santander.

Retrosantander Un experimento personal con el portal del Centro de Documentación de la Imagen de Santander (CDIS) y sus contenidos. Por Jaime Gómez-Ob

Jaime Gómez-Obregón 71 Dec 11, 2022
Haciendo una aplicación del tiempo ☁️ con #Angular 13 🅰️

Angular Boilerplate Boilerplate para trabajar con Angular, este proyecto listo para trabajar las pruebas unitarias con Jestjs y eslint. Este proyecto

DOMINICODE 4 Apr 20, 2022
Repositorio del video de YouTube sobre creación y generación de imágenes de docker con Node

Importante Tener instalado Docker Desktop!!! Comandos usados Login de Docker Hub docker login Generar la imagen, especificar el TAG (-t) y el punto s

Fernando 5 Oct 27, 2022
Proyecto de encriptasion, echo para el curso de Oracle Next Education 2022

Encriptador Proyecto de Encriptador, echo para el curso de Oracle Next Education 2022. Link directo al proyecto desplegado Link al Encriptador Instruc

Bernardo Abel Lopez 14 Dec 28, 2022