{"id":14975986,"url":"https://github.com/rafaesc/fullstack-graphql-angular","last_synced_at":"2025-08-10T08:42:21.728Z","repository":{"id":219983539,"uuid":"109532835","full_name":"rafaesc/fullstack-graphql-angular","owner":"rafaesc","description":"Simple Fullstack GraphQL Application with Angular CLI + Redux. API built with Typescript + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with Angular CLI + Redux + Async Middleware to access the API.","archived":false,"fork":false,"pushed_at":"2018-06-01T11:11:41.000Z","size":117,"stargazers_count":65,"open_issues_count":2,"forks_count":17,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-08T10:54:10.083Z","etag":null,"topics":["angular","angular2","expressjs","fullstack","graphql","graphql-client","graphql-schema","graphql-server","mysql","ngrx","nodejs","redux","sequelize","typescript"],"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/rafaesc.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":"2017-11-04T21:49:52.000Z","updated_at":"2024-07-09T15:06:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"00f69269-dad9-4805-806e-004c56eb8678","html_url":"https://github.com/rafaesc/fullstack-graphql-angular","commit_stats":{"total_commits":6,"total_committers":2,"mean_commits":3.0,"dds":"0.33333333333333337","last_synced_commit":"f546cd111517cc29da6221b51bceae443d305c3e"},"previous_names":["rafaesc/fullstack-graphql-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rafaesc/fullstack-graphql-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Ffullstack-graphql-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Ffullstack-graphql-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Ffullstack-graphql-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Ffullstack-graphql-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafaesc","download_url":"https://codeload.github.com/rafaesc/fullstack-graphql-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaesc%2Ffullstack-graphql-angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269698502,"owners_count":24461195,"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-10T02:00:08.965Z","response_time":71,"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":["angular","angular2","expressjs","fullstack","graphql","graphql-client","graphql-schema","graphql-server","mysql","ngrx","nodejs","redux","sequelize","typescript"],"created_at":"2024-09-24T13:53:05.646Z","updated_at":"2025-08-10T08:42:21.668Z","avatar_url":"https://github.com/rafaesc.png","language":"TypeScript","readme":"![logos](http://rafaelescala.com/assets/fullstack.png)\n\n# Fullstack GraphQL Angular\n\u003eCreated from [fullstack graphql](https://github.com/atulmy/fullstack-graphql), implement additional support for Typescript, Angular CLI and ngrx.\n\nSimple Demo Application\n\n**API** built with Node + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). \n\n**WebApp** built with Angular CLI + Redux + Async Middleware.\n\nWritten in Typescript using Babel + Angular CLI.\n\n## 📝 Features\n- [x] List thoughts\n- [x] Add thought\n- [x] Delete thought\n- [x] View single thought\n\n## ▶️ Running\n- Clone repo `git clone git@github.com:rafaesc/fullstack-graphql-angular.git fullstack-graphql-angular`\n- Install NPM modules API `cd api` and `npm install`\n- Install NPM modules Webapp `cd webapp` and `npm install`\n- Modify `/api/src/config/database.json` for database credentials\n- Modify `/api/src/config/config.json` for API port (optional)\n- Modify `/webapp/.env` for webapp port (optional)\n- Run API `cd api`, `npm run build` and `npm start`, browse GraphQL at http://localhost:3000/\n- Run Webapp `cd webapp` and `npm start`, browse webapp at http://localhost:4200/\n\n### Sample API logs\n```\n[nodemon] starting `babel-node src/index.js --presets es2015,stage-2`\nSETUP - Connecting database...\nSETUP - Loading modules...\nSETUP - GraphQL...\nSETUP - Syncing database tables...\nINFO - Database connected.\nINFO - Database sync complete.\nSETUP - Starting server...\nINFO - Server started on port 3000.\n```\n\n## 📸 Screenshots\n![screenshot](http://rafaelescala.com/assets/fullstack.gif?v=0.2)\n\n## 🏗 Core Structure\n    fullstack-graphql-angular\n      ├── api (api.example.com)\n      │   ├── src\n      │   │   ├── config\n      │   │   ├── models\n      │   │   ├── schema\n      │   │   ├── setup\n      │   │   └── index.js\n      │   │\n      │   └── package.json\n      │\n      ├── webapp (example.com)\n      │   ├── public\n      │   ├── src\n      │   │   └── app\n      │   │       ├──@core\n      │   │       ├──@shared\n      │   │       ├──pages\n      │   │       └──app.module.ts\n      │   │\n      │   └── package.json\n      │\n      ├── .gitignore\n      └── README.md\n\n## 📘 Guides\n### API\n- Adding new Module (Eg: Users):\n  - Copy `/api/src/models/thought.ts` to `/api/src/models/user.ts` and modify the file for table name and respective fields\n  - Add an entry to the `models` object in `/api/src/models/index.ts`\n  - Copy `/api/src/schema/thoughts` to `/api/src/schema/users` and modify `type.ts`, `resolvers.ts` and `fields/query.ts` and `fields/mutations.ts`\n  - Import `/api/src/schema/users/fields/query.ts` in `/api/src/schema/query.ts` and add user to the fields\n  - Import `/api/src/schema/users/fields/mutations.ts` in `/api/src/schema/mutations.ts` and add user to the fields\n  - To activate these changes do `cd api`, `npm run build` and `npm start` \n\n### Webapp\n- Adding new Module (Eg: Users):\n  - Create folder `users` under `/webapp/src/app/pages/`\n  - Create your Module and Component under `/webapp/src/app/pages/users`\n  - Add `users.action.ts` where all your Redux Action Types and Actions will reside (refer `/webapp/src/app/@shared/store/actions/users.action.ts`)\n  - Add `users.reducer.ts` where all your respective Reducers will recide (refer `/webapp/src/@shared/store/reducers/users.reducer.ts`)\n  - Add `users.service.ts` where all your respective Services will recide (refer `/webapp/src/@shared/services/users.service.ts`)\n  - Add `users.effect.ts` where all your respective Effects will recide (refer `/webapp/src/@shared/store/reducers/users.effect.ts`)\n  - Import the module state in `/webapp/src/@shared/store/` to make it avaliable to the app\n  - Import the Users Effect in `/webapp/src/@core/core.module.ts`\n  - Encapsulate all your User related code in `/webapp/src/app/pages/users`\n  - Adding new Route (Eg: `/users`):\n  - Add a new entry to `PAGES_ROUTES` object in `/webapp/src/app/pages/pages.routing.ts`\n  \n## Sample GraphQL Queries\nThese queries are generated on client side using `queryBuilder()` helper defined in `/webapp/src/app/@shared/utils/helpers.ts`\n\n\u003ctable width=\"100%\" style=\"width: 100%\"\u003e\n    \u003ctbody\u003e\n        \u003ctr valign=\"top\"\u003e\n            \u003ctd width=\"50%\" style=\"width: 50%\"\u003e\n                \u003cp\u003eQuery - Get List\u003c/p\u003e\n                \u003cpre\u003e\nquery {\n  thoughts {\n    id,\n    name,\n    thought\n  }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n            \u003ctd width=\"50%\" style=\"width: 50%\"\u003e\n                \u003cp\u003eResponse\u003c/p\u003e\n                \u003cpre\u003e\n{\n  \"data\": {\n    \"thoughts\": [\n      {\n        \"id\": 1,\n        \"name\": \"Arya Stark\",\n        \"thought\": \"A girl has no name\"\n      },\n      {\n        \"id\": 2,\n        \"name\": \"Jon Snow\",\n        \"thought\": \"I know nothing\"\n      }\n    ]\n  }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\u003c/tr\u003e\n        \u003ctr valign=\"top\"\u003e\n            \u003ctd\u003e\n                \u003cp\u003eQuery - Get by Param\u003c/p\u003e\n                \u003cpre\u003e\nquery {\n  thought(id: 1) {\n    id,\n    name,\n    thought\n  }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003cp\u003eResponse\u003c/p\u003e\n                \u003cpre\u003e\n{\n  \"data\": {\n    \"thought\": {\n      \"id\": 1,\n      \"name\": \"Arya\",\n      \"thought\": \"A girl has no name\"\n    }\n  }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\u003c/tr\u003e\n        \u003ctr valign=\"top\"\u003e\n            \u003ctd\u003e\n                \u003cp\u003eMutation - Create\u003c/p\u003e\n                \u003cpre\u003e\nmutation {\n  thoughtCreate(\n    name: \"Tyrion Lannister\", \n    thought:\"I drink and I know things\"\n  ) {\n    id\n  }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003cp\u003eResponse\u003c/p\u003e\n                \u003cpre\u003e\n{\n  \"data\": {\n    \"thoughtCreate\": {\n      \"id\": 3\n    }\n  }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\u003c/tr\u003e\n        \u003ctr valign=\"top\"\u003e\n            \u003ctd\u003e\n                \u003cp\u003eMutation - Remove\u003c/p\u003e\n                \u003cpre\u003e\nmutation {\n  thoughtRemove(id: 3) {\n    id\n  }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003cp\u003eResponse\u003c/p\u003e\n                \u003cpre\u003e\n{\n  \"data\": {\n    \"thoughtRemove\": {\n      \"id\": null\n    }\n  }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n","funding_links":[],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaesc%2Ffullstack-graphql-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafaesc%2Ffullstack-graphql-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaesc%2Ffullstack-graphql-angular/lists"}