Step-by-Step Equation Solver
An interactive, educational web application that solves mathematical equations with visual, step-by-step explanations. Designed to help students understand the logic behind algebra.
Features • Installation • Usage • Technologies • Contributing
- Infinite Practice: Generate random equations across different difficulty levels.
- Customizable Constraints: Configure integer-only results, allow fractions, or set custom ranges.
- Difficulty Levels: Choose from Easy, Medium, or Hard modes to match your learning pace.
- Visual Learning: See exactly how equations are solved, step-by-step.
- Animated Transitions: Watch terms move across the equals sign with intuitive animations (e.g., arrows showing transportation).
- Color Coding: Key terms and changes are highlighted to focus attention.
- Detailed Explanations: Each step is accompanied by a clear description of the mathematical operation performed.
- Glassmorphism UI: A sleek, modern interface with glass-like effects.
- Dark Mode: A carefully crafted dark theme that's easy on the eyes.
- Fully Responsive: Works seamlessly on both desktop and mobile devices.
- Interactive Elements: Smooth hover effects and transitions for an engaging experience.
| Setting | Description |
|---|---|
| Integer Result | Forces the result to be a whole number. |
| Fractional Results | Allows results to be fractions (e.g., 1/2, 3/4). |
| Negative Results | Enables the generation of equations with negative answers. |
| Zero Result | Allows the result to be zero. |
| Custom Range | Set minimum and maximum values for the generated result. |
| Difficulty | Select between Easy, Medium, or Hard complexity. |
-
Clone the repository
git clone https://github.com/MZRCode/matik.git
-
Navigate to the project directory
cd matik -
Install dependencies
npm install
-
Start the development server
npm run dev
Open your browser and visit http://localhost:5173 to see the application in action.
To create a production-ready build:
npm run buildTo preview the build locally:
npm run preview- Configure Settings: Use the sidebar to set your preferred difficulty and constraints.
- Generate Equation: Click the "Generate Equation" button to create a new problem.
- Reveal Answer: Click "Show Result" to see the final answer instantly.
- Learn the Method: Click "How Did We Solve It?" to walk through the solution step-by-step.
3(2x + 4) + 5 = 2(x - 1) + 7
MATiK solves this by:
- Expanding the parentheses.
- Combining constant terms.
- Moving variable terms (
$x$ ) to the left side. - Moving constants to the right side.
- Dividing both sides to isolate
$x$ . - Displaying the final result.
| Technology | Version | Purpose |
|---|---|---|
| React | 19.2.0 | UI Library |
| TypeScript | 5.9.3 | Static Typing |
| Vite | 7.2.4 | Build Tool & Dev Server |
| TailwindCSS | 4.1.18 | Utility-First Styling |
| ESLint | 9.39.1 | Code Linting |
matik/
├── public/ # Static assets
├── src/
│ ├── App.tsx # Main app & routing
│ ├── Denklemler.tsx # Equation component
│ ├── LandingPage.tsx # Landing page
│ ├── SolverPage.tsx # Solver page
│ ├── index.css # Global styles
│ └── main.tsx # Entry point
├── index.html # HTML template
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
└── vite.config.ts # Vite config
Contributions are welcome! Please follow these steps to contribute:
- Fork the repository.
- Create a Branch (
git checkout -b feature/new-solver-algorithm). - Commit your changes (
git commit -m 'feat: Add new equation solving algorithm'). - Push to the branch (
git push origin feature/new-solver-algorithm). - Open a Pull Request.
Please follow the conventional commits specification:
<type>: <description>
Types: feat, fix, docs, style, refactor, test, chore
This project is licensed under the MIT License.
If you have any questions or suggestions, feel free to contact us via Discord.
If you find this project useful, please give it a star ⭐️