Planning and Design

Objectives and Scope

Purpose: The purpose of the Interactive File Explorer is to provide users with a command-line interface for navigating, managing, and interacting with files and folders on their local file system.

Scope: The initial version will focus on core file system navigation, displaying file/folder information, and basic interaction functionalities.

Advanced features like search, file creation/editing, and git integration will be added incrementally in subsequent chapters.

Core Features

1. 1.File System Navigation: Allow users to browse through directories, view file/folder contents, and navigate back and forth within the file system.
2. 2.Display File/Folder Information: Show details such as file size, modification date, and permissions for selected files and folders.
3. 3.Basic Interaction: Support commands for listing directory contents, moving between directories, and viewing file contents.
   

Design User Interface (UI)

• ➢Command-Line Interface (CLI): The application will primarily use a command-line interface for interaction, providing a text-based menu for navigating and executing commands.
• ➢Clean and Intuitive Design: The CLI will have a simple and intuitive layout, with clear prompts and instructions for users to follow.
• ➢Keyboard Navigation: Users can navigate through menus and options using arrow keys and keyboard shortcuts for efficient interaction.

Development Process Outline

1. 1.Setting Up the Project: Create a new Node.js project and initialize a Git repository for version control.
2. 2.Basic Functionality: Implement core functionalities such as directory navigation, file listing, and basic commands for interacting with files and folders.
3. 3.Adding Advanced Features: Incrementally add advanced features like search, file creation/editing, and git integration based on user feedback and requirements.
4. 4.Testing and Debugging: Conduct thorough testing to ensure the application functions as expected and address any bugs or issues.
5. 5.Documentation and Deployment: Provide comprehensive documentation for users and developers, including installation instructions and usage guidelines.
   Deploy the application to a version control repository for public access and collaboration.

By following this comprehensive plan and design, we can ensure that the Interactive File Explorer application meets our expectations. Let's get started with the initial project setup.

Initial Project Setup

In this section, we'll lay the foundation for our Interactive File Explorer app following these steps:

• ➢set up the project structure,
• ➢initialize an npm project,
• ➢install necessary dependencies
• ➢initialize version control with Git,
• ➢create a GitHub repository,
• ➢commit and push the initial setup to github
  

Folder Structure

Start by creating a new project directory named `interactive-file-explorer` to contain all project files and subdirectories.

Then, inside that directory, create subdirectories for organizing different aspects of the project

At this point you should have something similar to what we have below:

interactive-file-explorer/
  ├── src/
  ├── test/

Let's breakdown the roles of each subdirectory:

• ➢src/: This directory will contain all our source code files.
• ➢test/: We'll store test scripts and related files here.
  

npm Project Initialization

Initialize a new npm project with default settings by running this command in the root directory:

npm init -y

This will create a package.json file in the project's root directory.

Dependency Installations

Install these npm packages for our project:

npm install inquirer chalk fs-extra 

npm install -D prettier mocha chai nodemon

Breakdown: We've had a brief overview of inquire.js and chalk in our early discussions. You may review them or simply loop them on the npm website and read through the documentation.

• ➢inquirer: A library for creating interactive command-line interfaces.
• ➢chalk: A library for styling CLI output with colors.
• ➢fs-extra: An extension of the built-in fs module with additional functionality.
• ➢prettier: Tools for code formatting.
• ➢mocha, chai: Testing frameworks for unit testing.
• ➢nodemon: Tool for automatic app restart on each file change.
  

Add an `index.js` file in src folder and an `index.test.js` file in the test folder just so you can run some scripts to make sure the setup is successful.

// index.test.ts file
import { assert } from "chai";

describe('Test setup', function () {
    it('should pass', function () {
        const name = 'TEST'
        
        assert.typeOf(name, 'string');
    })
});



// index.js file
console.log('Ready to go!')

create a .prettierrc.json file in the root directory and add the follow:

{
    "trailingComma": "none",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "printWidth": 80
}

At this point, your package.json file should look like this:

{
    "name": "interactive-file-explorer-app",
    "version": "1.0.0",
    "description": "",
    "main": "src/index.js",
    "type": "module",
    "directories": {
        "test": "test",
        "src": "dev"
    },
    "scripts": {
        "format": "prettier --write src test",
        "start": "node src/index.js",
        "test": "mocha",
        "dev": "nodemon --exec \"npm run format && npm run start\""
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "chai": "^5.1.0",
        "mocha": "^10.4.0",
        "nodemon": "^3.1.0",
        "prettier": "^3.2.5"
    },
    "dependencies": {
        "chalk": "^5.3.0",
        "fs-extra": "^11.2.0",
        "inquirer": "^9.2.20"
    }
}

To make sure that everything is setup successfully thus far, run the following commands one at a time:

npm run test
npm run dev

If you didn't encounter any errors, then you're good to go!😎

Git Initialization

Navigate to the project's root directory and initialize a new Git repository:

git init

Create a .gitignore file to exclude unnecessary files from version control.

GitHub Repository Creation

Head over to GitHub and create a new repository named `interactive-file-explorer`. If you're new to git and repository hosting platforms, then follow this official github guide to help you levelup quickly.

When you're done with repository setup, return to the code editor and let's continue.

From your terminal, stage all changes and commit them with a descriptive message:

git add .
git commit -m "Initial project setup"

Push the initial commit to the GitHub repository

git remote add origin <repository-url>
git branch -M main
git push -u origin main

By following these steps, we've set up our project directory, initialized version control, created a GitHub repository, and prepared our environment for developing the Interactive File Explorer application.

We're now ready to move on to implementing the core functionalities.