{"id":19391336,"url":"https://github.com/equimper/thinkful-workshop-react-redux-node-mongodb-webpack2","last_synced_at":"2025-04-24T00:31:47.146Z","repository":{"id":84189433,"uuid":"79647875","full_name":"EQuimper/thinkful-workshop-react-redux-node-mongodb-webpack2","owner":"EQuimper","description":null,"archived":false,"fork":false,"pushed_at":"2017-09-15T16:12:02.000Z","size":3725,"stargazers_count":12,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T10:48:16.518Z","etag":null,"topics":["boilerplate","decorators","es6","es7","eslint","flowtype","javascript","jest","pwa","react","react-redux","redux","splitting","thinkful","webpack","webpack2"],"latest_commit_sha":null,"homepage":"https://thinkful-workshop-webpack2-node-react.now.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EQuimper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-21T13:39:38.000Z","updated_at":"2018-01-30T03:31:49.000Z","dependencies_parsed_at":"2023-05-23T21:45:30.574Z","dependency_job_id":null,"html_url":"https://github.com/EQuimper/thinkful-workshop-react-redux-node-mongodb-webpack2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EQuimper%2Fthinkful-workshop-react-redux-node-mongodb-webpack2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EQuimper%2Fthinkful-workshop-react-redux-node-mongodb-webpack2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EQuimper%2Fthinkful-workshop-react-redux-node-mongodb-webpack2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EQuimper%2Fthinkful-workshop-react-redux-node-mongodb-webpack2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EQuimper","download_url":"https://codeload.github.com/EQuimper/thinkful-workshop-react-redux-node-mongodb-webpack2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250539477,"owners_count":21447315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","decorators","es6","es7","eslint","flowtype","javascript","jest","pwa","react","react-redux","redux","splitting","thinkful","webpack","webpack2"],"created_at":"2024-11-10T10:26:36.118Z","updated_at":"2025-04-24T00:31:47.137Z","avatar_url":"https://github.com/EQuimper.png","language":"JavaScript","readme":"## Stack\n\n- React\n- Redux\n- MongoDB\n- Node.JS\n- Webpack2\n- FlowTypes\n- Styled-Component\n- Service-Worker\n- App Caching\n\n## PWA TEST\n\n![](http://i.imgur.com/8UCFean.png)\n\nThe test link https://googlechrome.github.io/lighthouse/viewer/?gist=66a00c9974e7b3bb4ba1fed1cf0c07cf\n\n## Theme Color on Chrome for Android\n\n![](http://i.imgur.com/22FS2Y4l.png)\n\n## Code splitting with React-Router\n\n```js\nconst componentRoutes = {\n  component: App,\n  path: '/',\n  childRoutes: [\n    {\n      path: '/posts',\n      async getComponent(location: string, cb: Function) {\n        try {\n          const module = await import('./modules/posts/Posts');\n          cb(null, module.default);\n        } catch (e) {\n          errorLoading(e);\n        }\n      }\n    },\n    {\n      path: '/posts/:id',\n      async getComponent(location: string, cb: Function) {\n        try {\n          const module = await import('./modules/posts/SinglePost');\n          cb(null, module.default);\n        } catch (e) {\n          errorLoading(e);\n        }\n      }\n    }\n  ]\n};\n```\n\n## Service Worker\n\n```js\nif (process.env.NODE_ENV === 'production') {\n  (() =\u003e {\n    if ('serviceWorker' in navigator) {\n      navigator.serviceWorker.register('/service-worker.js');\n    }\n  })();\n  require('offline-plugin/runtime').install();\n}\n```\n\n## Styled-Component\n\n```js\nimport styled from 'styled-components';\n\nconst Card = styled.div`\n  height: 400px;\n  width: 300px;\n  background-color: #fff;\n  cursor: pointer;\n`;\n\nexport default Card;\n```\n\n## FlowTypes\n\n```js\n/** @flow */\nimport type { Post } from './Data';\n\n// POSTS\ntype FetchPostAction = {\n  type: 'FETCH_SINGLE_POST',\n  post: Post\n}\n\ntype FetchAllPostsAction = {\n  type: 'FETCH_ALL_POSTS',\n  posts: Array\u003cPost\u003e\n}\n\ntype FetchSinglePostErrorAction = {\n  type: 'FETCH_SINGLE_POST_ERROR'\n}\n\ntype SelectPostAction = {\n  type: 'SELECTED_POST',\n  id: string\n}\n\nexport type Action =\n  | FetchPostAction\n  | FetchAllPostsAction\n  | FetchSinglePostErrorAction\n  | SelectPostAction\n```\n\nhttps://thinkful-workshop-webpack2-node-react.now.sh/\n\n## Want to play with ?\n\n1. Clone the repos\n2. `npm i` or `yarn`\n3. `npm run dev:s` or `yarn dev:s` for start the server\n4. `npm run dev:c` or `yarn dev:c` for start the client\n5. `localhost:9000` gonna open in your browser by webpack\n\n## FlowTypes\n\nWhen install new packages just run `flow-typed install`\n\n## Deploy\n\nFor deploy I'm using [Now from Zeit](https://zeit.co/now) Who provided free hosting with HTTP2. I'm using a variables for the mongodb hosting. For set yours just\n\n```\nnow secret add mongodb \u003curlinkhere\u003e\n```\n\nInside the `packages.json` I have alias this is for change the name from now.\n\nJust run `yarn deploy` or `npm run deploy`\n\n## TODO\n\n- [x] Change webpack code splitting System.import for import()\n- [x] Add service worker\n- [x] Add offline caching\n- [ ] Get smaller bundle\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fequimper%2Fthinkful-workshop-react-redux-node-mongodb-webpack2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fequimper%2Fthinkful-workshop-react-redux-node-mongodb-webpack2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fequimper%2Fthinkful-workshop-react-redux-node-mongodb-webpack2/lists"}