{"id":13394398,"url":"https://github.com/atulmy/fullstack-graphql","last_synced_at":"2025-10-04T23:14:56.150Z","repository":{"id":47078263,"uuid":"107590287","full_name":"atulmy/fullstack-graphql","owner":"atulmy","description":"🌈  Simple Fullstack GraphQL Application. API built with Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with React + Redux to access the API. Written in ES6 using Babel + Webpack.","archived":false,"fork":false,"pushed_at":"2021-02-25T09:15:50.000Z","size":1470,"stargazers_count":1036,"open_issues_count":1,"forks_count":150,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-05-24T01:06:09.735Z","etag":null,"topics":["database","es6","expressjs","fullstack-javascript","graphql","graphql-client","graphql-schema","graphql-server","javascript","learn-by-examples","mysql","nodejs","react","redux","sequelizejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/atulmy.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":"2017-10-19T19:39:14.000Z","updated_at":"2025-05-03T17:57:39.000Z","dependencies_parsed_at":"2022-09-25T00:31:13.793Z","dependency_job_id":null,"html_url":"https://github.com/atulmy/fullstack-graphql","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/atulmy/fullstack-graphql","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-graphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-graphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-graphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-graphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atulmy","download_url":"https://codeload.github.com/atulmy/fullstack-graphql/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-graphql/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278386130,"owners_count":25978113,"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-10-04T02:00:05.491Z","response_time":63,"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":["database","es6","expressjs","fullstack-javascript","graphql","graphql-client","graphql-schema","graphql-server","javascript","learn-by-examples","mysql","nodejs","react","redux","sequelizejs"],"created_at":"2024-07-30T17:01:18.115Z","updated_at":"2025-10-04T23:14:56.132Z","avatar_url":"https://github.com/atulmy.png","language":"JavaScript","readme":"![fullstack-graphql](https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/mix/dev-logos.png)\n\n# Fullstack GraphQL\n\nSimple Demo Application\n\n**API** built with Node + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). \n\n**WebApp** built with React + Redux. \n\nWritten in ES6 using Babel + Webpack.\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:atulmy/fullstack-graphql.git fullstack-graphql`\n- Install NPM modules API `cd api` and `npm install`\n- Install NPM modules Webapp `cd web` 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 `/web/.env` for web port (optional)\n- Run API `cd api` and `npm start`, browse GraphiQL at http://localhost:8000/\n- Run Webapp `cd web` and `npm start`, browse web at http://localhost:3000/\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://atulmy.com/atulmy.com/attachments/images/fullstack-graphql.gif?v=0.1)\n\nVideo: [MOV](http://atulmy.com/atulmy.com/attachments/images/fullstack-graphql.mov)\n\n## 🏗 Core Structure\n    fullstack-graphql\n      ├── api (api.example.com)\n      │   ├── src\n      │   │   ├── config\n      │   │   ├── models\n      │   │   ├── schema\n      │   │   ├── setup\n      │   │   └── index.js\n      │   │\n      │   └── package.json\n      │\n      ├── web (example.com)\n      │   ├── public\n      │   ├── src\n      │   │   ├── components\n      │   │   ├── setup\n      │   │   └── index.js\n      │   │\n      │   ├── .env\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.js` to `/api/src/models/user.js` and modify the file for table name and respective fields\n  - Add an entry to the `models` object in `/api/src/models/index.js`\n  - Copy `/api/src/schema/thoughts` to `/api/src/schema/users` and modify `type.js`, `resolvers.js` and `fields/query.js` and `fields/mutations.js`\n  - Import `/api/src/schema/users/fields/query.js` in `/api/src/schema/query.js`\n  - Import `/api/src/schema/users/fields/mutations.js` in `/api/src/schema/mutations.js`\n\n### Webapp\n- Adding new Module (Eg: Users):\n  - Create folder `users` under `/web/src/components/`\n  - Create your Container and Resusable components under `/web/src/components/users`\n  - Create `api` folder under `/web/src/components/users`\n  - Add `actions.js` where all your Redux Action Types and Actions will reside (refer `/web/src/components/thoughts/api/actions.js`)\n  - Add `state.js` where all your respective Reducers will recide (refer `/web/src/components/thoughts/api/state.js`)\n  - Import the module state in `/web/src/setup/store.js` to make it avaliable to the app\n  - Encapsulate all your User related code in `/web/src/components/users`\n- Adding new Route (Eg: `/users`):\n  - Add a new entry to `routes` object in `/web/src/setup/routes.js` (eg `user: { list: '/list' }`)\n  - Edit `/web/src/components/App.js` and add the route entry\n  \n## Sample GraphQL Queries\nThese queries are generated on client side using `queryBuilder()` helper defined in `/web/src/setup/helpers.js`\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\n## 💬 Community Reviews\nFacebook Groups:\n[NodeJS](https://www.facebook.com/groups/359999434098189/permalink/1373482582749864/) \u0026bull; [ReactJS](https://www.facebook.com/groups/228321510706889/permalink/676529865886049) \u0026bull; [GraphQL](https://www.facebook.com/groups/graphql.community/permalink/1262506487188601)\n\nReddit:\n[NodeJS](https://www.reddit.com/r/node/comments/7965fy/simple_fullstack_graphql_application_built_with/) \u0026bull; [ReactJS](https://www.reddit.com/r/reactjs/comments/78mtln/simple_fullstack_graphql_application_with_react/) \u0026bull; [GraphQL](https://www.reddit.com/r/graphql/comments/786vpj/simple_fullstack_graphql_application/)\n\n## ⭐ Showcase\nFollowing projects have been built with or inspired from [fullstack-graphql](https://github.com/atulmy/fullstack-graphql/)\n- Crate - Get monthly subscription of trendy clothes and accessories - [GitHub](https://github.com/atulmy/crate)\n- HIRESMART - Application to streamline hiring process - [GitHub](https://github.com/atulmy/hire-smart)\n- Would really appreciate if you add your project to this list by sending a PR\n\n## Resources\n- Start learning by looking at sample codes: [#LearnByExamples](https://github.com/topics/learn-by-examples)\n\n## 🎩 Authors\n- Atul Yadav - [GitHub](https://github.com/atulmy) \u0026bull; [Twitter](https://twitter.com/atulmy) \u0026bull; [LinkedIn](https://www.linkedin.com/in/atulmy/)\n- Nattatorn Yucharoen - [GitHub](https://github.com/nattatorn-dev)\n\n## 👏 Donate\nIf you liked this project, please donate to support it ❤️\n\n[![Donate via PayPal](https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/mix/paypal-me-smaller.png)](http://paypal.me/atulmy)\n\n## 📜 License\nCopyright (c) 2017-18 Atul Yadav http://github.com/atulmy\n\nThe MIT License (http://www.opensource.org/licenses/mit-license.php)\n","funding_links":["http://paypal.me/atulmy"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatulmy%2Ffullstack-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatulmy%2Ffullstack-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatulmy%2Ffullstack-graphql/lists"}