From f43df560c13f8deb7025582884910af6620bf3b2 Mon Sep 17 00:00:00 2001 From: Jason Park Date: Mon, 10 Jun 2019 02:14:48 +0900 Subject: [PATCH] Update documentation --- CONTRIBUTING.md | 45 +++++++++++++----------------- PROJECT_DETAILS.md | 69 ---------------------------------------------- README.md | 4 +-- 3 files changed, 21 insertions(+), 97 deletions(-) delete mode 100644 PROJECT_DETAILS.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 641722d..c6f26cb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,7 +2,9 @@ > #### Table of Contents > - [Running Locally](#running-locally) -> - [Creating a Pull Request](#creating-a-pull-request) +> - [Directory Structure](#directory-structure) + +Are you a first-timer in contributing to open source? [These guidelines](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) from GitHub might help! ## Running Locally @@ -14,38 +16,29 @@ git clone https://github.com//algorithm-visualizer.git ``` -3. Install [Docker](https://docs.docker.com/install/), if not already installed. - -4. Install dependencies, and run the server. +3. Install dependencies, and run the web app. ```bash cd algorithm-visualizer npm install - npm run dev + npm start ``` -5. Open [`http://localhost:8080/`](http://localhost:8080/) in a web browser. +4. Open [`http://localhost:3000/`](http://localhost:3000/) in a web browser. -## Creating a Pull Request - -6. Create a branch addressing the issue/improvement you'd like to tackle. +## Directory Structure - ```bash - git checkout -b my-problem-fixer-branch - ``` - -7. Write some awesome code. - -8. Commit the changes, and push them to `my-problem-fixer-branch` branch on your forked repo. - - ```bash - git add . - - git commit -m "Explain my awesome changes" - - git push origin my-problem-fixer-branch - ``` - -9. Create a pull request from `my-problem-fixer-branch` branch on your forked repo to `master` branch on the main repo. +- [**branding/**](branding) contains representative image files. +- [**public/**](public) contains static files to be served. +- [**src/**](src) contains source code. + - [**apis/**](src/apis) defines outgoing API requests. + - [**common/**](src/common) contains commonly used files. + - [**components/**](src/components) contains UI components. + - [**core/**](src/core) processes visualization. + - [**layouts/**](src/core/layouts) layout tracers. + - [**renderers/**](src/core/renderers) renders visualization data. + - [**tracers/**](src/core/tracers) interprets visualizing commands into visualization data. + - [**files/**](src/files) contains markdown or skeleton files to be shown in the code editor. + - [**reducers/**](src/reducers) contains Redux reducers. diff --git a/PROJECT_DETAILS.md b/PROJECT_DETAILS.md deleted file mode 100644 index 9ad7a9e..0000000 --- a/PROJECT_DETAILS.md +++ /dev/null @@ -1,69 +0,0 @@ -# Project Details - -> #### Table of Contents -> - [Project Structure](#project-structure) -> - [Directory Structures](#directory-structures) -> - [algorithm-visualizer](#algorithm-visualizer) -> - [algorithms](#algorithms) - -## Project Structure - -The project [Algorithm Visualizer](https://github.com/algorithm-visualizer) consists of the following repositories. - -- [`algorithm-visualizer`](https://github.com/algorithm-visualizer/algorithm-visualizer) contains the frontend server written in React and the backend server written in Node. - -- [`algorithms`](https://github.com/algorithm-visualizer/algorithms) contains public algorithms shown on the sidebar. - -- [`tracers.js`](https://github.com/algorithm-visualizer/tracers.js) is a visualization library for JavaScript. - -- [`tracers.cpp`](https://github.com/algorithm-visualizer/tracers.cpp) is a visualization library for C++. - -- [`tracers.java`](https://github.com/algorithm-visualizer/tracers.java) is a visualization library for Java. - -## Directory Structures - -### algorithms - -- **Category A/** is the name of the category. - - **Algorithm A/** is the name of the algorithm. - - **code.js** is the implementation of the algorithm in JavaScript. - - **code.cpp** is the implementation of the algorithm in C++. - - **code.java** is the implementation of the algorithm in Java. - - **README.md** is the description of the algorithm. - - **Algorithm B/** - - **Algorithm C/** - - ... -- **Category B/** -- **Category C/** -- ... - -### algorithm-visualizer - -- **app/** wraps the backend and frontend servers. -- **bin/** contains executables. -- **branding/** contains representative image files. -- **build/** is where compiled files are written to. - - **backend/** contains the compiled backend server. - - **frontend/** contains the compiled frontend server. -- **src/** contains source codes. - - **backend/** contains the source code of the backend server. - - **apis/** defines outgoing API requests. - - **common/** contains commonly used files. - - **controllers/** routes and processes incoming requests. - - **models/** manages the algorithm data. - - **public/** is where the backend server writes to. - - **algorithms/** is a cloned [`algorithms`](https://github.com/algorithm-visualizer/algorithms) repo. - - **codes/** is where users' codes are uploaded to. - - **tracers/** builds a web worker and docker images that compile and run users' codes. - - **frontend/** contains the source code of the frontend server. - - **apis/** defines outgoing API requests. - - **common/** contains commonly used files. - - **components/** defines React components. - - **core/** is in charge of visualization. - - **datas/** manages visualization data. - - **renderers/** renders visualization data. - - **reducers/** contains Redux reducers. - - **skeletons/** contains skeleton files to be shown in the code editor. - - **static/** contains static files to be served. - -**NOTE** that for JavaScript, it builds a web worker rather than a docker image. Once browsers fetch the web worker, they will submit users' codes to the web worker locally, instead of submitting to the remote backend server, to extract visualization data. It not only enables browsers to visualize JavaScript codes quickly, but also reduces the load on the backend server. diff --git a/README.md b/README.md index b755df6..cadd785 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,6 @@ We have multiple repositories under the hood that comprise the website. Take a l - [**`server`**](https://github.com/algorithm-visualizer/server) serves the web app and provides APIs that it needs on the fly. (e.g., GitHub sign in, compiling/running code, etc.) -- [**`algorithms`**](https://github.com/algorithm-visualizer/algorithms) contains public algorithms shown on the side menu of the website. +- [**`algorithms`**](https://github.com/algorithm-visualizer/algorithms) contains algorithm visualizations shown on the side menu of the website. -- [**`tracers.*`**](https://github.com/search?q=org%3Aalgorithm-visualizer+tracers.&type=Repositories) are visualization libaries written in each supported language. The only thing they do is to extract visualizing commands from code. +- [**`tracers.*`**](https://github.com/search?q=org%3Aalgorithm-visualizer+tracers.&type=Repositories) are visualization libraries written in each supported language. The only thing they do is to extract visualizing commands from code.