next e commerce

Sitio web de comercio electrónico

Demostración: https://next-e-commerce-example.vercel.app/

Un ejemplo de sitio web de comercio electrónico creado con Next.js que hice en 1 semana como un desafío propio. Hay algunos problemas que manejaré más tarde. Usar Firebase como backend.

Contáctame · Informe de error · Función de solicitud

Tabla de contenido

• Sobre el proyecto
  • Construido con
• Capturas de pantalla
  • Inicio (noticias en)
  • Categorías
  • Producto
  • Carro
  • Cuenta
• Empezando
  • Requisitos previos
  • Instalación
• Problemas / planes de características
• Que contribuye
• Preguntas y respuestas
• Licencia
• Contacto

Sobre el proyecto

Vi un diseño de UI en Dribbble de Anton Mikhaltsov. Y quería codificar este diseño. Así que decidí convertirlo en un sitio web de trabajo completo con NextJS, pero en solo 1 semana como desafío yo mismo. Algunos problemas todavía están ahí, pero los revisaré más tarde.

• Los botones de filtro y clasificación aún no funcionan.
• El sitio web no responde %100 debido al tiempo no fue suficiente. Estoy trabajando en ello actualmente. Ahora, es receptivo.
• Las funciones de Firebase podrían ser mejores
• La página de inicio (noticias en) las tarjetas no tienen redireccionamientos. Son solo marcadores de posición.

Construido con

• Reaccionar
• Nextjs
• Firebase
• Forma de gancho reaccionar
• fechor
• Hablar con descaro a

Capturas de pantalla

Tener noticias

• Las tarjetas no tienen enlaces y son estáticos, son solo marcadores de posición.

Categorías

Producto

Carro

Cuenta

Empezando

Requisitos previos

• Node.js versión 10.13 o posterior
• Git (usé 2.20.1)

Instalación

1. Necesitas crear un proyecto Firebase

2. Clonar el repositorio y cambiar el directorio

git clone https://github.com/anilsenay/next-e-commerce.git
cd next-e-commerce

3. Instalar paquetes NPM

npm install

4. Cree su archivo .env.local en la carpeta root (Next-E-Commerce) con este contenido. Pon tus llaves de Firebase.

 NEXT_PUBLIC_FIREBASE_API_KEY = your-firebase-api-key
NEXT_PUBLIC_FIREBASE_PROJECT_ID = your-firebase-project-id
NEXT_PUBLIC_FIREBASE_APP_ID = your-firebase-app-id

5. Ejecutar en modo de desarrollo

npm run dev

Problemas - Planes futuros

• Filtrar y clasificar botones
• Optimizar las funciones de consultas de Firestore
• En la página del carrito, el botón de disminución del elemento no funciona
• El sitio web será %100 receptivo
• Reemplace algunas etiquetas HTML con etiquetas semánticas

Que contribuye

Las contribuciones son las que hacen que la comunidad de código abierto sea un lugar tan increíble para aprender, inspirar y crear. Cualquier contribución que haga es muy apreciada .

1. Bifurca el proyecto
2. Cree su rama de características ( git checkout -b feature/AmazingFeature )
3. Comprometer sus cambios ( git commit -m 'Add some AmazingFeature' )
4. Push to the Branch ( git push origin feature/AmazingFeature )
5. Abra una solicitud de extracción

Preguntas y respuestas

• Pregunta: Creé el Proyecto Firebase pero no lo estoy familiarizado con él. ¿Qué debo hacer entonces? Respuesta : Puede contactarme sobre cómo establecer su proyecto Firebase, con mucho gusto le ayudaría.

• Pregunta: Creé el proyecto Firebase pero no tengo estructura de base de datos. ¿Qué debo hacer entonces? Respuesta : Póngase en contacto conmigo para obtener la estructura de la base de datos que creé.

• Pregunta: ¿Por qué no compartió la estructura de su base de datos? Respuesta : Solo quiero saber si alguien está interesado en este proyecto: D

• Pregunta: ¿Cómo puedo contribuir? Respuesta : Me hace feliz incluso si solo protagoniza este proyecto. Para el código que contribuye, puede desembolsar el repositorio y abrir una solicitud de extracción después de sus cambios. Cualquier comentario también es importante para mí. Puede abrir el problema o enviarme un mensaje.

• Pregunta: ¿Diseñó la interfaz de usuario? Respuesta : No, en realidad no diseñé. Encontré el diseño de la página de inicio en Dribbble de Anton Mikhaltsov. Excepto la página de inicio, otras opciones de interfaz de usuario son mías. Si bien hice este sitio web en tiempo limitado, no pensé mucho en UI/UX. Así que también puedes recibir una opinión sobre el diseño.

Licencia

Distribuido bajo la licencia GPL. Vea LICENSE para más información.

Contacto

@anilsenay

Enlace del proyecto: https://github.com/anilsenay/next-ecommerce