+
Skip to content

canastillo/recetario

Repository files navigation

Chef betiski

Integrantes del equipo

Descripcion del problema

Al realizar este proyecto se pusieron en practica todos los temas que vimos en el modulo de Programacion con Javascript el proyecto realizado es un buscador de recetas, toda la informacón que se muestra en la aplicacion se obtuvo consumiendo una API llamada TheMealDB, tambien reforzamos lo que vimos en el modulo de Frontend Fundamentals al momento de hacer la maquetacion de cada componente de nuestro sitio Web.

Tecnologias utilizadas

  • Webpack
  • HTML
  • CSS
  • Javascript

Wireframes


Mobile


Pagina principal

alt text
En la pantalla home se muestran las listas de recetas e ingredientes, el usuario puede hacer scroll hacia la derecha para ver las recetas e ingredientes que hay despues de los que ya se muestran

Menu desplegado

alt text
En esta pantalla se muestra el menu que es desplegado al hacer clic en el boton de la esquina, se muestran las acciones principales que puede realizar el usuario que son ir a home, recetas o ingredientes

Catalago de Ingredientes

alt text
En esta pantalla se muestra la lista de ingredientes, el usuario puede hacer scroll hacia abajo para ver los elementos restantes

Catalago de Recetas

alt text
En esta pantalla se muestra la lista de recetas, el usuario puede hacer scroll hacia abajo para ver los elementos restantes, ademas de que puede dar click en el boton para ir a ver los detalles de la receta que son los ingredientes y las instrucciones

Vista de Ingrediente

alt text
Esta es la vista principal del ingrediente, aqui se muestran todos las recetas donde el ingrediente esta incluido

Vista de Receta

alt text
Esta es la vista principal del la receta, aqui se muestran los de talles de la receta como lo son los ingredientes y sus instrucciones para su preparacion

Desktop

Vista de Home

alt text
Esta es la vista principal de nuestra aplicación, se muestra la lista de ingredientes, lista de recetas, ademas de que se cuenta con un buscador de recetas y un buscador random

Vista de ingredientes

alt text
En esta vista se muestran todos los ingredientes

Vista de recetas

alt text
En esta vista se muestran todas las recetas ademas de que se puede dar click en el boton para ir a los detalles de la receta



Vista receta

alt text
En esta pantalla se muestran los detalles de la receta como lo son los ingredientes y las instrucciones

Instalación

  • Clonar el repositorio
  • Ejecutar los siguientes comandos en la raiz del proyecto con la terminal de Node
  npm install
  npm start

About

Buscador de recetas hecho con HTML, CSS y JS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载