Giter Club home page Giter Club logo

alura-geek-vanillajs's Introduction

AluraGeek

AluraGeek Ecommerce es una aplicación web de comercio electrónico que permite a los usuarios comprar una variedad de productos en línea. Esta plataforma proporciona a los clientes una experiencia de compra fácil y segura.

Tabla de Contenidos

Tecnologías Utilizadas

  • Vanilla Javascript
  • TailwindCss
  • HTML
  • SessionStorage
  • Json Server
  • Vite
  • GitHub Pages
  • Render Web service

Funcionalidad v1

  • Inicio de Sesión con email: [email protected] password: 12345678
  • Validaciones en los formularios
  • Búsqueda y navegación de productos en la página principal por medio del nombre del producto
  • Visualización de productos por categoría.
  • Descripción de un producto seleccionado.
  • Menu de administración para crear, eliminar y editar productos (CRUD).
  • Rutas protegidas si no ha iniciado sesión
  • Simulación de API con un servicio web de json-server en render.com

Próximas funcionalidaes

Para versiones posteriores, se tiene en mente desarrollar otras funcionalidades, por ejemplo:

  • Registro de nuevos usuarios
  • Busqueda de productos en todas las diferentes rutas de la aplicación
  • Carrito de compras
  • Subida de imágenes y edición por medio de un servicio web.
  • Migración hacia react para el frontend y node js para la api

Detalle de aplicación

Cuando se accede a la url del proyecto, se encuentra la página principal con los productos separados por categoría:

Home, no Login

Al dar click sobre ver todos de una categoría, se pueden visualizar todos los productos agrupados por categoría, ver siguiente imágen:

Products by category

Igualmente, al dar click sobre el link ver producto se puede acceder al detalle del mismo de manera independiente.

Products by category

Hasta este punto, si se desea entrar en el panel de administación, se debe hacer inicio de sesión debido a que la ruta es protegida.

Products by category

Utilizar el email: [email protected] y el password: 12345678 para poder acceder al panel de administración

Una vez iniciada la sesión, se muestran los productos del ecommerce y la opcion editar, eliminar y crear nuevos productos.

Products by category Products by category

Así, al ir a inicio, la página ahora de mostrar login, mostrará un enlace para el panel de administración y un enlace para cerrar la sesión, ver imágen:

Products by category

Adicionalmente, se tiene la barra de búsqueda en página principal (solo página principal por el momento) por nombre del producto y al hacer click se navega a la descripción del producto buscado.

Products by category

alura-geek-vanillajs's People

Contributors

eduardoposas avatar

Stargazers

Jose Figueroa avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.