- npm install
- start up mongo, create 'collection' Product
- npm run dev <- runs webpack bundler and hot reloading
- POST to localhost:3000/api/products
{
"id": 1,
"style": "G200",
"description": "Best Tshirt in the world"
}
- Download graphiql, go to localhost:3000/graphql, and query products
query{
aProduct(id: "1"){
id
style
}
}
- If you want all Products:
query{
allProducts{
id
style
description
}
}
- All the graph stuff lives in server/graph
- All mongo models live in db/models, controllers live in db/controllers
- Graphql initialization with express lives in server/init/graphql
- Server entry point is server/server.js and Application (front end) entry point is app/client.js
- There is server sided rendering the parallels are client.js and pageRender.js
- ApolloClient is hooked up at client.js
- Jest / Enzyme is installed so tests can be created
- Apollo Libraries to talk to graphql, gql libraries for server to talk to client
- Material UI for UI building
- React-Router 4 for Front-End Routing
- Express / Mongo for web framework and DB
- Mongoose for Mongo ORM
- JEST / Enzyme for test framework
- React Cosmos (testing out) for scaffolding ui components in isolated environments
- Morgan for logging http request and runtime
- Flow and Prettier for type checking and code clean up
- Webpack Hot Reloading / Middleware to hot reload front-end react components, Nodemon to do it serverside
- Collection library: Lodash, and HOC React library Recompose to manipulate prebuilt Higher order components
Goal is to create a isomorphic boilerplate around graphql / apollo / mongo / react and generate screens quickly and manipulate data. Some milestones are experimenting with data binding (adding / saving brands + colors) and others are guaging the amount of effort it takes to create a new graph model / type to resolve a new set of necessary data. Also want to gauge reactrouter 4 vs reactrouter 3.
- Create Page to navigate between different modules ( Brand, Products, Catalog)
- Create Brand Page (add, delete, update Brands)
- Add Colors to brand and remove colors from brands
- Implement Authentication (Local strategy / OAuth via PassportJS)
- Integrate Redux with Apollo to track User / Session data
- SSR for material ui in pageRender.js
- Set up TRAVISCI, and code coverage
- Set up Flow
- Githook lint-staged husky --save-dev
- Remove React-HMRE and replace with react-hot-loader
- Fix middleware for /graphiql (gets overriden by apollo ssr middleware)
- Set up dangerJS to prettify / test before opening prs
- Generate Documentation based off Pull Requests and DocumentationJS