{"id":27266233,"url":"https://github.com/tharunkumarra/molecule-visualiser","last_synced_at":"2025-04-11T08:44:55.356Z","repository":{"id":238879441,"uuid":"797817277","full_name":"TharunKumarrA/Molecule-Visualiser","owner":"TharunKumarrA","description":"Visualization of Hybrid Organic compounds with graphs","archived":false,"fork":false,"pushed_at":"2025-02-28T05:36:15.000Z","size":514,"stargazers_count":10,"open_issues_count":10,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T12:55:45.677Z","etag":null,"topics":["ai","chemistry","course-project","graphs","hybridization","javascript","nodejs","ploty","semester-4","visualization"],"latest_commit_sha":null,"homepage":"https://molecule-visualiser.vercel.app","language":"JavaScript","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/TharunKumarrA.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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-05-08T15:17:38.000Z","updated_at":"2025-02-28T05:36:19.000Z","dependencies_parsed_at":"2024-12-24T21:17:57.097Z","dependency_job_id":"6549e6e7-924e-44a2-bc19-04ba5257baa9","html_url":"https://github.com/TharunKumarrA/Molecule-Visualiser","commit_stats":null,"previous_names":["tharunkumarra/molecule-visualiser-dsa"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TharunKumarrA%2FMolecule-Visualiser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TharunKumarrA%2FMolecule-Visualiser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TharunKumarrA%2FMolecule-Visualiser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TharunKumarrA%2FMolecule-Visualiser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TharunKumarrA","download_url":"https://codeload.github.com/TharunKumarrA/Molecule-Visualiser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248362748,"owners_count":21091190,"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","chemistry","course-project","graphs","hybridization","javascript","nodejs","ploty","semester-4","visualization"],"created_at":"2025-04-11T08:44:54.752Z","updated_at":"2025-04-11T08:44:55.344Z","avatar_url":"https://github.com/TharunKumarrA.png","language":"JavaScript","readme":"\n# Molecule Visualizer\n\n\nMolecule Visualizer is an innovative data structures and algorithms initiative designed to represent and manipulate chemical molecules in a three-dimensional space using graph data structures.\nEach atom is represented as a node, and each bond as an edge, allowing for a flexible and dynamic representation of molecular structures.\nThe construction of the molecular graph employs Breadth-First Search (BFS) to ensure comprehensive and systematic node traversal, facilitating the accurate assembly of the molecule. Depth-First Search (DFS) is implemented for cycle detection, crucial for identifying rings and complex substructures within the molecule.\n\n## Key Features\n\n* Detailed information sharing about the constructed molecules **Physical** and **Chemical** Properties.\n* Bond angle calculations and molecular geometry analysis.\n* Algorithmic efficiency for real-time updates and smooth interactions.\n\n\n\n## Tech Stack\n\n**Client:** React JS, Material UI, Tailwind CSS\n\n**Server:** Node JS, Express JS\n\n**Plotting:** Plotly JS\n\n\n## Contributing\n\nContributions are always welcome!\n\nSee `contributing.md` for ways to get started.\n\nPlease adhere to this project's `code of conduct`.\n\n# Local Development:\n\n## Steps to get the Application Running at Local:\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/TharunKumarrA/Molecule-Visualiser.git\ncd Molecule-Visualiser\n```\n\n### 2. Install Backend Dependencies\n\n```bash\ncd Backend\nnpm install\ncd ..\n```\n\n### 3. Install Frontend Dependencies\n\n```bash\ncd molecule-visualiser\nnpm install\ncd ..\n```\n\n### 4. Configure Environment Variables\n\n\u003e [!Important]\n\u003e Just for the sake of security, the `.env` file is not included in the repository.\nCreate a `.env` file in the root directory of the project and add the following key-value pairs. Replace placeholders with actual values. Ensure there are no spaces or quotes, and values are entered as plain text.\n\n```env\n# Server Port Number\nPORT=\u003cPORT_IN_WHICH_YOU_WANT_THE_BACKEND_TO_RUN_IN\u003e\n\n# API Key for Gemini 1.5 AI Model.\nAPI_KEY=\u003cYOUR_SECRET_KEY\u003e\n```\n\n\n### 5. Start the Backend Server\n\n```bash\ncd Backend\nnodemon App.js\n```\n\n### 6. Start the Frontend Server\n\n```bash\ncd molecule-visualiser\nnpm run start\n```\n## API Utilized\n\n[Gemini 1.5 Flash](https://ai.google.dev/gemini-api/docs/models/gemini#gemini-1.5-flash)\n\n\n## API Documentation\n\n[API-Reference](/Backend/README.md)\n\n\n## Developers\n\n- `Tharun Kumarr A`\n- `Naganathan M R`\n- `Lowkik Sai P`\n- `Praveen K`\n- `Bharath S`\n- `Hariprasath M`\n\n## Future Ideas for **Molecule Visualizer**:\n\n* **Validation** of the compounds that has be entered by the user.\n* **Extending** the available hybridisation of molecules to **sp3d** and **sp3d2**.\n* **Allowing** for various type of elements available in the periodic table. \n\n## FAQ\n\n#### How to build the Molecule ?\n\n* **Add Atoms:** Navigate to the menu bar at the right side of the page. Initially you need to add all the atoms with respective **hybridisations** that are present in your molecule using the **Add Atoms** menu.\n\n* **Add Bond:** Menu in the right side will be comprising a option named **Add Bond**. Using this option select respective two atoms and the type of bond `Single, Double, Triple`. Then add bond will connect those two atoms in the 3d space.\n\n#### What are these Examples ?\n\n* These are prebuilt molecule templates for visualizing. These include the most common **Organic** and **Inorganic** compounds for fast visualization.\n\n\n#### How to find if a Molecule is Cyclic/Acyclic ?\n\n* Once you constructed the molecule using the option available, you can see the **Check Cycle** information in the bottom of the menu bar present at the right. This indicates whether the constructed molecule is **Cyclic** or **Acyclic**.\n\n#### How get properties of constructed moelcule ?\n\n* Once you have constrcuted the molecule, use the option **Get Data** available at the top left. This option when trigerred whill fetch you all the **Chemical** and **Physical** Properties of the molecule that has been constrcuted.\n\n```mermaid\ngraph TD\n    A[Start] --\u003e B[Add Atoms]\n    B --\u003e C[Add Bond]\n    C --\u003e D{Cycle Detection}\n    D --\u003e|Cyclic| E[Identify Rings]\n    D --\u003e|Acyclic| F[Proceed]\n    E --\u003e F\n    F --\u003e G[Calculate Bond Angles]\n    G --\u003e H[Analyze Molecular Geometry]\n    H --\u003e I[Get Physical/Chemical Properties]\n    I --\u003e J[Display Results]\n    J --\u003e K[Real-time Updates]\n    K --\u003e L[End]\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftharunkumarra%2Fmolecule-visualiser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftharunkumarra%2Fmolecule-visualiser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftharunkumarra%2Fmolecule-visualiser/lists"}