Crypto Airdrop



Frontend configuration and installation on the server.

Local Setup

If you want to preview your application locally you will need to follow the steps below:

  1. npm install --legacy-peer-deps
  2. npm run dev
  3. Open http://localhost:3000 to preview your application.


You need to change the URL of the API on the file:


try {
      await fetch("", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        body: JSON.stringify(state),

Change to you existing API domain name.

Text Configuration

Edit the texts for the Airdrop Frontend script.


To edit the English translation you need to open this file:

  • ZiLab Airdrop Files/Frontend Files/locales/gb/common.json
  "es": "Spanish",
  "gb": "English",
  "step": "Step",
  "page.home.head.title": "GRUUK Token Airdrop GET LUCKY!",
  "airdrop.end.text": [
  "page.home.meta.description": "GRK Token Airdrop, 25 winners get 1000 GRK tokens + 10 USDT",
  "page.home.participate.text": [
    "To participate in GRUUK Token Airdrop, please fill out all the steps in the form. Good luck!",
    "⏩ 25 Winners will get 1000 $GRK Tokens + 10 USDT 💸 each.",
    "⏩ 25 Winners will get 500 $GRK Tokens + 5 USDT 💸 each.",
    "⏩ 25 Winners will get 250 $GRK Tokens 💸 each.",
    "⏩ 25 Winners will get 100 $GRK Tokens 💸 each.",
  "thirdform.address.placeholder": "Enter Your Binance Smart Chain Wallet address",
  "secondform.error.text": "Please complete clicking on all buttons",
  "general.step": "STEP",
  "general.prev": "prev",
  "": "next",
  "general.submit": "Submit",
  "general.days": "days",
  "general.hours": "hours",
  "general.minutes": "minutes",
  "general.seconds": "seconds",
  "error.submit.text": "System Error! Due to a high requests there was a problem, please try again in couple of minutes",
  "success.submit.text": [

The file content looks similar to this. Feel free to edit it as you need.

Image Replacement

By default, the images are stored under the /public directory.

You can upload your logo, and section image there.


Keep in mind, that if you want to change the image names and/or format, you will need to edit this file:

ZiLab Airdrop Files/Frontend Files/global-config.ts


import airdropImage from "/public/airdrop.png";

// for logo size must be h-12 w-12 height: 3rem; /* 48px */
import logo from "./public/logo.png";

You can simply update the airdrop.png and/or logo.png to whatever you want.

Customize Theme

To change the theme colors, you need to open this file:

ZiLab Airdrop Files/Frontend Files/tailwind.config.js


Colors can be changed here:

extend: {
      colors: {
        primary: "#3336FF",
        warn: "#4b50e6",
        error: "#3336FF",
        twitter: "#1DA1F2",
        telegram: "#0088cc",
        youtube: "#e250e5",
        discord: "#7289da"


Countdown Time

To edit the airdrop countdown time you need to open the file frontend/src/.env and update the values there:

# date format "MM DD YYYY, h:mm a"
VITE_TIME_TILL_DATE="06 08 2022, 9:00 am" 

Please make sure that you follow the format.

Deploy Application on cPanel

Once all the changes are done on the local environment, now you are ready to deploy the frontend compiled files to your hosting.

To deploy the files on cPanel you need to follow the steps below.


  1. Run command: npm run export
  2. This command will generate folder "out" on the source file directory.
  3. Make a ZIP of "out" folder.
  4. Upload the "" to your subdomain on the cPanel via File Manager.
  5. Extract the files.
  6. Open directory, select all the files and move them to
  7. Create .htaccess file with the following content:
<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond % !-f
  RewriteCond % !-d
  RewriteCond % !-L
  RewriteRule . /index.html [L]