{"id":18614766,"url":"https://github.com/andrewjbateman/angular-graphql-api","last_synced_at":"2026-04-18T02:07:20.772Z","repository":{"id":96858581,"uuid":"422965648","full_name":"AndrewJBateman/angular-graphql-api","owner":"AndrewJBateman","description":":clipboard: Frontend: Angular used with GraphQL and Apollo Client to view the backend Engineering Parts data set Backend: Node.js + GraphQL used with Apollo Server and GraphQL schema to execute queries on a data set","archived":false,"fork":false,"pushed_at":"2023-10-28T10:49:04.000Z","size":2101,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-17T01:34:29.579Z","etag":null,"topics":["apollo","apollo-server","database","graphql","node","nodejs","resolvers","schema","uuid","uuid-generator"],"latest_commit_sha":null,"homepage":"","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/AndrewJBateman.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":"2021-10-30T18:52:02.000Z","updated_at":"2023-10-28T10:50:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"e8327456-cda7-41a0-9a57-c9d6ec166f03","html_url":"https://github.com/AndrewJBateman/angular-graphql-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/angular-graphql-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-graphql-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-graphql-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-graphql-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-graphql-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/angular-graphql-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fangular-graphql-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31953517,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":["apollo","apollo-server","database","graphql","node","nodejs","resolvers","schema","uuid","uuid-generator"],"created_at":"2024-11-07T03:26:56.046Z","updated_at":"2026-04-18T02:07:20.756Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: Angular GraphQL API\n\n* Frontend: Angular used with GraphQL and Apollo Client to view the backend Engineering Parts data set\n* Backend: Node.js + GraphQL used with Apollo Server and GraphQL schema to execute queries on a data set\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/angular-graphql-api?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-graphql-api?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-graphql-api?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-graphql-api?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular GraphQL API](#zap-angular-graphql-api)\n  * [:page\\_facing\\_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal\\_strength: Technologies](#signal_strength-technologies)\n  * [:floppy\\_disk: Setup](#floppy_disk-setup)\n  * [:wrench: Testing](#wrench-testing)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status, Testing \\\u0026 To-Do List](#clipboard-status-testing--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file\\_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* Angular frontend uses the GraphQL module to fetch data via localhost port 4000\n* GraphQL used to query a mock Engineering parts `db.js` database with field reviews of parts and comments to improve the parts supply process\n* This was an idea of mine to link humdrum parts depots/maintenance to social media-like commenting from field personnel to flag up any problems with parts or their documentation.\n* Based on my time on engineering sites, where maintenance, spare parts, tools and related warehousing and manhours is big budget. Project costing was based on the weight of the modifications so this was vital data, e.g. weight of cables and cable-trays/cable-ladders.\n* Engineering parts are classified as critical parts or not with a Boolean `criticalPart` field.\n* Users can query, add, mutate (update) and delete parts, categories \u0026 field reviews\n\n## :camera: Screenshots\n\n![Image](./imgs/list.png)\n![Image](./imgs/mutate-addCategory.png)\n\n## :signal_strength: Technologies\n\n* [Angular v16](https://angular.io/) javascript framework\n* [Apollo Client v3](https://www.npmjs.com/package/@apollo/client) to fetch data via GraphQL\n* [Tailwind CSS v3](https://tailwindcss.com/) styles\n\n* [Node.js v18](https://nodejs.org/) Javascript runtime using the [Chrome V8 engine](https://v8.dev/)\n* [GraphQL v16](https://graphql.org/) API query language\n* [Apollo Server v3](https://www.apollographql.com/docs/apollo-server/getting-started/) for unified data communications\n* [uuid v9](https://www.npmjs.com/package/uuid) to create RFC4122 UUIDs\n\n## :floppy_disk: Setup\n\n* Front \u0026 Back ends: `npm i` to install dependencies\n* Backend: `cd Node-backend` then `npm run dev` runs backend in the development mode with auto-restart after changes\n* Open [http://localhost:4000](http://localhost:4000) to access backend Apollo GraphQL Server\n* Frontend: (new terminal) `cd Angular-frontend` then `npm run start` runs frontend with auto-restart after changes\n* Open [http://localhost:4200](http://localhost:4200) to view frontend\n\n## :wrench: Testing\n\n* Frontend tested using GraphQL backend data\n* Backend tested using GraphQL server Sandbox\n\n## :computer: Code Examples\n\n* Backend: list of GraphQL mutations\n\n```javascript\n type Mutation {\n  addCategory(input: AddCategoryInput!): Category!\n  addPart(input: AddPartInput!): Part!\n  addFieldReview(input: AddFieldReviewInput!): FieldReview!\n  deleteCategory(id: ID!): Boolean!\n  deletePart(id: ID!): Boolean!\n  deleteFieldReview(id: ID!): Boolean!\n  updateCategory(id: ID!, input: UpdateCategoryInput!): Category\n  updatePart(id: ID!, input: UpdatePartInput!): Part\n  updateFieldReview(id: ID!, input: UpdateFieldReviewInput!): FieldReview\n }\n```\n\n## :cool: Features\n\n* GraphQL query only returns the data specified, unlike REST queries that return everything\n\n## :clipboard: Status, Testing \u0026 To-Do List\n\n* Status: Basic Front and Backends working\n* To-Do: Add CMS API or POSTgreSQL database. Add frontend queries etc styling, Tailwind cards or table for data\n\n## :clap: Inspiration\n\n* [Apollo Docs: Get started with Apollo Server](https://www.apollographql.com/docs/apollo-server/getting-started/)\n\n## :file_folder: License\n\n* N/A\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: `gomezbateman@yahoo.com`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-graphql-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fangular-graphql-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fangular-graphql-api/lists"}