{"id":15725837,"url":"https://github.com/ndrean/superm-v3","last_synced_at":"2026-05-11T05:48:13.983Z","repository":{"id":124426650,"uuid":"327611481","full_name":"ndrean/superm-v3","owner":"ndrean","description":"Online shop project from React tutorial / JJ with React Router \u0026 Mobx. Lazy imports \u0026 save to localStorage","archived":false,"fork":false,"pushed_at":"2021-06-08T21:14:26.000Z","size":536,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-06T06:46:06.403Z","etag":null,"topics":["mobx-react","react","react-router"],"latest_commit_sha":null,"homepage":"","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/ndrean.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":"2021-01-07T12:54:07.000Z","updated_at":"2021-06-08T21:14:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"4347fd67-9eaa-4d70-8165-e88cc371f0db","html_url":"https://github.com/ndrean/superm-v3","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/ndrean%2Fsuperm-v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrean%2Fsuperm-v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrean%2Fsuperm-v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrean%2Fsuperm-v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndrean","download_url":"https://codeload.github.com/ndrean/superm-v3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246402576,"owners_count":20771340,"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":["mobx-react","react","react-router"],"created_at":"2024-10-03T22:24:30.361Z","updated_at":"2026-05-11T05:48:13.934Z","avatar_url":"https://github.com/ndrean.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Final project React tuto with Mobx/React Router\n\nRefactored with [Mobx](https://mobx.js.org/README.html) and [React.lazy loading](https://fr.reactjs.org/docs/code-splitting.html)\n\n\u003e Note: biggest difficulty with Mobx is it's doc...\n\n## Docker\n\nInstead of running directly from host:\n\n- [\"yarn start\"] for dev mode,\n\n- or [\"yarn build\", \"http-server ./build\"] to run production mode served with `http-server`,\n\nyou can build containers served by Nginx to reuse on Mac or Linux (images have been tagged):\n\n- run the **build** version (rename \"docker-compose.build -\u003e docker-compose\") Create builder container with Node and `yarn build` the static files, then run Nginx container to serve the copied static files\n\n- run **dev** (current \"docker-compose\" runs dev mode). Docker-compose creates 2 containers on a network, one with Node/yarn serving, and one with Nginx reverse proxying, with mount binding the source code for live code changes with \u003ccode\u003eCTRL R\u003c/code\u003e\n\n## React Router\n\nok\n\n## Mobx\n\n\u003e Linting: -\u003e Imperatively use `configure` to debug \u003chttps://mobx.js.org/configuration.html#linting-options\u003e\n\nFew rules\n\n- if event `onClick`, use `action(()=\u003e handleClick)`\n\n- proxy `observer`: not 100% clear, when accessing `store.attribute` and `store.getter`, not `store.action()`...\n\n- `runInAction` vs/within `useEffect` to update ...\n\n## Saving to localStorage\n\nOn app start, the **App** component reads `store.getCartFromLS()`\n\nThe cart is saved to localStorage within a `useEffect` with `runInAction` from the **Product** component:\n\n```js\nReact.useEffect(() =\u003e {\n  runInAction(() =\u003e store.cartToLS());\n}, [store, store.cart]);\n```\n\n## TODO\n\n- what is \"reportwebvitals\"?\n\n- V4: test saving with Docker / **Redis** via **Sinatra** backend\n\n## Lazy loading\n\ndone\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndrean%2Fsuperm-v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndrean%2Fsuperm-v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndrean%2Fsuperm-v3/lists"}