Erstellen einer auf React & GraphQL basierenden E-Commerce-Website mit Pickbazar

Es gibt viele Einkaufsvorlagen, die auf mehreren Marktplätzen verfügbar sind. Aber die Wahl des richtigen ist sehr schwierig. Heute werden wir über eine Einkaufs- oder E-Commerce-Vorlage mit dem Namen „PickBazar“ sprechen, die von RedQ Inc. entwickelt wurde. Es handelt sich um eine neue Vorlage, die auf dem Envato-Marktplatz veröffentlicht wurde.

Was ist React und warum sollten wir es verwenden?

React ist eine komponentenbasierte JavaScript-Bibliothek zur Generierung von Benutzeroberflächen und wird von Facebook eingeführt. Es ermöglicht uns, gekapselte Komponenten zu erstellen, die ihren Zustand verwalten, und sie dann zu komplexen UIs zusammenzusetzen. ReactJS ist eine der weit verbreiteten UI-Bibliotheken, die bei der Erstellung schöner Webanwendungen mit minimalem Aufwand und Codierung hilft.

Was ist GraphQL und warum implementieren wir es?

GraphQL wurde 2012 intern von Facebook entwickelt, bevor es 2015 veröffentlicht wurde. GraphQL ist eine Open-Source-Datenabfrage- und Manipulationssprache für APIs und eine Laufzeitumgebung zum Erfüllen von Abfragen mit vorhandenen Daten. GraphQL unterstützt das Lesen, Schreiben und Abonnieren von Datenänderungen (Echtzeitaktualisierungen – am häufigsten mit WebHooks implementiert). GraphQL-Server sind für mehrere Sprachen verfügbar. Es ermöglicht Clients, die erforderliche Datenstruktur zu definieren, und dieselbe Datenstruktur wird vom Server zurückgegeben, weshalb verhindert wird, dass übermäßig große Datenmengen zurückgegeben werden.

Wer würde von der PickBazar-Vorlage profitieren?

Heutzutage sind die Lebensmittel-, Apotheken-, Elektronik- und Mobiltelefongeschäfte in der Regel über eine Online-Präsenz voll funktionsfähig. Wenn ein Unternehmer ein neues Geschäft über eine Online-Präsenz betreiben möchte, wäre seine erste Anforderung eine gut gestaltete Website, die reibungslos funktioniert. An diesem Punkt ist PickBazar hier, um eine Komplettlösung für einen Ladenbesitzer bereitzustellen, damit er sein Geschäft ohne Hindernisse führen kann. Zunächst muss er diese Vorlage auf dem Envato-Marktplatz kaufen. Wir diskutieren die eigentliche grundlegende Implementierung dieser Vorlage. Beginnen wir also in diesem Artikel damit.

Leistungsbereiche

Lebensmittelgeschäft

Lebensmittel gehören selbstverständlich zum täglichen Bedarf. Kunden, die etwas in Ihrem Online-Lebensmittelgeschäft kaufen, erhalten also ein vollständiges Lagerverwaltungssystem. Ihm sollte ein umfassendes Wissen über das nicht vorrätige oder verfügbare Produkt vermittelt werden. PickBazar ist hier, um das Bestandsverwaltungssystem Ihrer Website zu verwalten.

Apotheke

Apothekenprodukte sind heutzutage in dieser COVID19-Situation natürlich unerlässlich. Ein Apothekenladenbesitzer benötigt definitiv ein Kategorieverwaltungssystem, um verschiedene Arten von Medikamenten, Babyprodukten und Damenartikeln getrennt zu demonstrieren, damit ein potenzieller Kunde sein Produkt schnell finden kann. Wenn Sie PickBazar für Ihre Online-Apotheke verwenden, können Sie dieses Problem beseitigen.

Lebensmittellieferservice

Die Lieferung von Lebensmitteln ist ein profitables Geschäft, wenn Sie es durch eine mutige Online-Präsenz aufrechterhalten könnten. PickBazar ist hier, um Ihnen bei diesem Aspekt zu helfen. PickBazar verfügt über ein hervorragendes Liefermanagementsystem und Auftragsverfolgungsmanagement. So können Sie Ihr Lebensmittelliefergeschäft mit der Implementierung der PickBazar-Vorlage von Grund auf neu führen.

Buchhandlung

Der Buchladen ist ein Ort, an dem Menschen Bücher kaufen, aber sie müssen viel Zeit damit verschwenden, das Buch physisch zu finden, oder es ist schwierig, vor dem Kauf etwas über den Autor eines Buches zu erfahren. Wenn Sie also PickBazar für Ihren Buchladen verwenden, um ihm eine Online-Präsenz zu geben, wird PickBazar Ihnen definitiv dabei helfen, potenzielle Kunden zu gewinnen. Mit der Autorenverwaltung hat jedes Buch die Möglichkeit, die Details über den Autor anzuzeigen, und die Kategorienverwaltung hilft Ihnen, Ihre verfügbaren Bücher nach ihrem Genre zu kategorisieren.

Einige Generalize-Funktionen

Das Kassenverwaltungssystem ist eine Funktion von PickBazar für jede Art von Online-Shop. Mit dieser Funktion können sowohl Kunden als auch Ladenbesitzer eine Geschäftsverbindung aufrechterhalten. Ich meine Lieferadresse, Zahlung und Auftragsverfolgung, all dies ist über das Kassenverwaltungssystem möglich.

PickBazar Dashboard ist eine großartige Funktion, die von der Vorlage angeboten wird. Es ist eine unverzichtbare Funktion für einen Online-Shop-Besitzer. Gesamtumsatz, Gesamtbestellung, Neukunde, Gesamtlieferung, Verkäufe aus sozialen Medien, Verkaufshistorie, Gewinn- und Verlustberechnung, wöchentliche und monatliche Ziele. Alle diese Optionen sind über das PickBazar-Dashboard sichtbar und verwaltbar.

Erstellen Sie Ihre eigene E-Commerce-Website mit der React PickBazar-Vorlage

Schnellste E-Commerce-Vorlage, die mit React, NextJS, TypeScript, GraphQL, Type-GraphQL und Styled-Components erstellt wurde. Es ist mühelos zu verwenden, und Entwickler haben GraphQL und Typ-GraphQL verwendet, Sie können Ihr Schema sehr einfach erstellen. GraphQL Playground erstellt seine eigene Dokumentation, und Ihr Front-End-Team wird es lieben, sie zu verwenden. Das Erstellen eines Online-Shops wäre einfacher als je zuvor.

Wenn Sie diese Vorlage implementieren, können Sie Ihren Umsatz mit Sicherheit steigern. Für einen reibungslosen Betrieb und die Handhabung einer großen Menge an Verkaufsdaten und die Verfolgung von Bestellungen wäre „PickBazar“ die wichtigste Wahl.

Demo ansehen

Warum React PickBazar Shopping-Vorlage verwenden?

Entwickelt mit Bleeding Edge Technology für das hochgradig skalierbare Projekt.

Schaufenster

• Als nächstes kommen JS, React Apollo und GraphQL zum Einsatz.
• Alle Komponenten sind in TypeScript geschrieben.
• Monorepo wird von der Lerna-Konfiguration unterstützt.
• SSR-Unterstützung zum Erstellen hochskalierbarer Apps.

Shop-Dashboard

• Zum Einsatz kommen Create React App (CRA), React Apollo und GraphQL.
• Komponenten werden in TypeScript und Base Web React UI Framework geschrieben.
• Erstellen Sie Produkte ganz einfach im Backend.
• React Hooks Form für die Formularbearbeitung.

Erstellen Sie Ihre nächste E-Commerce-App mit Pickbazar.

Erstellen Sie mit dem universellen servergerenderten Next.js-Framework ein ansprechendes Handelserlebnis. Es ist sehr einfach zu bedienen, RedQ Inc. verwendet GraphQL und Typ-GraphQL.

Einfache Zahlungsintegration mit Stripe!

Stripe ist die beste Softwareplattform für die Führung eines Internetgeschäfts. Stripe entwickelt die leistungsstärksten und flexibelsten Tools für den Internethandel. RedQ Inc. integriert Stripe in seine PickBazar-Vorlage.

Funktionen der PickBazar-Vorlage reagieren

Bleeding-Edge-Technologie

Als nächstes werden JS, React Apollo und GraphQL verwendet, um ein superschnelles E-Commerce-Projekt aufzubauen.

Apollo reagieren

Mit React Apollo können Sie Daten von Ihrem GraphQL-Server abrufen und zum Erstellen komplexer und reaktiver Benutzeroberflächen verwenden.

Schnelle Leistung

Optimiert für kleinere Build-Größe, schnellere Dev-Kompilierung und Dutzende anderer Verbesserungen.

Eingebaute Komponenten

Komponenten werden in TypeScript und Base Web React UI Framework geschrieben. Komponenten sind leicht verständlich.

Bereit für den Einsatz

Der Entwickler RedQ Inc. hat den Bereitstellungsprozess sauber und einfach gestaltet. Sie können die Vorlage mit Now.sh bereitstellen.

Elite-Autorenunterstützung

RedQ Inc. kann Ihnen den richtigen Elite-Autoren-Support und eine schnellere Reaktion auf seine Produkte versichern.

Erste Schritte & Installation

Um mit der Vorlage zu beginnen, müssen Sie das folgende Verfahren befolgen. Navigieren Sie zuerst zum PickBazar

Verzeichnis. Führen Sie dann den folgenden Befehl aus, um mit einem bestimmten Teil zu beginnen.

// auf Pickbazar-Verzeichnisgarn

Administrator

Um den Admin-Dashboard-Teil mit den entsprechenden API-Daten zu starten, führen Sie die folgenden Befehle aus.

// Für den Entwicklermodus führen Sie den folgenden Befehl aus: dev:admin

// Führen Sie für den Produktionsmodus den folgenden Befehl aus Garn erstellen: admin

Geschäft

Konfigurieren Sie den Stripe-API-Schlüssel in /packages/shop/next.config.js. Setzen Sie im Abschnitt env STRIPE_PUBLIC_KEY auf Ihren öffentlichen Stripe-Schlüssel.

Um den Shop-Teil mit der entsprechenden API zu starten, führen Sie die folgenden Befehle aus.

// Für den Entwicklermodus führen Sie den folgenden Befehl aus Garn dev:shop

// Für den Produktionsmodus führen Sie den folgenden Befehl aus Garn build:shop

Wenn Sie Ihren Produktions-Build-Administrator oder -Shop in der lokalen Umgebung testen möchten, führen Sie die folgenden Befehle aus.

Administrator

// build admin für Produktionsgarn build: admin

// Ausführen der Shop-API, die zum lokalen Testen von Garn benötigt wird dev:API-admin

// Admin im Produktionsgarn starten serve:admin

Geschäft

// Shop für Produktionsgarn bauen build:shop

// Ausführen der Shop-API, die zum lokalen Testen von Garn benötigt wird dev:api-shop

// Shop in der Garnproduktion starten serve:shop

Ordnerstruktur & Anpassung

/packages/admin: In diesem Abschnitt sind alle Codierungen und Funktionen im Zusammenhang mit dem Admin-Dashboard enthalten.

/packages/shop: Alle Shop-bezogenen Codierungen und Funktionen.

/packages/api : API-bezogener Code für den Admin- und den Shop-Bereich.

Admin-bezogene API-Codes befinden sich im Admin-Ordner.

Shop-bezogene Codes befinden sich im Shop-Ordner.

Konfiguration und Bereitstellung

jetzt.sh

Wenn Sie die Vorlage in now.sh hosten möchten, folgen Sie dem folgenden Befehl.

API

• Navigieren Sie zu Paketen/API
• Führen Sie nun den folgenden Befehl aus

jetzt

Administrator

• Nach der Bereitstellung der API erhalten Sie die API-Endpunkt-URL. Fügen Sie diese URL in die Pakete/admin/.env ein

REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;

• Navigieren Sie zu Pakete/Admin
• Führen Sie nun den folgenden Befehl aus

jetzt

Geschäft

• Nach der Bereitstellung der API erhalten Sie die API-Endpunkt-URL. Geben Sie diese URL in die

  Pakete/shop/next.config.js

env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

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

• Navigieren Sie zu Pakete/Shop

• Führen Sie nun den folgenden Befehl aus

jetzt

Fazit

Nun sind wir am Schlusspunkt dieses Artikels angelangt. Wir hoffen, Sie haben eine Vorstellung von der E-Commerce-Einkaufsvorlage PickBazar React GraphQL. Sie können diese Einkaufsvorlage bedenkenlos für Ihren E-Commerce-Shop verwenden. Vielen Dank für das Lesen dieses Artikels. Wenn Ihnen dieser Artikel wirklich gefällt, dann hinterlassen Sie bitte einen Kommentar im Kommentarbereich oder geben Sie uns eine gute Bewertung. Das ist alles für heute. Haben Sie einen schönen Tag!

Vorlage kaufen

Lesen Sie mehr: Die 10 besten React Redux Admin Dashboards 2020