Repository files navigation

Simple Demo Application

API built with Node + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL).

WebApp built with React + Redux.

Written in ES6 using Babel + Webpack.

• List thoughts
• Add thought
• Delete thought
• View single thought

• Clone repogit clone git@github.com:atulmy/fullstack-graphql.git fullstack-graphql
• Install NPM modules APIcd api andnpm install
• Install NPM modules Webappcd web andnpm install
• Modify/api/src/config/database.json for database credentials
• Modify/api/src/config/config.json for API port (optional)
• Modify/web/.env for web port (optional)
• Run APIcd api andnpm start, browse GraphiQL athttp://localhost:8000/
• Run Webappcd web andnpm start, browse web athttp://localhost:3000/

[nodemon] starting `babel-node src/index.js --presets es2015,stage-2`SETUP - Connecting database...SETUP - Loading modules...SETUP - GraphQL...SETUP - Syncing database tables...INFO - Database connected.INFO - Database sync complete.SETUP - Starting server...INFO - Server started on port 3000.

Video:MOV

fullstack-graphql  ├── api (api.example.com)  │   ├── src  │   │   ├── config  │   │   ├── models  │   │   ├── schema  │   │   ├── setup  │   │   └── index.js  │   │  │   └── package.json  │  ├── web (example.com)  │   ├── public  │   ├── src  │   │   ├── components  │   │   ├── setup  │   │   └── index.js  │   │  │   ├── .env  │   └── package.json  │  ├── .gitignore  └── README.md

• Adding new Module (Eg: Users):
  • Copy/api/src/models/thought.js to/api/src/models/user.js and modify the file for table name and respective fields
  • Add an entry to themodels object in/api/src/models/index.js
  • Copy/api/src/schema/thoughts to/api/src/schema/users and modifytype.js,resolvers.js andfields/query.js andfields/mutations.js
  • Import/api/src/schema/users/fields/query.js in/api/src/schema/query.js
  • Import/api/src/schema/users/fields/mutations.js in/api/src/schema/mutations.js

• Adding new Module (Eg: Users):
  • Create folderusers under/web/src/components/
  • Create your Container and Resusable components under/web/src/components/users
  • Createapi folder under/web/src/components/users
  • Addactions.js where all your Redux Action Types and Actions will reside (refer/web/src/components/thoughts/api/actions.js)
  • Addstate.js where all your respective Reducers will recide (refer/web/src/components/thoughts/api/state.js)
  • Import the module state in/web/src/setup/store.js to make it avaliable to the app
  • Encapsulate all your User related code in/web/src/components/users
• Adding new Route (Eg:/users):
  • Add a new entry toroutes object in/web/src/setup/routes.js (eguser: { list: '/list' })
  • Edit/web/src/components/App.js and add the route entry

These queries are generated on client side usingqueryBuilder() helper defined in/web/src/setup/helpers.js

query {  thoughts {    id,    name,    thought  }}

{  "data": {    "thoughts": [      {        "id": 1,        "name": "Arya Stark",        "thought": "A girl has no name"      },      {        "id": 2,        "name": "Jon Snow",        "thought": "I know nothing"      }    ]  }}

query {  thought(id: 1) {    id,    name,    thought  }}

{  "data": {    "thought": {      "id": 1,      "name": "Arya",      "thought": "A girl has no name"    }  }}

mutation {  thoughtCreate(    name: "Tyrion Lannister",     thought:"I drink and I know things"  ) {    id  }}

{  "data": {    "thoughtCreate": {      "id": 3    }  }}

mutation {  thoughtRemove(id: 3) {    id  }}

{  "data": {    "thoughtRemove": {      "id": null    }  }}

Facebook Groups:NodeJS •ReactJS •GraphQL

Reddit:NodeJS •ReactJS •GraphQL

Following projects have been built with or inspired fromfullstack-graphql

• Crate - Get monthly subscription of trendy clothes and accessories -GitHub
• HIRESMART - Application to streamline hiring process -GitHub
• Would really appreciate if you add your project to this list by sending a PR

• Start learning by looking at sample codes:#LearnByExamples

• Atul Yadav -GitHub •Twitter •LinkedIn
• Nattatorn Yucharoen -GitHub

If you liked this project, please donate to support it ❤️

Copyright (c) 2017-18 Atul Yadavhttp://github.com/atulmy

The MIT License (http://www.opensource.org/licenses/mit-license.php)