Multikart React Theme

Welcome to Multikart React!

We are pleased that you have chosen MULTIKART React theme for your site and we will not disappoint you with your choice. MultiKart is an excellent theme develop with a concise approach. The code written is a clean and well structured.

MultiKart is the most powerful & responsive theme with all the modules and functions involved with an attractive design.

MultiKart theme template is build focusing on HTML and CSS3 and works perfectly fine in all the browsers.

Multikart theme include 16 inner pages, 10 product pages, and 3 shop pages.

We request to have a look at our MultiKart manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the manual before jumping to start!

Theme Features

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 4 folders.

  1. Documentation - Documentation for Multikart React site template
  2. Frontend - Multikart Next Frontend Template with All demo
  3. API - Dummy backend for getting fast data in frontend
  4. Backend - Multikart React Backend Admin panel template
  5. Email-template - Different Email templates in html

Next Folder Structure

  • components //All component of theme you can find from here
    • common //All common component of theme you can find from here
    • constant // Constant file for Language changer you can find from here
    • containers //Cart container
    • customizer //Customizer UI and their related config
    • footers
    • headers
    • shop // Common layout for other page will call from here
  • config
    • index.jsonAdd your firebase credential here
  • helpers //Controller part of theme will call from here
    • apollo
    • cart
    • Compare
    • Currency
    • filter
    • menu
    • theme-setting
    • wishlist
  • pages //Your complete theme page will call from here
    • api
    • blogs
    • layouts
      • All demos you can find from here
    • page
    • portfolio
    • product-details
    • shop
  • public
    • assets
      • fonts
      • images
      • scss
      • video
      • favicon.ico
  • service
    • index.js
    • script.js

Start Building

Prerequisite
Install Node.js and NPM : Download Node.js from https://nodejs.org/en/download/ and install it on your system. NPM comes bundled with Node.js
Theme

When you extract file from download you will find following folder:

  • Theme
  • Graphql
  • Backend
  • EmailTemplate
  • Documentation
For Start working with runnning your frontend you need to follow below step:
  • Extract API folder as well as Theme folder
  • Then run Api project first by doing:
    • npm i
    • npm start

      • now your Api port is running fine. You can check it out in url which provided in terminal

    Note: For getting data in frontend (in your all demos) you must need to run this api first.
  • Now it's a time to run your frontend to see theme from which your dreams comes true

SCSS

Unlimited Color

    • Yes, You read correct!! we are here with unlimited color option. To change the color of complete theme you need do following:
    Go to app.scss in /public/assets/scss/app.scss and change your default color to whatever you want to --theme-default that's it you can have a theme with a color of your choise.

    • :root {
        --theme-deafult: #e6e224;
    }

    Customizer

    You can customise your theme using customiser

    To change the LTR mode to RTL or Change color from any unlimited color then you can just select the option from customiser as attached in below screenshot

    Now to change in your project you just need to copy that config from attached image and paste in config.json in /components/customizer/config.json

    Theme

    Now Multikart having multiple demo you can have more benefit with that as you can take a design of productbox, cart, as well as header and footer

    Product box

    Add to Cart

    Header and Footer

    Removal of demos

    Now it's bit easy to remove demos from theme

    Suppose if you don't want other demo except demo which you like then just do below steps:

    Note: Same component import statement you need remove from other menus like shop, products, features etc.. as per you received an error in your console.

    Removal/ Change Loader

    Suppose if you want to remove /change the loader which you can see in page load that you can change from:

    GraphQL

    We have use GraphQL for integrating data to frontend

    Backend

    Frontend

    Skeleton Loader

    Firebase

    Basically Firebase use for:

    There are also many other use of firebase that you can find from reference which we have attach below.

    Prerequisites

    You must have the following prerequisites:

    Let's follow below step to secure your application
    • Step 1:

      • 1.setup firebase project in firebase console.

        click on Get Started button

      • 2. Add new project

        create new project

        Accept the controler-terms and click on Create Project

      • 3. Go to Develop > Authentication

      • 4. Get config object for your web app

        To get the config object for a Firebase Web App:

        >> Click the Settings icon, then select Project settings.

        >> Go to the web app

        >> In Your apps card, select the nickname of the app for which you need a config object.

        >> Select Config from the Firebase SDK snippet pane.

        >> Copy the config object snippet, then add it to your app's HTML.

        copy config add on config.txt

      • 5.Next, you'll need to enable Email authentication from the authentication > Sign-in method tab:

      • 6.go to sign in method

        Make disble toggle to enable, and save changes

      • 7.Go to the authentication > Users tab then click on the Add user button and genarate email and password:

    • Step 2:
      Installing Firebase in React
      • npm install ——save firebase

      • 2. Here .env file. Add your firebase credential for using Endless with firebase and restart your app. Don't change defined variables.


        This config file manage inside the src >> data >> base.js folder

                                      
import * as firebase from "firebase/app";
import 'firebase/firestore';
import "firebase/auth";

const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_KEY,
authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGEING_SENDER_ID,
appId:process.env.REACT_APP_FIREBASE_API_ID
});

      • 3. Generate components in auth folder called Login and Register and use firebase in Login and Register component according to your needs.

    Deployment

    https://vercel.com/

    If you want to make live the template in vercel.com then follow the below command

    API

    • Navigate to API folder
    • Now run below command 
    vercel

    Shop

    • After deploying the api you will get the api endpoint url. Now go to frontend and Put that url in
      1. 1) next.config.js in which you have API url under env object put your endpoint in that API url
      2. 2) and in webpack.confog.js there is one key called target in proxy object set your endpoint in that string in below format. 
    NEXT_PUBLIC_GRAPHQL_API_ENDPOINT= '{put_your_api_url_here.}/graphql'
     
    vercel

    fonts

    <!--Google font-->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">

    Dependencies

    • Apollo : To integrate graphql in theme : Doc: https://www.npmjs.com/package/bootstrap
    • Firebase : To integrate Login functionality : Doc: https://www.npmjs.com/package/bootstrap
    • i18 : To Translate your thought : Doc: https://www.npmjs.com/package/bootstrap
    • Bootstrap : Doc: https://www.npmjs.com/package/bootstrap
    • redux : Doc: https://www.npmjs.com/package/redux
    • react-slick : Doc: https://www.npmjs.com/package/react-slick
    • react-infinite-scroll-component : Doc: https://www.npmjs.com/package/react-infinite-scroll-component
    • react-toastify : Doc: https://www.npmjs.com/package/react-toastify
    • react-input-range : Doc: https://www.npmjs.com/package/react-input-range
    • react-paypal-express-checkout : Doc: https://www.npmjs.com/package/react-paypal-express-checkout

    Thank you

    Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

    Best Regards, Pixelstrap