Crypto Auto Trading Frontend

A React application for auto-trading with Exness & Binance exchange

Table of Contents

• Installation Nvm & Node
• Create new vite project
• Run Dev Server
• Add dependencies in package.json
• Add reset-css instead of normalize.css
• Add sass support
• Configure vite.config.ts to set up path alias
• Configure tsconfig.json to set up 'auto prompt' for path alias '@'
• Add Ant Design of React
• Add Ant Design of React Icons
• Import Ant Design of React
• Install vite-plugin-style-import
  • vite-plugin-style-import: to import Ant Design of React css on demand
  • -D: to add it as a 'devDependencies' in package.json
  • configure vite.config.ts to use vite-plugin-style-import

Installation Nvm & Node

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
$ source ~/.bashrc

$ nvm -v
0.39.7
$ nvm ls

$ nvm install 19.6.0

$ nvm alias default 19.6.0

$ nvm use stable
$ nvm use default
v19.6.0

$ node -v
v19.6.0

$ npm -v
9.6.4

Create new vite project

$ npm init vite
> project name? lege-management

# change directory to your app
$ cd lege-management   

# install dependencies
$ npm install          

# save into package.json
$ npm install <package-name> [--save-prod]

# save into package.json
$ npm install [email protected] --save  

Run Dev Server

$ npm run dev          # run dev server

Add dependencies in package.json

{
  "name": "lege-management",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    // --host: to expose the server to other devices on the network
    // --open: to open the browser automatically
    // $ npm run dev  # to run the dev server

    "dev": "vite --host --port 3000 --open",        
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {                 
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "8.1.3",         // state management
    "react-router-dom": "^6.2.1",   // routing
    "redux": "^4.1.2"               // state management
  },
  "devDependencies": {              
    // required only for developement and not for production
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

Add reset-css instead of normalize.css

include reset-css in main.tsx

$ npm i reset-css --save

Add sass support

--save-dev

# to add it as a 'devDependencies' in package.json
npm install --save-dev sass

Configure vite.config.ts to set up path alias

Configure tsconfig.json to set up 'auto prompt' for path alias '@'

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
        "@/*": [ 
            "src/*"
        ]
    }
  }
}

Add Ant Design of React

npm install antd --save
or 
yarn add antd

Add Ant Design of React Icons

npm install @ant-design/icons --save
yarn add @ant-design/icons

Import Ant Design of React

import { Button } from 'antd';
import { FastBackwardOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';

Install vite-plugin-style-import

vite-plugin-style-import: to import Ant Design of React css on demand

-D: to add it as a 'devDependencies' in package.json

npm install [email protected] -D
npm i [email protected] -D

configure vite.config.ts to use vite-plugin-style-import

import styleImport, {AntdResolve} from 'vite-plugin-style-import';