Awesome Open Source
Awesome Open Source

fullstack-graphql

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

Video: 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 • ReactJS • GraphQL

Reddit: NodeJS • ReactJS • GraphQL

⭐ Showcase

Following projects have been built with or inspired from fullstack-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

Resources

🎩 Authors

👏 Donate

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

Donate via PayPal

📜 License

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

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,533,979) 
Reactjs (75,409) 
Nodejs (55,217) 
Redux (13,299) 
Mysql (12,482) 
Database (9,737) 
Graphql (8,389) 
Expressjs (7,389) 
Es6 (5,348) 
Graphql Server (566) 
Graphql Client (288) 
Graphql Schema (155) 
Fullstack Javascript (149) 
Sequelizejs (101) 
Learn By Examples (12) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194