/ALXCode

Primary LanguageJavaScriptMIT LicenseMIT

ALXCode

Overview :

Welcome to ALXCode, the ultimate online text editor designed for the ALX Intranet, but versatile enough to run on any server! With ALXCode, students can effortlessly open, edit, and perfect their code directly in the browser. Say goodbye to terminal-based editors and hello to a whole new world of coding!

Features :

  • Browser-Based Editing: Edit your code directly in the browser.

  • In-Browser Execution: Run your code without leaving the editor.

  • Integrated Terminal: Access a built-in terminal for command-line tasks.

  • File Explorer: Navigate through your files with ease.

  • Local File Access: Open files from anywhere on your computer.

  • Language Detection: Automatically detects the programming language of the file you are editing.

Technologies :

  • Front-End: Built with React.js and styled using Tailwind CSS.

  • Back-End: Built with Go, fiber and websocket.

  • Back-End beta version: Built with expressa and socketio

How to Run the Project :

  1. Clone the repository:

    git clone https://github.com/AjwadG/ALXCode.git

Using it for your sandbox :

  1. Run the development servers: cd ALXCode/backend/go

  2. Set server port number: ./selectPort PORT

  3. Set Port maping if used in sandbox: ./fixPortMaping.sh MAPED_PORT

  4. Start the server: ./ALXCode

Please follow the instructions in the video in order to ensure that it functions correctly on your sandbox

Project demo :

Watch the video

Using it for Dev :

  1. Run the development servers: Open two terminals:
  • First Terminal (Front-End):

    cd ALXCode/frontend
    npm install
    npm run dev
    
  • Second Terminal (Back-End):

    cd ALXCode/backend/go
    go mod tidy
    go run main.go
    

Project Structure:

Frontend :

  • public: Public assets for the frontend.

    • alx-logo-white.png: Logo image.
    • vite.svg: Vite logo.
  • src: Source code for the frontend.

    • assets/css: CSS files

      => ndex.css: Main CSS file

    • components: React components.

      => Explorer.css: CSS for Explorer component.

      => File.jsx: File component.

      => FileExplorer.jsx: File Explorer component.

      => Folder.jsx: Folder component.

      => NavFile.jsx: Navigation File component.

      => App.jsx: Main App component.

      => CodeBlock.jsx: Code Block component.

      => Explorer.jsx: Explorer component.

      => FileNavigation.jsx: File Navigation component.

      => Footer.jsx: Footer component.

      => Output.jsx: Output component.

      => Terminal.jsx: Terminal component.

      => Topbar.jsx: Topbar component.

      => main.jsx: Main entry point for the frontend.

    • utils.js: Utility functions.

  • .eslintrc.cjs: ESLint configuration file.

  • .gitignore: Git ignore file.

  • README.md: Documentation for the frontend.

  • index.html: Main HTML file for the frontend.

  • package-lock.json: Dependency lock file.

  • package.json: NodeJS package file.

  • postcss.config.js: PostCSS configuration file.

  • tailwind.config.js: Tailwind CSS configuration file.

  • vite.config.js: Vite configuration file.

  • LICENSE: License file.

    NodeJS :

  • public: Public assets for the NodeJS backend.

  • scripts: Contains JavaScript files.

  • index.js: Main script file.

  • style: CSS files for styling.

  • views: View templates using EJS.

  • doc.ejs: Documentation view.

  • index.ejs: Main index view.

  • comands.js: Script to manage commands.

  • dir.js: Directory management script.

  • oneCommand.js: Single command execution script.

  • package-lock.json: Dependency lock file.

  • package.json: NodeJS package file.

  • README.md: Documentation for the NodeJS backend.

    Backend :

  • go: Contains Go-related files and modules.

  • main.go: Entry point for the Go server.

  • go.mod: Go module file.

  • go.sum: Dependencies for the Go project.

  • scripts: Scripts related to backend operations.

  • fixPortMaping.sh: Script to fix port mapping issues.

  • selectPort.sh: Script to select port.

  • .air.toml: Configuration file for live reloading.

  • socket_demo.html: Demonstration file for socket implementation.

  • public: Publicly accessible files and assets.

  • static: Static files for the backend.

  • views: Backend view templates.

  • doc.html: Documentation file.

  • index.html: Main HTML file for backend.

  • images: Contains image assets such as alx-logo-white-B2jpy1kh.png and alx-logo-white.png.

  • README.md: Documentation for the backend.

AUTHORS :

License :

This project is licensed under the MIT License. See the LICENSE file for details.