Nekzus Game Store

E-Commerce Productos Gamer

Sobre mi 👀

Estudiante de las nuevas tecnologías en CoderHouse, me encuentro cursando la carrera de Desarrollador Full Stack. Siempre me gusto la programación, con origen en la rama de la electrónica, decidí convertir el hobby en profesión.

Descripción del proyecto 🚀

Este trabajo surge como proyecto final del curso de Desarrollo Web. Se basa en un sitio de e-commerce para venta de productos gamer, con la finalidad de que los usuarios puedan adquirirlos en cualquier momento y lugar. A futuro este proyecto migrará con la aplicación del lenguaje de javascript a un entorno ReactJs o NextJs.

Diseño del sitio 💡

El sitio web además de ser 100% responsive, reconoce la preferencia de usuario en el navegador o sistema operativo, y aplica el modo light o dark.

Modo dark desktop

Modo light desktop

Modo dark/light movil

Código 💡

Para la transpilación del código CSS, se utilizó el lenguaje SASS con la aplicación de la metodología BEM. Con el uso de esta metodología, se logró una mejor organización y modularización del código. Para poder trabajar con el modo dark, recurrí a la interpolación de las variables de estilo de SASS a variables de CSS, para mantenerlas durante la transpilacion del código.

Despliegue 💡

El sitio fue hosteado en Firebase, con un dominio propio ".com.ar" adquirido en Nic.ar. Los DNS se encuentran delegados al CDN Cloudflare.

Dominio del sitio web:

  https://www.nekzusgamestore.com.ar

SEO 💡

El sitio web fue optimizado para que funcionara en los principios de SEO, se agregaron meta description y meta keywords.
Se incursiono en la optimización de las imágenes, migrando del formato WEBP al formato AVIF (todavia no compatible con navegador Edge). Se logro una mayor resolución con menos peso y tiempos de carga.
Se implemento la página de error 404, para que el usuario pueda ver una página de error cuando la página no existe.
Se generó el sitemap.xml para que el usuario pueda encontrar el sitio web. Mediante Google Console Search, se indexo el sitio web en el buscador de google.

Indexación en google

Métricas de SEO y optimización del sitio web (Lighthouse):

Versión desktop

Versión móvil

Estado del proyecto 📋

✅ Completo - Finalizado.

Tecnología aplicada 🛠️

HTML5
CSS3
Bootstrap (v5.1.3)
Firebase-tools (v9.6.1)
Git (v2.25.1)
Node.js (v17.6.0)
Node Sass (v7.0.1)
Nodemon (v2.0.15)

Para trabajar sobre sitio web 🛠️

Clonar el repositorio en github
Inicializar el proyecto con npm:

  npm install

Para transpilar código scss a css ejecutar en consola el siguiente comando:

  npm run watch-css

Vista del proyecto finalizado 📦

Pueden ver la web desplegada funcionando en https://www.nekzusgamestore.com.ar/

Autoría ✒️

Mauricio Ortega - Desarrollo.

Nekzus / DW-Dart-Sass