Setting everything up

Install Node and npm using nvm

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Install node and npm
nvm install 20.10.0

# Set the default version of node
nvm alias default 20.10.0

The web-application

In Documents, I created a directory called web-application. The directory structure is as follows (only the interesting stuff):

web-application
├── client
│   └── src
│       ├── App.css
│       └── App.tsx
└── server
    ├── server.ts
    └── tsconfig.json

The React application

Create the app

Run this command in the Documents folder:

npx create-react-app client --template typescript
npm install axios cors

Run the app

cd client
npm start

Add ✨bling🌟 to it (TailWind CSS)

npm install tailwindcss
npx tailwindcss init

Next, add the following to tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In src/index.css, add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Build! npm run build

Make images work

In the src/ directory, create a folder called types, and add a file called declarations.d.ts with the following content:

declare module "*.png" {
    const value: any;
    return value;
}

declare module "*.svg" {
    const content: any;
    export default content;
}

declare module "*.gif" {
    const src: any;
    return src;
}

The Node server

cd into the web-application directory and run the following commands:

mkdir server
cd server
npm init -y
npm install express
node server.ts

To make it easier in the development process, I installed ts-node and nodemon globally:

npm install -g ts-node nodemon

Now, to run the app, I can simply run nodemon server.ts. This will automatically restart the server when I make changes to the code. It also lets me restart the server by pressing rs and exit by pressing Ctrl + C.

Important: Make sure to add your password to the .env file. The key should be PASSWORD. For example, your .env file might look like this:

PASSWORD=kali
INTERFACE=wlan0

This password will be used for certain commands.

For certain modules of the application, .env should contain more keys. For example, the deauth module uses airmon-ng to switch the wireless card to monitor mode. The .env file should contain the name of the interface which will be used or which supports monitor mode. It would look like this:

INTERFACE=wlan0

In this case, the interface is wlan0, but it could be any other interface that supports monitor mode. Nonetheless, there is a template .env file in the server directory (server/.env.template).

Setting up git

git config --global user.name "Tudor Radoni" 
git config --global user.email "tudor.radoni@gmail.com"
git config --global code.editor vim                     
git config --global init.defaultBranch main

To check if everything is set up correctly, run git config --list.

$ git config --list
user.name=Tudor Radoni
user.email=tudor.radoni@gmail.com
code.editor=vim
init.defaultbranch=main

Setting up the repository

I added a .gitignore file, which contains the following templates:

• Node
• default template for React (automatically added by create-react-app)

git init
git add .
git commit -m "Initial commit"