veluxa · veluxa · May 25, 2019 · May 25, 2019 · May 25, 2019 · May 25, 2019
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=CFS8Y6G3E29UA
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,24 @@
+# WebStorm settings
 /.idea
+
+# dependencies
 /node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
 /build
-/npm-debug.log
-/src/backend/public
+
+# misc
 .DS_Store
-/pm2.config.js
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -0,0 +1,17 @@
+tasks:
+ - init: >
+     git clone https://github.com/algorithm-visualizer/server.git &&
+     cd server &&
+     npm install &&
+     echo -e "GITHUB_CLIENT_ID=dummy\nGITHUB_CLIENT_SECRET=dummy\nAWS_ACCESS_KEY_ID=dummy\nAWS_SECRET_ACCESS_KEY=dummy" > .env.local &&
+     cd ..
+   command: cd server && npm run watch
+ - init: >
+     npm install &&
+     echo 'DANGEROUSLY_DISABLE_HOST_CHECK=true' > .env.local
+   command: npm start
+ports:
+  - port: 3000
+    onOpen: notify
+  - port: 8080
+    onOpen: ignore
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,7 +2,10 @@
 
 > #### Table of Contents
 > - [Running Locally](#running-locally)
-> - [Creating a Pull Request](#creating-a-pull-request)
+> - [Running in Gitpod](#running-in-gitpod)
+> - [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
 
@@ -13,39 +16,45 @@
     ```bash
     git clone https://github.com/<your-username>/algorithm-visualizer.git    
     ```
+
+3. Choose whether to run [`server`](https://github.com/algorithm-visualizer/server) on your machine or to use the remote server.
+    - If you choose to run the server locally as well, follow the instructions [here](https://github.com/algorithm-visualizer/server/blob/master/CONTRIBUTING.md#running-locally).
 
-3. Install [Docker](https://docs.docker.com/install/), if not already installed.
+    - If you choose to use the remote server, **temporarily** (i.e., don't commit this change) modify `package.json` as follows:
+        ```diff
+        - "proxy": "http://localhost:8080",
+        + "proxy": "https://algorithm-visualizer.org",
+        ```
 
-4. Install dependencies, and run the server.
+4. 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.
-
-## Creating a Pull Request
-
-6. Create a branch addressing the issue/improvement you'd like to tackle.
+5. Open [`http://localhost:3000/`](http://localhost:3000/) in a web browser.
 
-    ```bash
-    git checkout -b my-problem-fixer-branch
-    ```
+## Running in Gitpod
 
-7. Write some awesome code.
+You can also run `algorithm-visualizer` in Gitpod, a free online dev environment for GitHub.
 
-8. Commit the changes, and push them to `my-problem-fixer-branch` branch on your forked repo.
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/algorithm-visualizer/algorithm-visualizer)
 
-    ```bash
-    git add .
-
-    git commit -m "Explain my awesome changes"
-
-    git push origin my-problem-fixer-branch
-    ```
+## Directory Structure
 
-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/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Jinseo Jason Park
+Copyright (c) 2019 Jinseo Jason Park
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/PROJECT_DETAILS.md b/PROJECT_DETAILS.md
diff --git a/README.md b/README.md
@@ -1,31 +1,54 @@
 # Algorithm Visualizer
 
-> Algorithm Visualizer is an interactive online platform that visualizes algorithms from code.
+## Introduction
+Welcome to Algorithm Visualizer, an interactive online platform designed to bring algorithms to life through visualization. Whether you're a student, teacher, or professional, our platform provides an engaging way to explore and understand various algorithms.
 
-[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg?style=flat-square)](https://gitter.im/algorithm-visualizer)
 [![GitHub contributors](https://img.shields.io/github/contributors/algorithm-visualizer/algorithm-visualizer.svg?style=flat-square)](https://github.com/algorithm-visualizer/algorithm-visualizer/graphs/contributors)
 [![GitHub license](https://img.shields.io/github/license/algorithm-visualizer/algorithm-visualizer.svg?style=flat-square)](https://github.com/algorithm-visualizer/algorithm-visualizer/blob/master/LICENSE)
 
-Learning algorithms from text and static images is quite boring. There have been many great websites that view animations of various algorithms though, for us being coders, nothing can be more comprehensible than visualizing the actual working code.
+## Languages and Frameworks Used
+[![Languages](https://skillicons.dev/icons?i=html,css,js,react,nodejs,redux)](https://skillicons.dev)
 
-[![Screenshot](https://raw.githubusercontent.com/algorithm-visualizer/algorithm-visualizer/master/branding/screenshot.png)](https://algorithm-visualizer.org/)
 
-## Contributing
+## Key Features
+<ul> 
+<li>
+
+### Visualize algorithms from code:
+Algorithm Visualizer allows you to witness algorithms in action by visualizing code written in various programming languages. This visual approach facilitates a better understanding of algorithmic behavior..</li>
+<li>
+
+### Learn about Algorithms:
+Explore our collection of tutorials, articles, and videos that serve as valuable resources for learning about algorithms.
+</li>
+</ul>
+
+## algorithms
+In this repository, you'll find visualizations of algorithms showcased in the website's side menu. Contributions here directly impact the educational content available on the platform.   https://github.com/algorithm-visualizer/algorithms</li>
+</ul>
+
 
-If you want to ...
+## tracers
+Explore the various visualization libraries in different programming languages. These libraries extract visualization commands from code.
+https://github.com/search?q=topic%3Avisualization-library+org%3Aalgorithm-visualizer&type=Repositories</li>
+</ul>
+
+## Live Demo
+Learning an algorithm gets much easier with visualizing it. Don't get what we mean? Check it out:
+
+[**algorithm-visualizer.org**![Screenshot](https://raw.githubusercontent.com/algorithm-visualizer/algorithm-visualizer/master/branding/screenshot.png)](https://algorithm-visualizer.org/)
+
+## Contributing
 
-- **Add or improve an algorithm.**
+Our project consists of multiple repositories, each playing a crucial role in the Algorithm Visualizer ecosystem. If you're interested in contributing, check out the guidelines for the specific repository:
 
-  We have a separate repository for public algorithms. Check out the [contributing guidelines](https://github.com/algorithm-visualizer/algorithms/blob/master/CONTRIBUTING.md) in [`algorithms`](https://github.com/algorithm-visualizer/algorithms) repo.
 
-- **Improve the UI.**
+- [**`algorithm-visualizer`**](https://github.com/algorithm-visualizer/algorithm-visualizer) is a web app written in React. It contains UI components and interprets commands into visualizations. Check out [the contributing guidelines](CONTRIBUTING.md).
 
-  Check out the [contributing guidelines](https://github.com/algorithm-visualizer/algorithm-visualizer/blob/master/CONTRIBUTING.md) in this repo. The [directory structure](https://github.com/algorithm-visualizer/algorithm-visualizer/blob/master/PROJECT_DETAILS.md#algorithm-visualizer) might be helpful as well.
+- [**`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.)
 
-- **Revise the specifications of visualization libraries.**
-
-  Making changes to the specifications is often followed by updating visualization libraries for every supported language and the affected public algorithms accordingly. It is highly recommended to read the entire [project details](https://github.com/algorithm-visualizer/algorithm-visualizer/blob/master/PROJECT_DETAILS.md) and to raise an issue about your proposal before working on it.
+- [**`algorithms`**](https://github.com/algorithm-visualizer/algorithms) contains visualizations of algorithms shown on the side menu of the website.
 
-- **Fix issues in a visualization library for a specific langauge.**
+- [**`tracers.*`**](https://github.com/search?q=topic%3Avisualization-library+org%3Aalgorithm-visualizer&type=Repositories) are visualization libraries written in each supported language. They extract visualizing commands from code.
 
-  Check out the contributing guidelines ([JavaScript](https://github.com/algorithm-visualizer/tracers.js/blob/master/CONTRIBUTING.md), [C++](https://github.com/algorithm-visualizer/tracers.cpp/blob/master/CONTRIBUTING.md), and [Java](https://github.com/algorithm-visualizer/tracers.java/blob/master/CONTRIBUTING.md)) in the repo of the visualization library.
+Ready to contribute? Explore the repositories and become part of the Algorithm Visualizer community!
diff --git a/app/backend.js b/app/backend.js