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
- List thoughts
- Add thought
- Delete thought
- View single thought
▶️ Running
- Clone repo
git clone git@github.com:atulmy/fullstack-graphql.git fullstack-graphql - Install NPM modules API
cd apiandnpm install - Install NPM modules Webapp
cd webandnpm install - Modify
/api/src/config/database.jsonfor database credentials - Modify
/api/src/config/config.jsonfor API port (optional) - Modify
/web/.envfor web port (optional) - Run API
cd apiandnpm start, browse GraphiQL at http://localhost:8000/ - Run Webapp
cd webandnpm 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
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.jsto/api/src/models/user.jsand modify the file for table name and respective fields - Add an entry to the
modelsobject in/api/src/models/index.js - Copy
/api/src/schema/thoughtsto/api/src/schema/usersand modifytype.js,resolvers.jsandfields/query.jsandfields/mutations.js - Import
/api/src/schema/users/fields/query.jsin/api/src/schema/query.js - Import
/api/src/schema/users/fields/mutations.jsin/api/src/schema/mutations.js
- Copy
Webapp
- Adding new Module (Eg: Users):
- Create folder
usersunder/web/src/components/ - Create your Container and Resusable components under
/web/src/components/users - Create
apifolder under/web/src/components/users - Add
actions.jswhere all your Redux Action Types and Actions will reside (refer/web/src/components/thoughts/api/actions.js) - Add
state.jswhere all your respective Reducers will recide (refer/web/src/components/thoughts/api/state.js) - Import the module state in
/web/src/setup/store.jsto make it avaliable to the app - Encapsulate all your User related code in
/web/src/components/users
- Create folder
- Adding new Route (Eg:
/users):- Add a new entry to
routesobject in/web/src/setup/routes.js(eguser: { list: '/list' }) - Edit
/web/src/components/App.jsand add the route entry
- Add a new entry to
Sample GraphQL Queries
These queries are generated on client side using queryBuilder() helper defined in /web/src/setup/helpers.js
? 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
- Start learning by looking at sample codes: #LearnByExamples
? Authors
? Donate
If you liked this project, please donate to support it ❤️
? License
Copyright (c) 2017-18 Atul Yadav http://github.com/atulmy
The MIT License (http://www.opensource.org/licenses/mit-license.php)