Skip to content

Latest commit

 

History

History
260 lines (186 loc) · 9.64 KB

README.md

File metadata and controls

260 lines (186 loc) · 9.64 KB

CLI REPL

A front-end CLI REPL (Read-Eval-Print Loop) is a tool that allows you to interactively enter commands or code snippets, which are then executed, and the results are displayed in real time.

Setting up the project

1. Creating a React application:

Setting up the Fronted

Use the following command to create a new React project using Vite with the React template.

  • npm create vite@latest
  • Select the following options:
  • Project name: cli-repl
  • Framework: React
  • Variant: JavaScript + SWC

Navigate to project directory:

  • cd cli-repl

Installation of node modules:

  • npm install

Start the development server:

  • npm run dev

Setting up the Backend

  • Created a folder in the root of react project
  • The name of the folder is flask-backend
  • Inside this folder there is app.py, requirements.txt and draw-chart directory
  • app.py has compplete backend code for the routes
  • draw-chart directory acts as database

Installation of Flask, Flask Cors and Pandas

  • pip install -r requiremnets.txt

  • before installing requirements, make sure you have Python installed

  • For Virtual Environment

    • Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass // only once if no permisiion
    • python -m venv venv
    • venv\Scripts\Activate
    • deactivate // deactivate the venv
    • Set-ExecutionPolicy -Scope Process -ExecutionPolicy Restricted // To restrict the premisiion again

  • Now, the project is set up and running. Now lets start working on implementing the CLI REPL functionality.

Folder Structure

  • components: Contains React components for the CLI REPL in the src folder.
    • Home.jsx
    • Terminal.jsx
    • AboutCommand.jsx
    • HelpCommad.jsx
    • FetchPriceCommand.jsx
    • UploadCommand.jsx
    • DrawCommand.jsx
    • DeleteCommand.jsx
  • styles: Contains CSS files for styling the components, present in the src/styles.
    • terminal.css
  • Home is rendering in App.jsx and Terminal is rendering is Home
  • Remaining all are rendering in Terminal with in a switch case
  • The command is choose on the basis of what user enters

2. Basic Terminal UI

Component Setup

  • Terminal Component: Created a Terminal component with an input field and an output area to resemble a CLI.

const Terminal = () => { // Component logic };

  • Input Handling: Implemented basic input handling to allow users to type commands into the input field.

Styling

  • Styled the Terminal component using CSS to match the look and feel of a traditional CLI.
  • Set the font-family to Arial, sans-serif for consistency.

Input Focus

  • Added functionality to automatically focus on the input field when the Terminal component is rendered, allowing users to start typing commands immediately.
  • Command Execution: Implement logic to execute commands and display results.
  • Command History: Maintain a history of executed commands and their results.
  • Error Handling: Handle invalid commands and display error messages.
  • Enhanced Styling: Improve the styling for a more visually appealing interface.

3. Implement Help and About Commands

Tasks Completed

  • Created HelpCommand.jsx and AboutCommand.jsx components.
  • Implemented basic rendering of help and about information.
  • Added command routing in the Terminal component.
  • Parsed user input to determine which command component to render.
  • Displayed help and about information based on user input.
  • Added scrolling behavior using useRef to automatically show the input area when it's out of view.
  • Added screen clear functionality for a clean slate on "clear" command.
  • Included a background image for visual appeal.

Project Files

  • HelpCommand.jsx: Component for displaying help information.
  • AboutCommand.jsx: Component for displaying about information.

Implementation Details

  • Utilized React hooks such as useState, useEffect, and useRef for managing state and implementing scrolling behavior.
  • Used switch case statements to determine the type of command and render the appropriate component or output message.
  • Added conditional rendering to show or hide the welcome message based on the clearIntro state.

4. Implement Fetch Price Command

FetchPriceCommand

  • Create FetchPriceCommand.jsx component.
  • Implement basic rendering of fetch price functionality.

Integrate with Binance API.

  • Use fetch to fetch cryptocurrency prices from the Binance API.
  • Display the fetched price in the output area.
  • Command: fetch-price [pair]

Description:

5. Implement Upload, Draw and Delete Commands Involves both Frontend and Backend

Frontend Tasks:

Upload

The Upload Command component allows users to upload a CSV file to the server for further processing.

Usage

  • Input: Select a CSV file using the file input field.
  • Action: Click the "Upload File" button to upload the file.
  • Output: A message indicating whether the file was successfully uploaded or if there was an error.

Checks

  • Only .csv files can be uploaded
  • Changes the name of the file first i.r., to small letters and replace spaces with hyphes
  • if file already exist then, replace it
  • if no draw-chart directory, then create directory first

Implementation

  • The component uses state to manage the selected file and the message displayed.
  • It sends a POST request to the backend endpoint /api/upload with the selected file in the request body.
  • Upon successful upload, it updates the message state to display a success message.
  • If there is an error, it updates the message state to display an error message.

Draw:

The Draw Command component allows users to draw a chart based on the uploaded CSV file and specified columns.

Usage

  • Input: Enter the column names for X and Y axes in the input fields.
  • Action: Click the "Draw Chart" button to draw the chart.
  • Output: A chart displayed in the output area based on the specified columns.

Checks - Checks whether the file exists in the draw-chart directory - If no file, then error message - Also checks the columns name in the file for their existance

Implementation

  • The component uses state to manage the column names for X and Y axes and the chart data.
  • It sends a POST request to the backend endpoint /api/draw with the selected columns in the request body.
  • Upon successful chart drawing, it displays the chart in the output area.
  • If there is an error, it displays an error message in the output area.

Delete:

The Delete Command component allows users to delete a file from the server's draw-chart directory by providing the file name.

Usage

  • Input: Enter the file name in the input field.
  • Action: Click the "Delete File" button to delete the file.
  • Output: A message indicating whether the file was successfully deleted or if there was an error.

Checks - Checks whether the file exists in the draw-chart directory - If no file, then error message - If yes, then delete

Implementation

  • The component uses state to manage the file name input and the message displayed.
  • It sends a POST request to the backend endpoint /api/delete with the file name in the request body.
  • Upon successful deletion, it updates the message state to display a success message.
  • If there is an error, it updates the message state to display an error message.

Backend Tasks:

Upload Endpoint:

The Upload endpoint allows clients to upload a CSV file to the server for processing.

Route

  • Method: POST
  • URL: /api/upload Request
  • Body: Form data with the key file containing the uploaded file. Response
  • Success: 200 OK with a JSON object containing a success message.
  • Failure: 400 Bad Request with a JSON object containing an error message. Example
  • Request: Form data with the uploaded CSV file.
  • Response: { "message": "File uploaded successfully." }

Draw Endpoint:

The Draw endpoint allows clients to draw a chart based on the uploaded CSV file and specified columns.

Route

  • Method: POST
  • URL: /api/draw Request
  • Body: JSON object with the keys file containing the uploaded file name, xAxis containing the X-axis column name, and yAxis containing the Y-axis column name. Response
  • Success: 200 OK with a JSON object containing the chart data.
  • Failure: 400 Bad Request with a JSON object containing an error message. Example
  • Request: { "file": "example.csv", "xAxis": "column1", "yAxis": "column2" }
  • Response: { "chartData": [...] }

Delete Endpoint:

The Delete endpoint allows clients to delete a specified file from the server's draw-chart directory.

Route

  • Method: POST
  • URL: /api/delete Request
  • Body: JSON object with the key file containing the name of the file to delete. Response
  • Success: 200 OK with a JSON object containing a success message.
  • Failure: 400 Bad Request with a JSON object containing an error message. Example
  • Request: { "file": "example.csv" }
  • Response: { "message": "example.csv has been deleted successfully." }

6. Error Handling and Testing

Implement error handling.

  • Handle errors gracefully and display error messages to the user. Write all the checks for critical functionality.
  • Write checks for command logic and user input handling.