{"id":23043389,"url":"https://github.com/umarilly/command-line-interface-repl","last_synced_at":"2026-04-11T17:47:58.071Z","repository":{"id":244383656,"uuid":"784115794","full_name":"umarilly/Command-Line-Interface-REPL","owner":"umarilly","description":"A Frontend Command Line Interface - 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.","archived":false,"fork":false,"pushed_at":"2024-04-12T07:27:02.000Z","size":5676,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T14:51:52.759Z","etag":null,"topics":["css","flask","html","javascript","jsx","python","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umarilly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-09T08:07:26.000Z","updated_at":"2024-06-14T09:36:00.000Z","dependencies_parsed_at":"2024-06-14T12:08:22.254Z","dependency_job_id":null,"html_url":"https://github.com/umarilly/Command-Line-Interface-REPL","commit_stats":null,"previous_names":["umarilly/command-line-interface-repl"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/umarilly/Command-Line-Interface-REPL","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarilly%2FCommand-Line-Interface-REPL","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarilly%2FCommand-Line-Interface-REPL/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarilly%2FCommand-Line-Interface-REPL/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarilly%2FCommand-Line-Interface-REPL/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umarilly","download_url":"https://codeload.github.com/umarilly/Command-Line-Interface-REPL/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarilly%2FCommand-Line-Interface-REPL/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31689762,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","flask","html","javascript","jsx","python","react"],"created_at":"2024-12-15T20:47:22.974Z","updated_at":"2026-04-11T17:47:58.017Z","avatar_url":"https://github.com/umarilly.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# CLI REPL\n\nA 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.\n\n## Setting up the project\n\n  **1. Creating a React application:**\n\n  **Setting up the Fronted**\n  \n  Use the following command to create a new React project using Vite with the React template.\n  - npm create vite@latest\n  - Select the following options:\n  - Project name: cli-repl\n  - Framework: React\n  - Variant: JavaScript + SWC\n\n  Navigate to project directory:\n  - cd cli-repl\n\n  Installation of node modules:\n  - npm install\n\n  Start the development server:\n  - npm run dev\n\n  **Setting up the Backend**\n\n  - Created a folder in the root of react project\n  - The name of the folder is flask-backend\n  - Inside this folder there is app.py, requirements.txt and draw-chart directory\n  - app.py has compplete backend code for the routes\n  - draw-chart directory acts as database\n\n  **Installation of Flask, Flask Cors and Pandas**\n\n  - pip install -r requiremnets.txt\n  - before installing requirements, make sure you have Python installed\n  - For Virtual Environment\n      - Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass // only once if no permisiion\n      - python -m venv venv\n      - venv\\Scripts\\Activate\n      - deactivate // deactivate the venv\n      - Set-ExecutionPolicy -Scope Process -ExecutionPolicy Restricted // To restrict the premisiion again\n\n  - Now, the project is set up and running. Now lets start working on implementing the CLI REPL functionality.\n\n  **Folder Structure**\n  \n  - components: Contains React components for the CLI REPL in the src folder.\n      - Home.jsx\n      - Terminal.jsx\n      - AboutCommand.jsx\n      - HelpCommad.jsx\n      - FetchPriceCommand.jsx\n      - UploadCommand.jsx\n      - DrawCommand.jsx\n      - DeleteCommand.jsx\n  - styles: Contains CSS files for styling the components, present in the src/styles.\n      - terminal.css\n  - Home is rendering in App.jsx and Terminal is rendering is Home\n  - Remaining all are rendering in Terminal with in a switch case\n  - The command is choose on the basis of what user enters\n\n\n  **2. Basic Terminal UI**\n  \n  **Component Setup**\n  \n  - Terminal Component: Created a Terminal component with an input field and an output area to resemble a CLI.\n\n  **const Terminal = () =\u003e { // Component logic };**\n  \n  - Input Handling: Implemented basic input handling to allow users to type commands into the input field.\n  \n  **Styling**\n  \n  - Styled the Terminal component using CSS to match the look and feel of a traditional CLI.\n  - Set the font-family to Arial, sans-serif for consistency.\n  \n  **Input Focus**\n  \n  - Added functionality to automatically focus on the input field when the Terminal component is rendered, allowing users to start typing commands immediately.\n  - Command Execution: Implement logic to execute commands and display results.\n  - Command History: Maintain a history of executed commands and their results.\n  - Error Handling: Handle invalid commands and display error messages.\n  - Enhanced Styling: Improve the styling for a more visually appealing interface.\n\n  \n  **3. Implement Help and About Commands**\n  \n  **Tasks Completed**\n  \n  - Created HelpCommand.jsx and AboutCommand.jsx components.\n  - Implemented basic rendering of help and about information.\n  - Added command routing in the Terminal component.\n  - Parsed user input to determine which command component to render.\n  - Displayed help and about information based on user input.\n  - Added scrolling behavior using useRef to automatically show the input area when it's out of view.\n  - Added screen clear functionality for a clean slate on \"clear\" command.\n  - Included a background image for visual appeal.\n  \n  **Project Files**\n  \n  - HelpCommand.jsx: Component for displaying help information.\n  - AboutCommand.jsx: Component for displaying about information.\n  \n  **Implementation Details**\n  \n  - Utilized React hooks such as useState, useEffect, and useRef for managing state and implementing scrolling behavior.\n  - Used switch case statements to determine the type of command and render the appropriate component or output message.\n  - Added conditional rendering to show or hide the welcome message based on the clearIntro state.\n  \n  **4. Implement Fetch Price Command**\n  \n  **FetchPriceCommand** \n\n  - Create FetchPriceCommand.jsx component.\n  - Implement basic rendering of fetch price functionality.\n  \n  **Integrate with Binance API.**\n  \n  - Use fetch to fetch cryptocurrency prices from the Binance API.\n  - Display the fetched price in the output area.\n  - Command: fetch-price [pair]\n  \n  **Description:**\n  - Fetches the current average price of a specified cryptocurrency pair. Replace [pair] with the desired symbol.\n  - API: https://api.binance.com/api/v3/avgPrice?symbol=BTCUSDT\n  - Output: The current price of [pair] is [price]\n  - Example: fetch-price BTCUSDT\n\n\n  **5. Implement Upload, Draw and Delete Commands**\n    ***Involves both Frontend and Backend***\n\n  **Frontend Tasks:**\n  \n  **Upload**\n  \n  The Upload Command component allows users to upload a CSV file to the server for further processing.\n  \n  Usage\n  - Input: Select a CSV file using the file input field.\n  - Action: Click the \"Upload File\" button to upload the file.\n  - Output: A message indicating whether the file was successfully uploaded or if there was an error.\n\n  Checks\n  - Only .csv files can be uploaded\n  - Changes the name of the file first i.r., to small letters and replace spaces with hyphes\n  - if file already exist then, replace it\n  - if no draw-chart directory, then create directory first\n    \n  Implementation\n  - The component uses state to manage the selected file and the message displayed.\n  - It sends a POST request to the backend endpoint /api/upload with the selected file in the request body.\n  - Upon successful upload, it updates the message state to display a success message.\n  - If there is an error, it updates the message state to display an error message.\n  \n  **Draw:**\n  \n  The Draw Command component allows users to draw a chart based on the uploaded CSV file and specified columns.\n  \n  Usage\n  - Input: Enter the column names for X and Y axes in the input fields.\n  - Action: Click the \"Draw Chart\" button to draw the chart.\n  - Output: A chart displayed in the output area based on the specified columns.\n\n  Checks\n    - Checks whether the file exists in the draw-chart directory\n    - If no file, then error message\n    - Also checks the columns name in the file for their existance\n  \n  Implementation\n  - The component uses state to manage the column names for X and Y axes and the chart data.\n  - It sends a POST request to the backend endpoint /api/draw with the selected columns in the request body.\n  - Upon successful chart drawing, it displays the chart in the output area.\n  - If there is an error, it displays an error message in the output area.\n\n  **Delete:**\n  \n  The Delete Command component allows users to delete a file from the server's draw-chart directory by providing the file name.\n  \n  Usage\n  - Input: Enter the file name in the input field.\n  - Action: Click the \"Delete File\" button to delete the file.\n  - Output: A message indicating whether the file was successfully deleted or if there was an error.\n\n  Checks\n    - Checks whether the file exists in the draw-chart directory\n    - If no file, then error message\n    - If yes, then delete\n  \n  Implementation\n  - The component uses state to manage the file name input and the message displayed.\n  - It sends a POST request to the backend endpoint /api/delete with the file name in the request body.\n  - Upon successful deletion, it updates the message state to display a success message.\n  - If there is an error, it updates the message state to display an error message.\n  \n  **Backend Tasks:**\n\n  **Upload Endpoint:**\n  \n  The Upload endpoint allows clients to upload a CSV file to the server for processing.\n  \n  Route\n  - Method: POST\n  - URL: /api/upload\n  Request\n  - Body: Form data with the key file containing the uploaded file.\n  Response\n  - Success: 200 OK with a JSON object containing a success message.\n  - Failure: 400 Bad Request with a JSON object containing an error message.\n  Example\n  - Request: Form data with the uploaded CSV file.\n  - Response: { \"message\": \"File uploaded successfully.\" }\n  \n  **Draw Endpoint:**\n  \n  The Draw endpoint allows clients to draw a chart based on the uploaded CSV file and specified columns.\n  \n  Route\n  - Method: POST\n  - URL: /api/draw\n  Request\n  - 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.\n  Response\n  - Success: 200 OK with a JSON object containing the chart data.\n  - Failure: 400 Bad Request with a JSON object containing an error message.\n  Example\n  - Request: { \"file\": \"example.csv\", \"xAxis\": \"column1\", \"yAxis\": \"column2\" }\n  - Response: { \"chartData\": [...] }\n  \n  **Delete Endpoint:**\n  \n  The Delete endpoint allows clients to delete a specified file from the server's draw-chart directory.\n  \n  Route\n  - Method: POST\n  - URL: /api/delete\n  Request\n  - Body: JSON object with the key file containing the name of the file to delete.\n  Response\n  - Success: 200 OK with a JSON object containing a success message.\n  - Failure: 400 Bad Request with a JSON object containing an error message.\n  Example\n  - Request: { \"file\": \"example.csv\" }\n  - Response: { \"message\": \"example.csv has been deleted successfully.\" }\n\n  **6. Error Handling and Testing**\n  \n  Implement error handling.\n  - Handle errors gracefully and display error messages to the user.\n  Write all the checks for critical functionality.\n  - Write checks for command logic and user input handling.\n\n \n\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumarilly%2Fcommand-line-interface-repl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumarilly%2Fcommand-line-interface-repl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumarilly%2Fcommand-line-interface-repl/lists"}