{"id":21619923,"url":"https://github.com/ayeshaashfaq12/interactive_calculator","last_synced_at":"2026-04-16T11:31:38.483Z","repository":{"id":259858228,"uuid":"859076903","full_name":"AyeshaAshfaq12/Interactive_Calculator","owner":"AyeshaAshfaq12","description":"This interactive calculator lets users draw equations or diagrams and receive instant solutions using Gemini AI. Built with ReactJS, Tailwind CSS, and Python, it’s a modern, responsive tool for quick and accurate problem-solving. Perfect for students, educators, and tech enthusiasts!","archived":false,"fork":false,"pushed_at":"2024-10-28T10:02:10.000Z","size":65,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-24T21:31:59.657Z","etag":null,"topics":["ai","canvas","educationaltool","gemini","imageprocessing","interactive-calculator","interactivecalculator","machinelearning","problem-solving","python","reactjs","real-time","tailwindcss","user-interface","webapplication"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AyeshaAshfaq12.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-18T03:30:29.000Z","updated_at":"2024-10-28T10:08:39.000Z","dependencies_parsed_at":"2024-10-28T13:50:08.282Z","dependency_job_id":null,"html_url":"https://github.com/AyeshaAshfaq12/Interactive_Calculator","commit_stats":null,"previous_names":["ayeshaashfaq12/interactive_calculator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyeshaAshfaq12%2FInteractive_Calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyeshaAshfaq12%2FInteractive_Calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyeshaAshfaq12%2FInteractive_Calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AyeshaAshfaq12%2FInteractive_Calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AyeshaAshfaq12","download_url":"https://codeload.github.com/AyeshaAshfaq12/Interactive_Calculator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244277771,"owners_count":20427397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","canvas","educationaltool","gemini","imageprocessing","interactive-calculator","interactivecalculator","machinelearning","problem-solving","python","reactjs","real-time","tailwindcss","user-interface","webapplication"],"created_at":"2024-11-24T23:10:21.358Z","updated_at":"2026-04-16T11:31:38.406Z","avatar_url":"https://github.com/AyeshaAshfaq12.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive Calculator\n\n**Interactive Calculator** is an innovative web application that enables users to draw complex equations, problems, or diagrams on a canvas and receive real-time solutions using the power of AI. This project leverages ReactJS and Tailwind CSS on the frontend and Python for backend processing, with integration of Gemini AI for deep analysis and solution generation.\n\n## Features\n\n- **Hand-drawn Problem Recognition**: Users can draw equations or diagrams, and the AI will interpret the content.\n- **AI-powered Solutions**: Utilizes Gemini AI to process and solve complex math problems, diagrams, and equations.\n- **Responsive \u0026 Modern UI**: Built with ReactJS and Tailwind CSS, offering an intuitive and responsive interface.\n- **Optimized Request Processing**: A well-structured file system in the backend ensures efficient handling of multiple requests with reduced load on each request cycle.\n\n## Tech Stack\n\n- **Frontend**: [ReactJS](https://reactjs.org/), [Tailwind CSS](https://tailwindcss.com/)\n- **Backend**: Python, [Gemini AI Integration](https://www.gemini.com/)\n- **Other Tools**: Canvas for user-drawn input\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Project Structure](#project-structure)\n- [Best Practices](#best-practices)\n- [Contributing](#contributing)\n- [License](#license)\n\n---\n\n## Getting Started\n\nThese instructions will help you set up and run the project on your local machine for development and testing purposes.\n\n### Prerequisites\n\n- **Node.js** (v14 or higher)\n- **Python** (v3.8 or higher)\n- [Gemini AI API Key](https://www.gemini.com/) (required for backend integration)\n\n### Installation\n\n#### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/yourusername/interactive-calculator.git\ncd interactive-calculator\n```\n\n#### 2. Frontend Setup\nNavigate to the `frontend` directory and install dependencies.\n\n```bash\ncd frontend\nnpm install\n```\n\n#### 3. Backend Setup\nNavigate to the `backend` directory, set up a virtual environment, and install dependencies.\n\n```bash\ncd backend\npython -m venv venv\nsource venv/bin/activate  # For Windows use `venv\\Scripts\\activate`\npip install -r requirements.txt\n```\nAdd your Gemini API key to the environment file:\n```bash\necho \"GEMINI_API_KEY=your_api_key_here\" \u003e .env\n```\n\n#### 4. Run the Application\n**Frontend**: In the frontend directory, start the React app.\n```bash\nnpm start\n```\n**Backend**: In the backend directory, run the Python server.\n```bash\npython app.py\n```\nThe application should now be running at `http://localhost:3000` with the backend server handling requests.\n\n\n## Usage\n\n1. Draw your equation, problem, or diagram on the canvas.\n2. Submit the drawing, and the AI backend will analyze it using Gemini AI.\n3. Receive the solution or suggested answer directly on the screen.\n\n\n## Project Structure\nThe project is divided into two main directories: `frontend` and `backend`.\n\n```graphql\ninteractive-calculator/\n├── frontend/           # ReactJS + Tailwind CSS frontend\n│   ├── public/\n│   └── src/\n│       ├── components/ # Reusable UI components\n│       ├── hooks/      # Custom hooks for state management\n│       └── utils/      # Helper functions and utilities\n│\n└── backend/            # Python backend\n    ├── api/            # API routes and controllers\n    ├── models/         # Data models and Gemini AI integration\n    └── utils/          # Helper functions\n```\nThis structure maintains modularity and reduces the load on each request cycle, ensuring a scalable, efficient architecture.\n\n\n## Best Practices\n- **Code Consistency**: Consistent code style throughout frontend and backend files.\n- **Optimized File Structure**: Maintains separation of concerns for clear readability and maintainability.\n- **Error Handling**: Comprehensive error handling for seamless user experience.\n- **Security**: Sensitive information like the Gemini API key is stored in environment variables.\n\n  \n## Contributing\nWe welcome contributions! Please follow these steps:\n1. Fork the repository.\n2. Create your branch: `git checkout -b feature/YourFeature`.\n3. Commit your changes: `git commit -am 'Add new feature'`.\n4. Push to the branch: `git push origin feature/YourFeature`.\n5. Open a Pull Request.\n\n## Contact\nFor questions or support, please contact `Ayesha Ashfaq`.\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayeshaashfaq12%2Finteractive_calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayeshaashfaq12%2Finteractive_calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayeshaashfaq12%2Finteractive_calculator/lists"}