En este proyecto teníamos la tarea de desarrollar una tienda e-commerce, que sea 100% responsiva y que sea capaz de consumir una API simulada usando json-server para poder administrar los productos para la venta.
La página no debía ser muy compleja para poder poner en práctica y pulir todo lo que aprendimos hasta el momento del curso, por lo que se crearon archivos HTML para cada sección de la página.
| HTML | Explicación |
|---|---|
| index.html | Página principal del proyecto, expone todos los productos separados por categorías |
| resultados-busqueda.html | Muestra los resultados de búsqueda |
| ver-producto.html | Muestra la descripción del producto seleccionado |
| inicio-sesion.html | Login, funciona con un simple if else para poder acceder a las opciones de administrador |
| todos-los-productos.html | Página de administrador, expone todos los productos con las opciones agregar, editar y eliminar |
| agregar-producto.html | Página de administrador, formulario para ingresar un producto a la tienda |
| editar-producto.html | Página de administrador, formulario para editar un producto existente de la tienda |
- Servidor: http://localhost:3000/producto
- Versión: 0.1.0
- Diseño responsivo
- Autor: Javier Anibal Villca
- Repositorio GitHub: git+https://github.com/Javier104-dev/tienda-geek.git
Para visitar la tienda clic en el link.
Solamente se podrá ver la tienda pero sin los productos expuestos, para verlos debe iniciarse el servidor.
- Una página de inicio que contiene un botón de inicio de sesión y un motor de búsqueda de productos ofrecidos por la empresa.
- Un banner que contenga descuentos, promociones o informaciónes relevante del momento.
- Una galería con información del producto, como imagen, nombre del producto, precio y un enlace a la página de descripción del producto.
- Una página de producto que contiene la imagen, el nombre, la descripción y el precio.
- Un pie de página con un formulario de contacto y otras informaciónes relevantes.
- Un formulário de iniciar sesión para autenticar a los usuarios que quieran acceder al menu administrador.
- Menú de administrador para que puedan agregar, editar, buscar o eliminar productos de la tienda.
- IDE - Visual Studio Code v1.84.2
- Git v2.43.0
- Extensión Live Server
- Node.js v20.9.0
Usamos Live Server para no tener conflictos con json-server.
- Descargar o clonar el repositorio.
- Instalar la Extensión Live Server para visualizar el
index.html. - Ejecutar en consola
npm installpara instalar las dependencias requeridas. - Correr el comando
npm run iniciar-servidorpara iniciar el servidor back. - Abrir el archivo
./screens/index.htmlcon Live Server.
Correo = login1@hotmail.comContraseña = Login123
 Javier Anibal Villca |
|---|