Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/atulmy/fullstack-graphql

🌈 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.
https://github.com/atulmy/fullstack-graphql

database es6 expressjs fullstack-javascript graphql graphql-client graphql-schema graphql-server javascript learn-by-examples mysql nodejs react redux sequelizejs

Last synced: 28 days ago
JSON representation

🌈 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.

Awesome Lists containing this project

README 

        
![fullstack-graphql](https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/mix/dev-logos.png)



# Fullstack GraphQL



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.



## 📝 Features

- [x] List thoughts

- [x] Add thought

- [x] Delete thought

- [x] View single thought



## ▶️ Running

- Clone repo `git clone [email protected]:atulmy/fullstack-graphql.git fullstack-graphql`

- Install NPM modules API `cd api` and `npm install`

- Install NPM modules Webapp `cd web` and `npm 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 API `cd api` and `npm start`, browse GraphiQL at http://localhost:8000/

- Run Webapp `cd web` and `npm start`, browse web at http://localhost:3000/



### Sample API logs

```

[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.

```



## 📸 Screenshots

![screenshot](http://atulmy.com/atulmy.com/attachments/images/fullstack-graphql.gif?v=0.1)



Video: [MOV](http://atulmy.com/atulmy.com/attachments/images/fullstack-graphql.mov)



## 🏗 Core Structure

    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



## 📘 Guides

### API

- 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 the `models` object in `/api/src/models/index.js`

  - Copy `/api/src/schema/thoughts` to `/api/src/schema/users` and modify `type.js`, `resolvers.js` and `fields/query.js` and `fields/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`



### Webapp

- Adding new Module (Eg: Users):

  - Create folder `users` under `/web/src/components/`

  - Create your Container and Resusable components under `/web/src/components/users`

  - Create `api` folder under `/web/src/components/users`

  - Add `actions.js` where all your Redux Action Types and Actions will reside (refer `/web/src/components/thoughts/api/actions.js`)

  - Add `state.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 to `routes` object in `/web/src/setup/routes.js` (eg `user: { list: '/list' }`)

  - Edit `/web/src/components/App.js` and add the route entry

  

## Sample GraphQL Queries

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



    

        

            

                
Query - Get List


                

query {

  thoughts {

    id,

    name,

    thought

  }

}

                


            

            

                
Response


                

{

  "data": {

    "thoughts": [

      {

        "id": 1,

        "name": "Arya Stark",

        "thought": "A girl has no name"

      },

      {

        "id": 2,

        "name": "Jon Snow",

        "thought": "I know nothing"

      }

    ]

  }

}

                


            

        

        

        

            

                
Query - Get by Param


                

query {

  thought(id: 1) {

    id,

    name,

    thought

  }

}

                


            

            

                
Response


                

{

  "data": {

    "thought": {

      "id": 1,

      "name": "Arya",

      "thought": "A girl has no name"

    }

  }

}

                


            

        

        

        

            

                
Mutation - Create


                

mutation {

  thoughtCreate(

    name: "Tyrion Lannister", 

    thought:"I drink and I know things"

  ) {

    id

  }

}

                


            

            

                
Response


                

{

  "data": {

    "thoughtCreate": {

      "id": 3

    }

  }

}

                


            

        

        

        

            

                
Mutation - Remove


                

mutation {

  thoughtRemove(id: 3) {

    id

  }

}

                


            

            

                
Response


                

{

  "data": {

    "thoughtRemove": {

      "id": null

    }

  }

}

                


            

        

    



## 💬 Community Reviews

Facebook Groups:

[NodeJS](https://www.facebook.com/groups/359999434098189/permalink/1373482582749864/) • [ReactJS](https://www.facebook.com/groups/228321510706889/permalink/676529865886049) • [GraphQL](https://www.facebook.com/groups/graphql.community/permalink/1262506487188601)



Reddit:

[NodeJS](https://www.reddit.com/r/node/comments/7965fy/simple_fullstack_graphql_application_built_with/) • [ReactJS](https://www.reddit.com/r/reactjs/comments/78mtln/simple_fullstack_graphql_application_with_react/) • [GraphQL](https://www.reddit.com/r/graphql/comments/786vpj/simple_fullstack_graphql_application/)



## ⭐ Showcase

Following projects have been built with or inspired from [fullstack-graphql](https://github.com/atulmy/fullstack-graphql/)

- Crate - Get monthly subscription of trendy clothes and accessories - [GitHub](https://github.com/atulmy/crate)

- HIRESMART - Application to streamline hiring process - [GitHub](https://github.com/atulmy/hire-smart)

- Would really appreciate if you add your project to this list by sending a PR



## Resources

- Start learning by looking at sample codes: [#LearnByExamples](https://github.com/topics/learn-by-examples)



## 🎩 Authors

- Atul Yadav - [GitHub](https://github.com/atulmy) • [Twitter](https://twitter.com/atulmy) • [LinkedIn](https://www.linkedin.com/in/atulmy/)

- Nattatorn Yucharoen - [GitHub](https://github.com/nattatorn-dev)



## 👏 Donate

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



[![Donate via PayPal](https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/mix/paypal-me-smaller.png)](http://paypal.me/atulmy)



## 📜 License

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



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