{"id":30290355,"url":"https://github.com/open-source-labs/seeqr-web","last_synced_at":"2025-08-16T23:12:50.081Z","repository":{"id":55136845,"uuid":"327439423","full_name":"open-source-labs/SeeQR-Web","owner":"open-source-labs","description":"A web-based database analytic tool that allows a developer to compare the efficiency of different queries on a granular level to make better informed architectural decisions regarding Postgres databases at various scales.","archived":false,"fork":false,"pushed_at":"2021-01-07T19:47:36.000Z","size":13904,"stargazers_count":15,"open_issues_count":1,"forks_count":24,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-25T04:20:09.885Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/open-source-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-06T22:04:17.000Z","updated_at":"2024-02-01T00:32:31.000Z","dependencies_parsed_at":"2022-08-14T13:10:11.129Z","dependency_job_id":null,"html_url":"https://github.com/open-source-labs/SeeQR-Web","commit_stats":null,"previous_names":["open-source-labs/seeqr_web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/open-source-labs/SeeQR-Web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FSeeQR-Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FSeeQR-Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FSeeQR-Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FSeeQR-Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/open-source-labs","download_url":"https://codeload.github.com/open-source-labs/SeeQR-Web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-source-labs%2FSeeQR-Web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270781393,"owners_count":24643820,"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","status":"online","status_checked_at":"2025-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-08-16T23:12:49.426Z","updated_at":"2025-08-16T23:12:50.075Z","avatar_url":"https://github.com/open-source-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"./frontend/assets/images/logo_readme.png\" height=300/\u003e\n\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/oslabs-beta/SeeQR)\n![Release: 1.0](https://img.shields.io/badge/Release-1.0-red)\n![License: MIT](https://img.shields.io/badge/License-MIT-orange.svg)\n![Contributions Welcome](https://img.shields.io/badge/Contributions-welcome-blue.svg)\n[![Twitter](https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Ftwitter.com%2Ftheseeqr)](https://twitter.com/theseeqr)\n[![Github stars](https://img.shields.io/github/stars/oslabs-beta/SeeQR?style=social)](https://github.com/oslabs-beta/SeeQR_web)\n[theSeeQR.io](http://www.theseeqr.io)\n[theSeeQRweb.io](http://theseeqrweb.io/)\n\n\u003cp\u003e\u003cb\u003eSeeQR: \u003c/b\u003eA database analytic tool that compares the efficiency of different schemas and queries on a granular level to make better informed architectural decisions regarding SQL databases at various scales.\u003c/p\u003e\n\n\u003c/div\u003e\n\n## Table of Contents\n\n- [Beta Phase](#beta-phase)\n- [Getting Started](#getting-started)\n- [Built With](#built-with)\n- [Interface \u0026 Features](#interface-\u0026-features)\n  - Schema import methods\n  - Query input\n  - Data\n  - History\n  - Results\n  - Compare\n  - Visualized Analytics\n- [Application Architecture and Logic](#application-architecture-and-logic)\n- [Core Team](#core-team)\n\n## Beta Phase\n\nSeeQR is still in BETA. Additional features, extensions, and improvements will continue to be introduced. If you encounter any issues with the application, please report them in the issues tab or submit a PR. Thank you for your interest!\n\n## Getting Started\n\nTo get started on contributing to this project:\n\n1. Fork or clone this repository\n2. Npm install\n   1. Run `npm install` for application-specific dependencies.\n   2. Run global install for: `'typescript'`.\n3. Install [Live Sass Compile](https://github.com/ritwickdey/vscode-live-sass-compiler) VSCode extension (settings are configured in the .vscode file in this repo), or set up your preferred Sass compiler\n4. To run application during development\n   1. `npm run dev` to launch SeeQR in localhost 3000 and webpack-dev-server.\n\n## Built With\n\n- [React](https://reactjs.org/)\n- [React-Hooks](https://reactjs.org/docs/hooks-intro.html)\n- [Typescript](https://www.typescriptlang.org/)\n- [Chart.js](https://github.com/chartjs)\n- [Faker.js](https://github.com/Marak/faker.js)\n- [CodeMirror](https://codemirror.net/)\n- [AWS](https://aws.amazon.com/)\n- [PostgreSQL](https://www.postgresql.org/)\n- [ElephantSQL](https://www.elephantsql.com/)\n\n## Interface \u0026 Features\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/web_app_interface.png\" width=800/\u003e\u003cp\u003eThe whole interface in a nutshell\u003c/p\u003e\n\u003c/div\u003e\n\n- Input Schema\n\n  - New schemas can be imported into the application by pasting the contents of your `.sql` file into the query panel on the UI of the app.\n  - Once you've imported the contents of the `.sql` file, you're ready to make queries!\n  \u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./frontend/assets/images/schema_input.png\"/\u003e\n  \u003c/div\u003e\n\n- Query input\n\n  - The center panel is where the query input text field is located, utilizing CodeMirror for SQL styling.\n  - Users have option to execute a tracked or untracked query—simply check the box and provide a label to identify the query in later comparisons against other queries.\n  - Toggle the submit button in the bottom left to send the query to the selected database.\n  \u003cbr /\u003e\u003cbr /\u003e\n  \u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./frontend/assets/images/query_demo.gif\" width=600/\u003e\n  \u003c/div\u003e\n  \u003cbr /\u003e\u003cbr /\u003e\n\n- Data\n\n  - The data table displays data returned by the inputted query.\n  \u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./frontend/assets/images/data.png\" width=600/\u003e\u003cbr /\u003e\u003cbr /\u003e\n  \u003c/div\u003e\n\n- History\n\n  - The history table shows the latest queries the user submitted irrespective of the database.\n  - The history table also displays the total rows returned by the query and the total query execution time.\n  \u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./frontend/assets/images/history.png\" width=600/\u003e\n  \u003c/div\u003e\n\n- Compare\n\n  - The comparison table is flexible to the user’s preferences.\n  - The user selects which queries they want to compare side by side from the ‘Add Query Data’ drop down.\n  - They can add and remove queries as they see fit.\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/comparisons.png\" width=600/\u003e\n\u003c/div\u003e\n\n- Visualized Analytics\n\n  - Upon each query execution, query runtime displays under the \"Query Label vs Query Runtime\" graph. Graph automatically interpolates as results enumerate.\n  - User may toggle on specific query analytics results with the Comparisons panel to compare query performances.\n  - Graph will be organized on x-axis by label, and colored by schema.\n\n## Application Architecture and Logic\n\n\u003cb\u003eSandbox Environment\u003c/b\u003e\u003cbr/\u003e\nSeeQR streamlines the process of instantiating postgres databases by leveraging elephantSQL to import a copy of your database on the web. This means instances of databases are automatically created every time new schema data is inputted via the SeeQR GUI.\n\n\u003cb\u003eQuery Runtime Comparisons\u003c/b\u003e\u003cbr/\u003e\nOne of the key features of SeeQR is to compare the efficiency of executing user-inputted queries. The SeeQR web app allows for you to see and compare the runtimes for each query you've tracked.\n\n\u003cb\u003eDatabase Architecture\u003c/b\u003e\u003cbr/\u003e\nAs of right now, the SeeQR web app allows for one database to be inputted and queried. We intend to add functionality for multiple schemas to be added for comparison purposes at a later time.\n\n\u003cb\u003eSession-based Result Caching\u003c/b\u003e\u003cbr/\u003e\nThe outcome results from each query, both retrieved data and analytics, are stored in the application’s state, which can be viewed and compared in table and visualizer formats. Note that these results’ persistence is session-based and will be cleared upon quitting the application.\n\n## Core Team\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/catherinechiu.png\" href=\"https://github.com/catherinechiu\"/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/catherinechiu\"\u003eCatherine Chiu\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/serenakuo.png\" href=\"https://github.com/serenackuo\"/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/serenackuo\"\u003eSerena Kuo\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/franknorton.png\"/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/FrankNorton32\"\u003eFrank Norton\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/mercerstronck.png\" href=\"https://github.com/mercerstronck\"/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/mercerstronck\"\u003eMercer Stronck\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/muhammadtrad.png\" href=\"https://github.com/muhammadtrad\"/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/muhammadtrad\"\u003eMuhammad Trad\u003c/a\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\u003c/table\u003e\n\n\u003ctable align=\"center\"\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/justinduryagri.png\" href=\"https://github.com/justinD-A\" width=180/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/justinD-A\"\u003eJustin Dury-Agri\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/caseyescovedo.png\" href=\"https://github.com/caseyescovedo\" width=180/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/caseyescovedo\"\u003eCasey Escovedo\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/samfrakes.png\" href=\"https://github.com/frakes413\" width=180/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/frakes413\"\u003eSam Frakes\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/caseywalker.png\" href=\"https://github.com/cwalker3011\" width=180/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/cwalker3011\"\u003eCasey Walker\u003c/a\u003e\n\u003c/td\u003e\n\u003c/table\u003e\n\n\u003ctable align=\"center\"\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/chrisakinrinade.png\" href=\"https://github.com/chrisakinrinade\" width=180/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/chrisakinrinade\"\u003eChris Akinrinade\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/jameskolotouros.png\" href=\"https://github.com/dkolotouros\" width=180/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/dkolotouros\"\u003eJames Kolotouros\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/jennifercourtner.png\" href=\"https://github.com/jcourtner\" width=180/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/jcourtner\"\u003eJennifer Courtner\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg src=\"./frontend/assets/images/katieklochan.png\" href=\"https://github.com/kklochan\" width=180/\u003e\u003cbr/\u003e\n\u003ca href=\"https://github.com/kklochan\"\u003eKatie Klochan\u003c/a\u003e\n\u003c/td\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-source-labs%2Fseeqr-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-source-labs%2Fseeqr-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-source-labs%2Fseeqr-web/lists"}