Overview

About

Mathnetic is an assistive learning tool designed to help a student with cerebral palsy in their math-related endeavours. Mathnetic is designed to be a block-based editor, allowing mathematical symbols and text to be dragged to a primary workspace and be snapped together, in a very similar fashion to the popular block-based coding editor, Scratch.

Made with Love by Team Sming!!!!!!!!!

Founded by Lord Sming's Class of 2025.

Requirements

The application is centered around the idea of snapping. In other words, if a number and an arithmetic operator are brought to the main workspace, the two blocks should connect when brought close together. With this core principle in mind, we are asked to implement the following features:

• Desmos and Calculator Integration
• Long Division Support
• Changing Node Colors
• LaTeX Reference Sheet
• Placeholders for Fractions and Square Roots
• Letter Selector/Slider
• iPad Support
• Native Export & Printing Output
• Settings Menu
  • Drag Speed
  • Node Resizing
• Uploading Documents
• File Browser & Autosaving

Getting Started

1. It is recommended to use Visual Studio Code for the best real-time collaboration, but you are welcome to use any text editor or IDE you like.
2. To get started, you will need to install npm and node.js to your machine. See instructions here: https://nodejs.org/en/download
3. After installing npm and node.js, clone this GitHub repository to your system. DO NOT DOWNLOAD AS A ZIP FILE. Working together on a project like this will require some experience with Git and GitHub. Research and be sure you can confidently use the following Git commands: git config, git clone, git add ., git commit -m randomMessage, git push origin main, and git pull. ALWAYS SAVE YOUR WORK TO GITHUB, SO OTHER PEOPLE CAN WORK WHERE YOU LEFT OFF.
4. Open the project in Visual Studio Code, or navigate to the project via terminal, and run the following commands: npm install @xyflow/react and npm install react-dnd. This installs ReactFlow, the framework around which our app is built, and a drag and drop library.
5. Finally, run npm run dev inside of a terminal to start up the server and see the app in action!

Tools You Should Become Familiar With

Here's a list of software, libraries, and frameworks you should be familiar with to be successful:

• Git
• GitHub
• JavaScript
• ReactFlow
• React
• HTML5 & JSX
• CSS
• npm
• Figma