Creación de un sitio web de comercio electrónico basado en React y GraphQL con Pickbazar

Hay muchas plantillas de compras disponibles en varios mercados. Pero elegir el adecuado es muy difícil. Hoy hablaremos sobre una plantilla de compras o comercio electrónico llamada "PickBazar" desarrollada por RedQ Inc. Es una nueva plantilla publicada en el mercado de Envato.

¿Qué es React y por qué deberíamos usarlo?

React es una biblioteca de JavaScript basada en componentes para generar interfaces de usuario y es presentada por Facebook. Nos permite crear componentes encapsulados que administran su estado y luego los componen para crear interfaces de usuario complejas. ReactJS es una de las bibliotecas de interfaz de usuario ampliamente utilizadas que ayuda con la creación de hermosas aplicaciones web que requieren un mínimo esfuerzo y codificación.

¿Qué es GraphQL y por qué lo implementamos?

GraphQL fue desarrollado en 2012 internamente por Facebook antes de ser lanzado públicamente en 2015. GraphQL es un lenguaje de consulta y manipulación de datos de código abierto para API y un tiempo de ejecución para completar consultas con datos existentes. GraphQL admite la lectura, la escritura y la suscripción a cambios en los datos (actualizaciones en tiempo real, implementadas más comúnmente mediante WebHooks). Los servidores GraphQL están disponibles para varios idiomas. Permite a los clientes definir la estructura de datos requerida, y la misma estructura de datos se devuelve desde el servidor, por lo que evita que se devuelvan cantidades excesivamente grandes de datos.

¿Quién se beneficiaría de la plantilla de PickBazar?

Hoy en día, los negocios de abarrotes, farmacias, electrónica, teléfonos celulares tienden a ser completamente operativos a través de una presencia en línea. Si un emprendedor quiere operar un nuevo negocio a través de la presencia en línea, su primer requisito sería un sitio bien diseñado para funcionar sin problemas. En este punto, PickBazar está aquí para brindar una solución completa para que el propietario de una tienda administre su negocio sin ningún obstáculo. Al principio, tiene que comprar esta plantilla en el mercado de Envato. Estamos discutiendo la implementación básica real de esta plantilla. Así que comencemos en este artículo.

Campos de Beneficios

Tienda de comestibles

Los artículos de abarrotes caen naturalmente en las necesidades diarias. Por lo tanto, los clientes que vengan a comprar cualquier cosa de su tienda de comestibles en línea contarán con un completo sistema de gestión de existencias. Se le debe proporcionar un conocimiento completo sobre el producto agotado o disponible. PickBazar está aquí para mantener el sistema de gestión de existencias de su sitio.

Farmacia

Los productos de farmacia son naturalmente esenciales hoy en día, en esta situación de COVID19. El propietario de una tienda de farmacia definitivamente necesitará un sistema de gestión de categorías para demostrar diferentes tipos de medicamentos, productos para bebés y artículos esenciales para mujeres por separado, de modo que un cliente potencial pueda encontrar su producto rápidamente. Si utiliza PickBazar para su tienda de farmacia en línea, puede erradicar este problema.

Entrega de comida

La entrega de alimentos es un negocio rentable si puede mantenerlo a través de una presencia en línea audaz; PickBazar está aquí para ayudarte con este aspecto. PickBazar tiene un excelente sistema de gestión de entregas y gestión de seguimiento de pedidos. Para que pueda administrar su negocio de entrega de alimentos desde cero con la implementación de la plantilla de PickBazar.

Librería

La librería es un lugar donde la gente va a comprar libros, pero tiene que perder mucho tiempo para encontrar el libro físicamente, o es difícil aprender sobre el autor de cualquier libro antes de comprarlo. Entonces, si utiliza PickBazar para su librería para darle una presencia en línea, PickBazar definitivamente lo ayudará a captar clientes potenciales. Con la administración de autores, cada libro tiene la oportunidad de exhibir los detalles sobre el autor, además la administración de categorías lo ayudará a clasificar sus libros disponibles según su género.

Algunas características de Generalize

El sistema de gestión de pago es una característica de PickBazar para cualquier tipo de tienda en línea. Con esta función, tanto los clientes como los propietarios de las tiendas pueden mantener una conexión comercial. Me refiero a la dirección de entrega, el pago y el seguimiento del pedido, todo esto es posible a través del sistema de gestión de pago.

PickBazar Dashboard es una gran característica que ofrece la plantilla. Es una característica imprescindible para el propietario de una tienda en línea. Ingresos totales, pedido total, nuevo cliente, entrega total, ventas de redes sociales, historial de ventas, cálculo de pérdidas y ganancias, objetivos semanales y mensuales, todas estas opciones son visibles y manejables a través del panel de control de PickBazar.

Cree su propio sitio web de comercio electrónico con la plantilla React PickBazar

La plantilla de comercio electrónico más rápida creada con React, NextJS, TypeScript, GraphQL, Type-GraphQL y Styled-Components. Es fácil de usar, y los desarrolladores usaron GraphQL y type-GraphQL, puede construir su esquema muy fácilmente. GraphQL Playground crea su propia documentación y a su equipo de front-end le encantará usarla. Crear una tienda online sería más fácil que nunca.

Si implementa esta plantilla, seguramente puede aumentar sus ventas. Para un funcionamiento fluido y el manejo de un gran volumen de datos de venta y seguimiento de pedidos, "PickBazar" sería la opción más importante.

Ver demostración

¿Por qué usar la plantilla de compras React PickBazar?

Desarrollado con Bleeding Edge Technology para el proyecto altamente escalable.

Frente de la tienda

• A continuación se utilizan JS, React Apollo y GraphQL.
• Todos los componentes están escritos en TypeScript.
• Monorepo compatible con la configuración de Lerna.
• Compatibilidad con SSR para crear aplicaciones altamente escalables.

Tablero de la tienda

• Se utilizan Create React App (CRA), React Apollo y GraphQL.
• Los componentes están escritos en TypeScript y Base Web React UI Framework.
• Cree fácilmente productos en el backend.
• React Hooks Form para el manejo de formularios.

Cree su próxima aplicación de comercio electrónico con Pickbazar.

Cree una hermosa experiencia de comercio utilizando el marco de Next.js renderizado por servidor universal. Es muy fácil de usar, RedQ Inc. usó GraphQL y type-GraphQL.

¡Fácil integración de pagos con Stripe!

Stripe es la mejor plataforma de software para administrar un negocio en Internet. Stripe crea las herramientas más potentes y flexibles para el comercio por Internet. RedQ Inc. integra Stripe con su plantilla PickBazar.

Características de la plantilla React PickBazar

Tecnología de vanguardia

Next JS, React Apollo y GraphQL se utilizan para construir un proyecto de comercio electrónico súper rápido.

reaccionar apolo

React Apollo le permite obtener datos de su servidor GraphQL y usarlos para crear interfaces de usuario complejas y reactivas.

Rendimiento rápido

Optimizado para un tamaño de compilación más pequeño, compilación de desarrollo más rápida y docenas de otras mejoras.

Componentes incorporados

Los componentes están escritos en TypeScript y Base Web React UI Framework. Los componentes son fáciles de entender.

Listo para la implementación

El desarrollador RedQ Inc. ha hecho que el proceso de implementación sea limpio y simple. Puede implementar la plantilla con Now.sh.

Soporte de autor de élite

RedQ Inc. puede asegurarle el soporte Elite Author adecuado y una respuesta más rápida para sus productos.

Primeros pasos e instalación

Para comenzar con la plantilla, debe seguir el siguiente procedimiento. Primero, navegue hasta PickBazar

directorio. Luego ejecute el siguiente comando para comenzar con una parte específica.

// en el hilo del directorio pickbazar

Administración

Para iniciar la parte del panel de administración con los datos de API correspondientes, ejecute los siguientes comandos.

// para el modo de desarrollo, ejecuta debajo del comando yarn dev:admin

// para el modo de producción, ejecute debajo del comando yarn build: admin

Comercio

Configure la clave API de Stripe en /packages/shop/next.config.js. En la sección env, establezca STRIPE_PUBLIC_KEY en su clave pública de franja.

Para iniciar la parte de la tienda con la API correspondiente, ejecute los siguientes comandos.

// para el modo de desarrollo, ejecuta debajo del comando yarn dev:shop

// para el modo de producción, ejecuta debajo del comando yarn build:shop

Si desea probar su administrador de compilación de producción o comprar en el entorno local, ejecute los siguientes comandos.

Administración

// construye el administrador para la producción de hilo build: admin

// ejecuta la API de la tienda que se necesita para las pruebas locales de desarrollo de hilados: API-admin

// iniciar admin en producción yarn serve:admin

Comercio

// construye la tienda para la producción de hilos build:shop

// ejecuta la API de la tienda que se necesita para las pruebas locales de desarrollo de hilados: api-shop

// inicia la tienda en producción yarn serve:shop

Estructura de carpetas y personalización

/packages/admin: en esta parte, toda la codificación y las funciones relacionadas con el panel de administración.

/packages/shop: Toda la codificación y funciones relacionadas con la tienda.

/packages/api : código relacionado con la API para la sección de administración y tienda.

Los códigos API relacionados con el administrador están en la carpeta de administración.

los códigos relacionados con la tienda están en la carpeta de la tienda.

Configuración e implementación

ahora.sh

Si desea alojar la plantilla en now.sh, siga el siguiente comando.

API

• Navegar a paquetes/API
• Ahora ejecute debajo del comando

ahora

Administración

• Después de implementar la API, obtendrá la URL del punto final de la API. Pon esa URL en los paquetes/admin/.env

REACT_APP_API_URL={poner_su_api_url_aquí}/admin/graphql;

• Navegar a paquetes/admin
• Ahora ejecute debajo del comando

ahora

Comercio

• Después de implementar la API, obtendrá la URL del punto final de la API. Pon esa URL en el

  paquetes/tienda/next.config.js

env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

API_URL: '{ponga_su_api_url_aquí.}/tienda/graphql', },

• Navegar a paquetes/tienda

• Ahora ejecute debajo del comando

ahora

Conclusión

Ahora hemos llegado al punto final de este artículo. Esperamos que tenga una idea sobre la plantilla de compras de comercio electrónico PickBazar react GraphQL. Sin dudarlo, puede usar esta plantilla de compras para su tienda de comercio electrónico. Muchas gracias por leer este artículo. Si realmente le gusta este artículo, deje un comentario en la sección de comentarios o dénos una buena calificación. Eso es todo por hoy. ¡Que tengas un hermoso día!

Comprar plantilla

Leer más: 10 mejores paneles de administración de React Redux 2020