Créer un site Web de commerce électronique basé sur React et GraphQL à l'aide de Pickbazar

Il existe de nombreux modèles d'achat disponibles sur plusieurs marchés. Mais choisir le bon est très difficile. Aujourd'hui, nous allons parler d'un modèle d'achat ou de commerce électronique nommé "PickBazar" développé par RedQ Inc. Il s'agit d'un nouveau modèle publié sur le marché Envato.

Qu'est-ce que React et pourquoi devrions-nous l'utiliser ?

React est une bibliothèque JavaScript basée sur des composants pour générer des interfaces utilisateur et elle est introduite par Facebook. Cela nous permet de créer des composants encapsulés qui gèrent leur état, puis de les composer pour créer des interfaces utilisateur complexes. ReactJS est l'une des bibliothèques d'interface utilisateur les plus utilisées qui aide à la création de belles applications Web nécessitant un minimum d'effort et de codage.

Qu'est-ce que GraphQL et pourquoi l'implémentons-nous ?

GraphQL a été développé en 2012, en interne par Facebook avant d'être rendu public en 2015. GraphQL est un langage de requête et de manipulation de données open source pour les API, et un runtime pour répondre aux requêtes avec des données existantes. GraphQL prend en charge la lecture, l'écriture et l'abonnement aux modifications apportées aux données (mises à jour en temps réel - le plus souvent implémentées à l'aide de WebHooks). Les serveurs GraphQL sont disponibles pour plusieurs langues. Il permet aux clients de définir la structure de données requise, et la même structure de données est renvoyée par le serveur, ce qui empêche le renvoi de quantités excessives de données.

Qui serait bénéficiaire du modèle PickBazar ?

De nos jours, les entreprises d'épicerie, de pharmacie, d'électronique et de téléphones portables ont tendance à être pleinement opérationnelles grâce à une présence en ligne. Si un entrepreneur souhaite exploiter une nouvelle entreprise via une présence en ligne, sa première exigence serait un site bien conçu pour fonctionner correctement. À ce stade, PickBazar est là pour fournir une solution complète permettant à un propriétaire de magasin de gérer son entreprise sans aucun obstacle. Au début, il doit acheter ce modèle sur le marché Envato. Nous discutons de la mise en œuvre de base réelle de ce modèle. Alors commençons dans cet article.

Domaines d'avantages

Épicerie

Les produits d'épicerie font naturellement partie des besoins quotidiens. Ainsi, les clients qui viennent acheter n'importe quoi dans votre épicerie en ligne se verront proposer un système complet de gestion des stocks. Une connaissance approfondie doit lui être fournie sur le produit en rupture de stock ou disponible. PickBazar est là pour maintenir le système de gestion des stocks de votre site.

Pharmacie

Les produits de pharmacie sont naturellement indispensables de nos jours, dans cette situation de COVID19. Un propriétaire de pharmacie aura certainement besoin d'un système de gestion des catégories pour présenter séparément différents types de médicaments, de produits pour bébés et d'articles essentiels pour femmes, afin qu'un client potentiel puisse trouver son produit rapidement. Si vous utilisez PickBazar pour votre magasin de pharmacie en ligne, vous pouvez éliminer ce problème.

Livraison de nourriture

La livraison de nourriture est une activité rentable si vous pouviez la maintenir grâce à une présence en ligne audacieuse ; PickBazar est là pour vous aider avec cet aspect. PickBazar dispose d'un excellent système de gestion des livraisons et de gestion du suivi des commandes. Ainsi, vous pouvez gérer votre entreprise de livraison de nourriture à partir de zéro avec la mise en œuvre du modèle PickBazar.

Librairie

La librairie est un endroit où les gens vont acheter des livres, mais ils doivent perdre beaucoup de temps à trouver le livre physiquement, ou il est difficile de se renseigner sur l'auteur d'un livre avant de l'acheter. Donc, si vous utilisez PickBazar pour votre librairie pour lui donner une présence en ligne, PickBazar vous aidera certainement à attirer les clients potentiels. Avec la gestion des auteurs, chaque livre a une chance d'afficher les détails sur l'auteur et la gestion des catégories vous aidera à classer vos livres disponibles en fonction de leur genre.

Certaines fonctionnalités de généralisation

Le système de gestion des paiements est une fonctionnalité de PickBazar pour tout type de boutique en ligne. Grâce à cette fonctionnalité, les clients et les propriétaires de magasins peuvent maintenir une connexion commerciale. Je veux dire l'adresse de livraison, le paiement et le suivi des commandes, tout cela est possible via le système de gestion de la caisse.

Le tableau de bord PickBazar est une fonctionnalité intéressante offerte par le modèle. C'est une fonctionnalité indispensable pour un propriétaire de boutique en ligne. Revenu total, commande totale, nouveau client, livraison totale, ventes sur les réseaux sociaux, historique des ventes, calcul des profits et pertes, objectifs hebdomadaires et mensuels, toutes ces options sont visibles et gérables via le tableau de bord PickBazar.

Créez votre propre site Web de commerce électronique avec le modèle React PickBazar

Modèle de commerce électronique le plus rapide construit avec React, NextJS, TypeScript, GraphQL, Type-GraphQL et Styled-Components. Il est facile à utiliser et les développeurs ont utilisé GraphQL et type-GraphQL, vous pouvez créer votre schéma très facilement. GraphQL Playground crée sa propre documentation et votre équipe frontale adorera l'utiliser. Créer une boutique en ligne serait plus facile que jamais.

Si vous implémentez ce modèle, vous pouvez certainement augmenter vos ventes. Pour un fonctionnement fluide et la gestion d'un grand volume de données de vente et de suivi des commandes, "PickBazar" serait le choix le plus important.

Voir la démo

Pourquoi utiliser le modèle d'achat React PickBazar ?

Développé avec la technologie Bleeding Edge pour le projet hautement évolutif.

Vitrine

• Ensuite, JS, React Apollo et GraphQL sont utilisés.
• Tous les composants sont écrits en TypeScript.
• Monorepo pris en charge avec la configuration Lerna.
• Prise en charge SSR pour la création d'applications hautement évolutives.

Tableau de bord de la boutique

• Create React App (CRA), React Apollo et GraphQL sont utilisés.
• Les composants sont écrits dans TypeScript et Base Web React UI Framework.
• Créez facilement des produits dans le backend.
• React Hooks Form pour la gestion des formulaires.

Créez votre prochaine application de commerce électronique avec Pickbazar.

Créez une belle expérience de commerce à l'aide du framework Next.js universel rendu par le serveur. C'est très facile à utiliser, RedQ Inc. a utilisé GraphQL et type-GraphQL.

Intégration facile des paiements avec Stripe !

Stripe est la meilleure plate-forme logicielle pour gérer une entreprise Internet. Stripe construit les outils les plus puissants et les plus flexibles pour le commerce sur Internet. RedQ Inc. intègre Stripe à son modèle PickBazar.

Fonctionnalités du modèle React PickBazar

Technologie de pointe

Ensuite, JS, React Apollo et GraphQL sont utilisés pour construire un projet de commerce électronique ultra-rapide.

Réagir Apollon

React Apollo vous permet d'extraire des données de votre serveur GraphQL et de les utiliser pour créer des interfaces utilisateur complexes et réactives.

Performances rapides

Optimisé pour une taille de construction plus petite, une compilation de développement plus rapide et des dizaines d'autres améliorations.

Composants intégrés

Les composants sont écrits dans TypeScript et Base Web React UI Framework. Les composants sont faciles à comprendre.

Prêt pour le déploiement

Le développeur RedQ Inc. a rendu le processus de déploiement propre et simple. Vous pouvez déployer le modèle avec Now.sh.

Assistance aux auteurs d'élite

RedQ Inc. peut vous assurer le support approprié d'Elite Author et une réponse plus rapide pour leurs produits.

Mise en route et installation

Pour commencer avec le modèle, vous devez suivre la procédure ci-dessous. Tout d'abord, accédez au PickBazar

annuaire. Exécutez ensuite la commande ci-dessous pour démarrer avec une pièce spécifique.

// sur le répertoire pickbazar

Administrateur

Pour démarrer la partie du tableau de bord d'administration avec les données d'API correspondantes, exécutez les commandes ci-dessous.

// pour le mode dev exécuter sous la commande yarn dev:admin

// pour le mode de production, exécuter sous la commande yarn build : admin

Boutique

Configurez la clé API Stripe dans /packages/shop/next.config.js. Dans la section env, définissez STRIPE_PUBLIC_KEY sur votre clé publique Stripe.

Pour démarrer la partie boutique avec l'API correspondante, exécutez les commandes ci-dessous.

// pour le mode de développement, exécutez la commande ci-dessous yarn dev:shop

// pour le mode de production, exécuter sous la commande yarn build:shop

Si vous souhaitez tester votre administrateur de build de production ou votre boutique dans l'environnement local, exécutez les commandes ci-dessous.

Administrateur

// build admin pour la construction du fil de production : admin

// exécute l'API de la boutique qui est nécessaire pour les tests locaux de fil dev: API-admin

// démarre l'administrateur dans le fil de production serve:admin

Boutique

// construire un magasin pour le fil de production build:shop

// exécute l'API de la boutique qui est nécessaire pour tester localement le fil dev:api-shop

// démarrer la boutique en fil de production serve:shop

Structure et personnalisation des dossiers

/packages/admin : dans cette partie, tous les codes et fonctions liés au tableau de bord de l'administrateur.

/packages/shop : Tous les codages et fonctions liés à la boutique.

/packages/api : code lié à l'API pour les sections admin et boutique.

Les codes API liés à l'administration se trouvent dans le dossier admin.

les codes liés à la boutique se trouvent dans le dossier de la boutique.

Configuration et déploiement

maintenant.sh

Si vous souhaitez héberger le modèle dans now.sh, suivez la commande ci-dessous.

API

• Accédez aux packages/API
• Exécutez maintenant la commande ci-dessous

à présent

Administrateur

• Après avoir déployé l'API, vous obtiendrez l'URL du point de terminaison de l'API. Mettez cette URL dans packages/admin/.env

REACT_APP_API_URL={put_your_api_url_here}/admin/graphql ;

• Accédez à packages/admin
• Exécutez maintenant la commande ci-dessous

à présent

Boutique

• Après avoir déployé l'API, vous obtiendrez l'URL du point de terminaison de l'API. Mettez cette URL dans le

  packages/shop/next.config.js

env : { STRIPE_PUBLIC_KEY : 'put_your_stripe_public_key',

API_URL : '{put_your_api_url_here.}/shop/graphql', },

• Accédez aux forfaits/boutique

• Exécutez maintenant la commande ci-dessous

à présent

Conclusion

Nous sommes maintenant arrivés au point final de cet article. Nous espérons que vous avez une idée du modèle d'achat de commerce électronique PickBazar React GraphQL. Sans aucune hésitation, vous pouvez utiliser ce modèle d'achat pour votre boutique de commerce électronique. Merci beaucoup d'avoir lu cet article. Si vous aimez vraiment cet article, veuillez laisser un commentaire dans la section des commentaires ou donnez-nous une bonne note. C'est tout pour aujourd'hui. Passe une bonne journée!

Acheter un modèle

Lire la suite: 10 meilleurs tableaux de bord d'administration React Redux 2020