- 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
- Note: to open web links in a new window use: ctrl+click on link
- Angular frontend uses the GraphQL module to fetch data via localhost port 4000
- GraphQL used to query a mock Engineering parts
db.js
database with field reviews of parts and comments to improve the parts supply process - 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.
- 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.
- Engineering parts are classified as critical parts or not with a Boolean
criticalPart
field. - Users can query, add, mutate (update) and delete parts, categories & field reviews
-
Angular v16 javascript framework
-
Apollo Client v3 to fetch data via GraphQL
-
Tailwind CSS v3 styles
-
Node.js v18 Javascript runtime using the Chrome V8 engine
-
GraphQL v16 API query language
-
Apollo Server v3 for unified data communications
-
uuid v9 to create RFC4122 UUIDs
- Front & Back ends:
npm i
to install dependencies - Backend:
cd Node-backend
thennpm run dev
runs backend in the development mode with auto-restart after changes - Open http://localhost:4000 to access backend Apollo GraphQL Server
- Frontend: (new terminal)
cd Angular-frontend
thennpm run start
runs frontend with auto-restart after changes - Open http://localhost:4200 to view frontend
- Frontend tested using GraphQL backend data
- Backend tested using GraphQL server Sandbox
- Backend: list of GraphQL mutations
type Mutation {
addCategory(input: AddCategoryInput!): Category!
addPart(input: AddPartInput!): Part!
addFieldReview(input: AddFieldReviewInput!): FieldReview!
deleteCategory(id: ID!): Boolean!
deletePart(id: ID!): Boolean!
deleteFieldReview(id: ID!): Boolean!
updateCategory(id: ID!, input: UpdateCategoryInput!): Category
updatePart(id: ID!, input: UpdatePartInput!): Part
updateFieldReview(id: ID!, input: UpdateFieldReviewInput!): FieldReview
}
- GraphQL query only returns the data specified, unlike REST queries that return everything
- Status: Basic Front and Backends working
- To-Do: Add CMS API or POSTgreSQL database. Add frontend queries etc styling, Tailwind cards or table for data
- N/A
- Repo created by ABateman, email:
[email protected]