genome-browser-hnd

<div id="top"></div>      <br /> <div align="center"> <img src="src/img/logo192.png" alt="Logo" width="80" height="80"> <h3 align="center">Genome Browser</h3> <p align="center"> Genome Browser is an interative tools to visualize and analyze genomic data.  <br /> <a href="https://youtu.be/jPPwD95kp28">View Demo</a> · <a href="https://www.npmjs.com/package/genome-browser">View Package</a> . <a href="https://github.com/lebinh190998/genome-browser/issues">Report Bug</a> · <a href="https://github.com/lebinh190998/genome-browser/issues">Request Feature</a> </p> </div>  <details> <summary>Table of Contents</summary> <ol> <li> <a href="#about-the-project">About The Project</a> <ul> <li><a href="#built-with">Built With</a></li> </ul> </li> <li> <a href="#getting-started">Getting Started</a> <ul>  <li><a href="#scripts">Scripts</a></li> </ul> </li> <li><a href="#use-as-a-package">Use as a package</a></li>  <li><a href="#contributing">Contributing</a></li>  <li><a href="#contact">Contact</a></li>  </ol> </details>  ## About The Project <a href="https://www.youtube.com/watch?v=jPPwD95kp28&ab_channel=BinhLe"> <img align="center" src="src/img/cover.png" alt="Cover Image" width="800" height="400"> <img align="center" src="src/img/GB_2.png" alt="Cover Image" width="800" height="400"> </a> Inspired by "igv" and "varsome" genome browsers, I built an interactive genome browser tool from scratch using Reactjs which helps bioinformatics researchers visualize and analyze their data. <p align="right">(<a href="#top">back to top</a>)</p> ### Built With Frameworks/libraries used to bootstrap this project. - [React.js](https://reactjs.org/) - [Python](https://www.python.org/) - [C++](https://www.cplusplus.com/) - [HTML Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) - [MaterialUI](https://mui.com/) <p align="right">(<a href="#top">back to top</a>)</p>  ## Getting Started To get a local copy up and running follow these simple example steps. ### Scripts 1. Clone the repo ```sh git clone https://github.com/lebinh190998/genome-browser.git ``` 2. Install NPM packages ```sh npm install ``` 3. Run server file ```sh cd server/ ``` ```sh python genome_browser_server.py ``` 4. Run locally ```sh npm start ``` 5. Build production version (Optional) ```sh npm run build ``` <p align="right">(<a href="#top">back to top</a>)</p>  ## Use as a package <a href="https://www.npmjs.com/package/genome-browser">View Package</a> 1. Download genome-browser package ```sh npm install genome-browser ``` 2. Import into your project ```js import { GenomeBrowserApp } from 'genome-browser'; ``` 3. Use the application as a component ```js <div> <GenomeBrowserApp /> </div> ``` 4. Some useful props you can use a. Choose desired chromosome ```js <GenomeBrowserApp chrNum='chr1' /> ``` b. Choose desired human genome: 'hg38' or 'hg19' ```js <GenomeBrowserApp id='hg38' /> ``` c. Host your own server with your genome data ```js <GenomeBrowserApp serverUrl='http://3.143.149.107:8000' /> ``` d. Choose your preferred starting and ending positions: ```js <GenomeBrowserApp pos1='1287123' pos2='1287193' /> ``` <p align="right">(<a href="#top">back to top</a>)</p>  ## Contributing Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again! 1. Fork the Project 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the Branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request <p align="right">(<a href="#top">back to top</a>)</p>    ## Contact Le Binh - [@lebinh1909](https://www.linkedin.com/in/binhle19/) - lebinh190998@gmail.com Project Link: [https://github.com/lebinh190998/porfolio](https://github.com/lebinh190998/genome-browser)  <p align="right">(<a href="#top">back to top</a>)</p>