brandonarmand / binari Goto Github PK

Interactive code editor with a live binary tree visual designed to teach new developers the fundamentals of Data Structures.

Home Page: https://binari.dev

License: MIT License

JavaScript 66.28% HTML 0.96% Dockerfile 0.08% SCSS 32.68%

p5js react javascript binary-tree reactjs fundamentals canvas html5 educational tutorial

binari's Introduction

Binari v0.9.0

Interactive code editor with a live binary tree visual designed to teach new developers the fundamentals of data structures and algorithms.

Site Navigation

Home - Basic introduction to the application.
Playground - The primary learning route. Includes the code editor and canvas.
About - Application description w/ github API integration for contributor info.

Built With

React - Front-End Framework.
P5 - Canvas editor.
Material UI Pro - Design System.

Contributing

Anyone can help. We welcome first-time contributors, as well as experienced contributors.

There is plenty to do for both developers and designers of every skill level. Check out the issues, or pitch your own ideas.

Starting points.

New to open-source? I suggest fixing a spelling error or try doing a first-timers-only issue.
Expert on all things binary tree? Try building a lesson.
Designer? Don't be shy, we could use some work with our designs.

Rules

Read the rules!
Issues tagged with first-timers-only are reserved for new contributors. Let them have a chance.
Each pull request should only introduce a single update at a time. Do not reference multiple issues that are unrelated to one-another.
Attempt to match the coding style of the project.
Adhere to the Code of Conduct, outlined below.

Setup and Contributing Changes

Fork the repo into your GitHub account (available in the top right corner).
Clone the forked repo.

git clone https://github.com/<yourgithubaccount>/Binari.git

Navigate to the Binari directory and create/switch to a new branch.

cd Binari
git checkout -b <branch-name>

Make changes to files. To see the changes you are making reflected in the application, run

npm install
npm start

Build the project.

Add the edited files and commit your changes.

git add <files>
git commit -m "<add message describing your changes>"

Push the changes to the remote repo.

git push -u origin <branch-name>

In the future, you can simply push to this branch by running git push.

Navigate back to your forked version of the project, where GitHub will ask if you would like to open a Pull Request. Create a PR, adding a description of your changes, the purpose of the changes, and a link to the issue you are solving.
Your PR will be reviewed by other members, who will either approve the merge or request changes.

Contributors

Made with contrib.rocks.

Stargazers

Code of Conduct

CODE_OF_CONDUCT.md

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

binari's People

Contributors

Stargazers

Watchers

Forkers

aguerrero gigirubi xsntrck agustinmessina justinegb maciejblawat alti21 valotn angelagomba davidohanlon deejay9424 shwethapadhu lilbond nemo0433 utkarsh2524992 hrishibawane webobite jpettett mqshaikh8 shivamgupta2017 georgecog nkaty omarshezan max0nyshchenko vsan626 goosenjuice shrman007658 vbanda28 adityasharma911 vinamra2009 guy-black symaticvisuals ankitboghra harikrishnabiyyala narasimha1997 felizj17 ram170 sangitachavan39 thexdev akanksha-anand99 zenvega arjungrover amrut182 rivkitoib rachpchan technophile-04 shakyapeiris wadedesir mpmadhavig eric-filishtiner balajianbalagan sohamkatdare bskumawat09 onnhyd manas-tiwari cypher1002 shanu79 ashish93-mrx ivanigabrovsky ankusht2307 autecht coffeeandteaa selfejji anniemichel proksimacentauri ckim77 imlakshaychauhan rahuldas6009 itsafnanalam thealonemusk danielfrancisolivieri trickstyle89 iiloni-umd krishh16 kamwatts katerib zacharyd97 moscode ayush-dabas pengviddev leewaldrich12 adityatrivedi007 fuegolito musmanilyas pratik-050 rielash24 thatpranav thackermahima deepanshimarsha rakshith2001 raushan0303 b-anand18 arjunpras ziggy4567 susbhh shivangbhawsar ggps2002 prithvi2226 ishitg pattyburke99

binari's Issues

Add Call-To-Action button to landing page

What needs to be done.

Include a new simple button under the header that will route to the playground.

Why

Something simple for the user to quickly get started with their coding.

How

Use react-router and the material Ui button component that routes to the playground. Make the button pop and stand-out.

Running script before each commit to auto format and test

What needs to be done.

Writing a script to run before each commit to automatically:
- Run lint:fix to ensure that files are being formatted correctly
- Run tests to ensure that behavior of code is validated

Why

Sometimes we forget to run tests or fix linter issues after working on the code, good to have an automated way to do all of this because we are lazy and are eager to work on next task 😄.

How

Using Husky and git hooks (pre-commit) to run script when committing changes
More about Husky

The console could be made vertically resizable.

Presently, the console is not vertically resizable. Also, the default height of the console component is really small and may scrolling through the console component could be tiresome especially when the output of code to be displayed is large.

Optimize the p5.js

What needs to be done.

As of now, the calculations for the Binary tree positioning happens in the render code for the canvas. This is very poor design on my part, but I was aiming for an MVP. If the code gets improved, then we can include animations!

Why

If we attempt to animate the canvas, the visuals flicker.

How

First, the p5 code will need to be calculated once and the result added to an array or object with the cords stored inside. Then during the render, just display the array/obj items per frame, rather than constantly doing the calculations.

DeepScan & Lighthouse Tuning and Fixes

What needs to be done.

As the app progresses and evolves, issues arise. DeepScan scores the application by the amount of warnings and errors displayed by ESLint. The goal here is to remove as many errors that appear as possible to keep the code clean and to keep the score good.

Web.dev also scores the site based on Performance, Accessibility, Best Practice, and SEO. The report for Binari.dev can be found here. If you find anything to do which can improve the scores, feel free to give it a shot and I will generate a new report to display on this issue.

How

For DeepScan

Read the warnings here or run npx eslint . to view the warnings/errors.

For Lighthouse

Follow to tips mentioned here or do what you think is best for the app.

Empty states are not handled in about page contributors card

What needs to be done?
Handle empty states in contributors card

Why?
There is an instance in contributors card where the user has done 0 deletions. The empty state is not handled properly and hence it is visible as '0' in the card. Have attached a picture below:

How?
Writing a method which returns if the div should be rendered or not

The project description, documentation and home page states "dynamic programming" which is a misleading term.

What needs to be done.

Dynamic programming can be changed to programming or data structures.

Why

Dynamic programming is a programming approach for optimization without repeating or recalculating already calculated values. The project in no way demonstrates Dynamic programming. Hence it is irrelevant and misleading to use Dynamic Programming in the project description, documentation and home page.

How

Read the documentation, about and home page of the project and interpret term Dynamic programming's relevance in the project's context.

Quick tutorial

What needs to be done.

Once the playground is opened, a one-step tutorial should be displayed.

lessons.

More will be added. If you have a lesson idea that is not on here yet, you are welcome to add it.

Who can help

Anyone. If you think you can contribute to the development on a lesson, go ahead.

How do I build a lesson?

Each lesson should clearly describe the chapter's method through pseudo-code with thorough explanations on how and why every step is happening. It should be possible for a new developer to dive in and build the method using nothing but the lesson's explanation.

There is a very precise structure for creating a lesson.

Binari\src\views\Playground\chapters is where every lesson is laid out.

..\one
....\defaultCode.js
....\index.js
....\lesson.js
..\zero
....\defaultCode.js
....\index.js
....\lesson.js
..\index.js

Every chapter will have have it's own folder, and get referenced in index.js

import zero from './zero'
import one from './one'

export default [
    zero,
    one
]

lesson.js will be rendered in markdown
defaultCode.js will be wrapped in a string
index.js will reference these files.

When a new folder is added to Binari\src\views\Playground\chapters\index.js, it will automatically get added to the directory in the playground through this code.

This will not needed to be changed to add a lesson.

import chapter from './chapters'
const [page, setPage] = useState(0);
const [currentCode, setCode] = useState(beautify(chapter[page].defaultCode));
...
{chapter.map((el,i)=> <tr onClick={()=>changePage(i)} style={{background: page === i && "#222"}}><td>{i}</td><td>{el.name}</td></tr>)}

Hide Jumbotron Text on Other Page

What needs to be done.

Hide or change the header text when on a page other than the landing page.

Why

It seem pointless to have. It would be much more fitting to have it display the current page that the user is on with a small description of the page. The jumbotron can also be completely hidden similar to the Playground page.

How

There are functions to check the current route, but if that doesn't work, the content section can be moved up to cover the jumbotron section.

Design terminals.

What needs to be done.

Design the console and error screen to be more like an actual terminal.

Why

To look nice.

How

Suggestions:

Change font
Add line numbers
Add the current directory (fake it)
possibly use another code editor that is disabled and just fill the code with the error/console logs.

Add an expand/hide button on the lesson screen

What needs to be done.

A button somewhere in the lesson screen to expand/hide the lesson quickly. It would probably fit best in the top right region.

Why

To quickly and seamlessly allow the user to work in the playground.

How

It will probably be easy to add an icon with font-awesome and use CSS

.icon {
    position: absolute;
    top: ??;
    right: ??;
}

and implement JS/React to manipulate the height of the region. You can also find a better solution.

Design Work

Design Changes

There are a lot of little design issues that could use some touch-up; such as, margin spacing, empty landing page, playground sizing, and probably so much more. This is the issue for all design work, please tag it on PRs related to design changes.

This will be an on-going issues, do whatever you think needs to be done to Binari. I will take any suggestion that you think will help with the overall design.

Anything that changes the UI/UX too drastically will be reviewed by @gigirubi

Suggestions:

Use the GitHub API to display card information on the About page.

What needs to be done.

Use the GitHub API to display all the contributors in the contributors section of the About page.

Why

For future developers to get credit!

How

The API integration is already implemented. You will need to make sure you have a GitHub Access_Token, and put that within an environment variable named REACT_APP_TOKEN.

The loop already exists, so just use the Material Design cards to style the user information.

Create Code Verification

What needs to be done.

We need to add a way to verify that the user's code meets the lessons demands. Lessons like 'Insertion' should check that that the Node.insert() method works as it should.

Why

This is the final step of the MVP. Once completed, v1.0 should be just about ready. This will allow users to know that their code works correctly and provide a way to move seamlessly from on lesson to another.

How

We already have manual checks in Binari\src\views\Playground\Playground.js
where this code snippet is found:

    BinaryTree.insert(25)
    BinaryTree.insert(15)
    BinaryTree.insert(35)
    BinaryTree.insert(75)
    BinaryTree.insert(85)
    BinaryTree.insert(65)

We need to move this into the lesson folder, probably into a new tests.js file where we will contain every check for each individual lesson.
Then figure out the best way to incorporate the checks inside the playground file.
Lastly, a way to un-intrusively display that the check failed/passed needs to be added since the user will want to see the binary tree at all times.

Notes

This will be a lot of work, so separate small commits may be the best way to go about working on this.

About page crashes on load

What needs to be done.

On occasion, the About page fails to loads and crashes

Why

The API call seems to provide data the fails during rendering.

How

You will need to get your own Github API key and add it to the project for the about page's API call. Then debug why it is crashing and find a solution.

Fix bug when running code through hotkey

What needs to be done.

When the user presses (ctr+enter), the code runs; however, it will also enter a new line, that needs to be fixed.

SPECS:
Mac - Safari, and Firefox.

Why

The hotkey doesn't pause input.

How

One solution that might work could be by pausing text input when control is being held.

Create Hotkeys

What needs to be done.

Implement hotkeys for the code editor.

Why

It will allow for a better user-flow.

How

Start with the basic VSCode hotkeys, and expand from there.

Starting point:

Replace Landing page video

What needs to be done.

Find a better video related to binary trees

Why

Seems more appropriate

How

A video of a mock or real interview based on binary trees sounds like the best option.

There is a grammatical mistake in chapter one(insertion)

Grammatica mistake in chapter one(insertion)

In bullet number 4 i.e

This process is repeated until the we reach to a leaf node(i.e. node with no child).

This should be

This process is repeated until ~~the~~ we reach to a leaf node(i.e. node with no child).

Word "the" must be removed from bullet 4

Binary tree crashes when a null value is inserted to the tree.

What needs to be done.

Fix issue with null values breaking the canvas

Why

It is a vital issue that breaks the page.

How

When a null value is added to the tree in some way

let tree = new Node(50)
tree.insert(null)
tree.insert(15)
tree.insert(35)
tree.insert(75)
tree.insert(85)
tree.insert(65)

The visual on the right will crash, and the page will need to be refreshed. Find out the cause.

Add Color Scheme to Directory

What needs to be done.

Add a square box to the right side of a lesson within the directory, in the future it will represent the difficulty of the lesson.

Why

So that the user knows what they are getting themselves into.

How

For added the color, just edit the <li>
For the conditional coloring, add a difficulty value in the lesson object and include that within the <li> rendering.

Move functions to helper.js files

What needs to be done.

In every view, there are helper function being used and taking up space. They will need to be moved to a new file (within the same folder) and referenced.

Why

Clean up the codebase.

How

Binari\src\views\Playground\
...chapters\
...components\
...playground.js
...helpers.js

probably something like this.

Create Logo

What needs to be done.

Make a new logo that stands out

Why

To be recognizable to make the landing page pop.

How

Change the Binari text to something unique, and create an image to stand next to it.