Encryptor web app

A web app that allows you to encrypt and decrypt messages.

The web app can be found here. Check it out!

This website allows the user to use some very basic classical ciphers to encrypt and decrypt text.

• The user can type their text on a text area and then select a cipher to use.
  By default the starting cipher is the Rot13 cipher and it is set for encrypting the input text.
  
• The user may select a different cipher and set the mode to decrypt. The available ciphers are the following: Rot13, Atbash, Caesar, Affine and Baconian.
  
• The user can click on the "Convert" button to perform the operation. The result will be displayed on the bottom textarea.
  
• The user may stack different operations of encrypting and decrypting with different ciphers by clicking on the "Add Cipher" button.
  
• The user may remove ciphers from the stack of operations by clicking the "Remove" button. Each cipher has its own "Remove" button but the last cipher cannot be removed.

Backend

The backend of this application provides an endpoint for getting all the available ciphers that can be used. This is used on the list of ciphers that the user can select from.
In order for the application to perform multiple cipher operations it creates a string sequence that will signify to the backend the which operations need to be performed.
This sequence is used as a parameter in a POST request. The user's input text is put into the body of that request.
The backend provides an endpoint which receives the text from the POST request and resolves the string sequence. Then the backend performs the appropriate operations and returns the result as JSON.
The backend was created using Node.js. These endpoints were set up using Express.js

Frontend

The frontend of the application consists of three main components.

• First, a component where the user types the original text.
  
• Second, a component called Cipher Box which is responsible for the interactions of selecting a cipher, changing the operation type (encrypt and decrypt) and removing a cipher. It is also responible for adding more ciphers and finally making the POST request to the backend.
  
• Finally there is a component which displays the result that the backend has sent to the appliction.
  

The forntend was created with React, using the hooks interface. Styling was done using Tailwind CSS.

Deployment

This application was deployed using Heroku and Git.

Icons

The icons where generated using Favicon Generator.

Credits

This website was inspired by Cryptii.com.

Using the application

To use the application one needs to follow a few steps.

Step 1: Clone the repository using Git

Open up a Git terminal and type git clone https://github.com/VictorMegir/Encryptor-web-app.git.

Step 2: Install Dependencies using npm

• After cloning the repository, navigate into the repository's direcotry by typing cd Encryptor-web-app.
  
• Install the dependencies of the server by typing npm install.
  
• Navigate into the client directory by typing cd encryptor.
  
• Install the dependencies of the client by typing npm install. This will take a while.
  

Step 3: Run the development server.

• Start the server of the application by typing npm start on the repository's directory.
  
• Start the client of the application by typing npm start on the encryptor directory from a different terminal.
  The development server can be found on your browser on localhost:3000.