{"id":15064762,"url":"https://github.com/steciuk/periodic-table","last_synced_at":"2026-01-02T10:53:13.806Z","repository":{"id":257082437,"uuid":"855054128","full_name":"steciuk/periodic-table","owner":"steciuk","description":"Angular app for exploring and managing periodic table elements with filtering, editable data, and local persistence using IndexedDB.","archived":false,"fork":false,"pushed_at":"2024-09-17T12:29:29.000Z","size":1979,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T10:14:42.653Z","etag":null,"topics":["angular","angular-mater","periodic-table","tailwind"],"latest_commit_sha":null,"homepage":"https://elements.steciuk.dev","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/steciuk.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-10T08:18:02.000Z","updated_at":"2024-09-17T12:28:54.000Z","dependencies_parsed_at":"2024-09-14T19:27:51.823Z","dependency_job_id":"baa64e9f-08f6-42a7-ab9e-fe2cbd746bb0","html_url":"https://github.com/steciuk/periodic-table","commit_stats":null,"previous_names":["steciuk/periodic-table"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steciuk%2Fperiodic-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steciuk%2Fperiodic-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steciuk%2Fperiodic-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steciuk%2Fperiodic-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steciuk","download_url":"https://codeload.github.com/steciuk/periodic-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243790999,"owners_count":20348385,"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":["angular","angular-mater","periodic-table","tailwind"],"created_at":"2024-09-25T00:25:58.996Z","updated_at":"2026-01-02T10:53:13.743Z","avatar_url":"https://github.com/steciuk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"public/logo.svg\" width=200 alt=\"Logo\"\u003e\n  \u003cbr\u003e\n  Periodic Table\n\u003c/h1\u003e\n\nThis project was developed as a recruitment task for an Angular Developer position. It is a simple periodic table of elements with a search bar and a modal with detailed information about each element.\n\nJSON containing all the elements' data comes from [here](https://github.com/Bowserinator/Periodic-Table-JSON).\n\nDeployed version available at [elements.steciuk.dev](https://elements.steciuk.dev).\n\n## Task description\n- Create a view, displaying a table of elements (columns: `Number`, `Name`, `Weight`, `Symbol`).\n- Simulate downloading data during the application initialization.\n- Add a possibility to edit the fields of the selected element (popup + input fields). After confirming the changes, the table should be updated. Editing should be done without mutating the original data.\n- Add an input that allows you to filter elements by all fields. Filtering should happen after 2 seconds of inactivity.\n- As the initial data, use:\n\n```ts\nconst ELEMENT_DATA: PeriodicElement[] = [\n{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},\n{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},\n{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},\n{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},\n{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},\n{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},\n{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},\n{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},\n{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},\n{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},\n];\n```\n\n- As the components library, use [Angular Material](https://material.angular.io/).\n- Use Angular 18.2.2.\n- Data received from the mock should be stored in the application state.\n- Subscription management should be handled by the framework as much as possible. Use `.subscribe()` only when necessary.\n- Use [RxAngular](https://www.rx-angular.io/) for handling observables.\n\n## Extra features\nIn addition to the original requirements, I decided to expand on the task by adding some extra features.\n\n### Data source\nInstead of using the provided data, I decided to use [a JSON file containing all the elements](https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json). This enabled me to show more columns in the table, as well as add more details to the [elements' modal](#elements-details).\n\n### Data persistence\nAll the elements' data is stored in the browser's [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API). Changes made to the elements can be reverted by clicking the `Revert all changes` button.\n\n### Data filtering\nIn addition to regular filtering elements by all fields, I added a highlighting of the search query matches in the table and the [grid view](#grid-view).\n\n![Filter matches highlighting](screenshots/filter-matches.png)\n\n### Elements' details\nAfter clicking on an element's row in the table or on an element's cell in the grid view, a modal with detailed information about the element is displayed. The modal contains the following information:\n- name,\n- symbol,\n- atomic number,\n- atomic mass,\n- phase and category,\n- an image of the element,\n- a summary of the element,\n- a link to the element's Wikipedia page.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/element-details.png\" alt=\"Element details\" width=\"300\"\u003e\n\u003c/p\u003e\n\nClicking on the `Edit` button opens a [form](#edit-element-form) with the element's data, which can be edited and saved.\n\n### Edit element form\nThe form for editing an element's data is displayed in a modal after clicking the `Edit` button in the [element's details modal](#elements-details). The form contains the following fields:\n- name,\n- symbol,\n- atomic number,\n- phase,\n- category,\n- atomic mass,\n- summary.\n\n![Edit element form](screenshots/form.png)\n\n### Grid view\nIn addition to the table view, I added a grid view, which displays all the elements in a traditional periodic table layout. Elements are color-coded based on their phase. Clicking on an element's cell opens the [element's details modal](#elements-details).\n\n![Grid view](screenshots/grid-view.png)\n\nGrid view with highlighted search query matches:\n\n![Grid view with filter](screenshots/grid-view-filter.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteciuk%2Fperiodic-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteciuk%2Fperiodic-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteciuk%2Fperiodic-table/lists"}