{"id":30558048,"url":"https://github.com/ShadOoW/web-starter-kit","last_synced_at":"2025-08-28T08:04:08.865Z","repository":{"id":38411371,"uuid":"198405854","full_name":"ShadOoW/web-starter-kit","owner":"ShadOoW","description":"An opinionated starter kit with styled-system, graphql-hooks, mobx and nextjs (PWA)","archived":false,"fork":false,"pushed_at":"2023-01-04T21:56:26.000Z","size":4029,"stargazers_count":17,"open_issues_count":31,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T22:46:47.723Z","etag":null,"topics":["boilerplate","graphql-client","i18next","mobx","nextjs","pwa","react","rtl","server-side-rendering","styled-components","styled-system"],"latest_commit_sha":null,"homepage":"https://web-starter-kit-nextjs.herokuapp.com/","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/ShadOoW.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}},"created_at":"2019-07-23T10:15:33.000Z","updated_at":"2021-10-09T21:09:53.000Z","dependencies_parsed_at":"2023-02-02T21:16:11.502Z","dependency_job_id":null,"html_url":"https://github.com/ShadOoW/web-starter-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ShadOoW/web-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShadOoW%2Fweb-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShadOoW%2Fweb-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShadOoW%2Fweb-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShadOoW%2Fweb-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShadOoW","download_url":"https://codeload.github.com/ShadOoW/web-starter-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShadOoW%2Fweb-starter-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272466723,"owners_count":24939457,"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","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","graphql-client","i18next","mobx","nextjs","pwa","react","rtl","server-side-rendering","styled-components","styled-system"],"created_at":"2025-08-28T08:02:13.029Z","updated_at":"2025-08-28T08:04:08.856Z","avatar_url":"https://github.com/ShadOoW.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp class='shields' align=\"center\"\u003e\n  \u003c!-- https://shields.io/ --\u003e\n  \u003ca\n    href=\"https://circleci.com/gh/ShadOoW/web-starter-kit/tree/master\"\n    alt=\"CircleCI\"\n    aria-label=\"Open CircleCI build page\"\n  \u003e\n    \u003cimg alt=\"Open CircleCI build page\" src=\"https://img.shields.io/circleci/build/github/ShadOoW/web-starter-kit/master?style=for-the-badge\u0026logo=circleci\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- http://heroku-shields.herokuapp.com/ --\u003e\n  \u003ca\n    href=\"https://web-starter-kit-nextjs.herokuapp.com/\"\n    alt=\"Heroku\"\n    aria-label=\"Open Demo application\"\n  \u003e\n    \u003cimg alt=\"Open demo application\" src=\"https://img.shields.io/badge/heroku-up-brightgreen.svg?style=for-the-badge\u0026logo=heroku\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- http://heroku-shields.herokuapp.com/ --\u003e\n  \u003ca href=\"#\" aria-label=\"Not a real link\"\u003e\n    \u003cimg alt=\"Current version of NextJs\" src=\"https://img.shields.io/github/package-json/dependency-version/ShadOoW/web-starter-kit/next?style=for-the-badge\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- https://dependabot.com/ --\u003e\n  \u003ca href=\"https://dependabot.com/\" aria-label=\"Not a real link\"\u003e\n    \u003cimg alt=\"Current version of NextJs\" src=\"https://api.dependabot.com/badges/status?host=github\u0026repo=ShadOoW/web-starter-kit\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3\u003e\u003ca href=\"https://web-starter-kit-nextjs.herokuapp.com/\" alt=\"Heroku\"\u003eDemo\u003c/a\u003e\u003c/h3\u003e\n\n# Starter Kit\n\nA starter kit for a next js project.\n\n## Motivation\n\nI love react, but I also love pages that load fast (static sites), this is my attempt at getting the best of both worlds (or as much as possible).\n\nEnter nextjs with SSR and Hydration.\n[Read More](https://medium.com/better-programming/next-js-react-server-side-rendering-done-right-f9700078a3b6) if you are unfamiliar with the idea.\n\nNote that for maximum performance, you may want to look at [Partial hydration](https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5) techniques, and remove some dependencies.\n\n## CSS\n\nFrom my experience working as frontend dev, CSS is always the black sheep of the web stack, most people underestimate it and tend to avoid learning it, it doesn't help that browser encourage you to write bad CSS, \"if it works, then it most be correct\" is the dominant mindset in most teams.\n\nCSS is not simple nor is it boring, it is fun and alive, new tools and techniques are always emerging, without a basic understanding of the fundamentals, this techniques will not help you write better css.\n\nThe fundamental struggle in CSS is always the same, we need to write code that makes sense to humans, to allow maintainability, but we need to write code that is performent to speed up the time it takes for the page to load on the user's device.\n\nOne good news though is that not every website needs aggressive CSS optimization, most of the time we do have room for improving maintainability.\n\nMany patterns have emerged to solve this fundamental struggle:\n\n### Atomic CSS (ex: [https://acss.io/](https://acss.io))\n\nThis technique is one of the best when writing CSS as CSS, by creating a class for each CSS property, we can reuse code everywhere, it also improves readability of HTML\n\n```HTML\n\u003cdiv class='box'\u003e\n    Hello\n\u003c/div\u003e\n```\n\nvs\n\n```HTML\n\u003cdiv class='flex flex-align-center flex-jusfity-center'\u003e\n    Hello\n\u003c/div\u003e\n```\n\nAs a developer I can tell what is the layout of the div in the second example just by looking at the HTML, while in the first example I would need to find the `.box` class to get the same information.\n\nWe could use a scale (0, 5px, 10px, 20px...) to standardize spaces and allow css reusability (padding-0, padding-0-5, padding-1, padding-2...), but for this to work, the designer and the programmer need to be fully synced and work hand in hand, which is not always possible.\n\nThis technique also supports media queries.\n\n```HTML\n\u003cdiv class='none flex-m'\u003e\n    This div will have display: none, on mobile and display: flex on medium and above\n\u003c/div\u003e\n```\n\nThis is possible, because media queries are usually standardized by most designers.\n\nFinally if for some reason something can't be atomic, then you can always use good old css, because atomic css will improve performance as long as the property is used twice or more in the same page, you can also mix and match `\u003cdiv class='menu flex'\u003e`\n\n```CSS\n.flex{display:flex}\n```\n\nThis class has 19 chars, which is already better than using `display:flex` twice (20 chars).\n\n### CSS in JS\n\nCSS in JS is trying to solve a new problem, namely CSS encapsulation, recently browsers and client side view libraries have embraced the concept of components, either as a standard, or simulated with javascript.\n\nThe problem with ShadowDom encapsulation (standard) is that it does it job properly, shadow dom component are fully encapsulated, but we do actually still want global css, for exmple, an `\u003cinput\u003e` reset should be set only once per website.\n\nSimulated encapsulation works by automatically generating a unique ID that is then added to the component and the css, to simulate the desired behavior, this is more flexible as we can still use css the normal way, imagine you are using a third party library that asks you to add a css file to your index.html, with the simulated approach, you can still do that.\n\nOn the topic of optimization/maintainability, CSS in JS can lead to some bad code if the developer doesn't have a good understanding of CSS, but if used in the right way, theoratically they should be no difference from manually optimized CSS, as any optimization done by a human could technically be done by a transpiler, the transpiler could in theory detect opportunities for optimization and create reusable classes, as the technology matures, this should reach the point where it makes no sense to do optimization at the developer level, similar to how we trust typescript to generate efficient javascript code.\n\n### Styled System\n\nCSS in JS, is not just about writing css in a javascript file, it is a new way of thinking that opens new possibilities, and this is the reason it is worth the effort to learn, once our CSS becomes Javascript, anything is possible (imagine sass's varibles/mixins but even better). Instead of just writing our CSS and Component as 2 independent blocks of code, we can make our CSS fully part of the components by taking advantage of component's props, default props, typechecking and so on....\n\nWhat if instead of doing this:\n\n```JSX\nimport styled from 'styled-components';\n\nconst Box = styled.button`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 2rem;\n`\nconst MyComponent = () =\u003e\n    \u003cBox\u003eHello\u003c/Box\u003e\n```\n\nWe did this:\n\n```JSX\nimport { Flex }  from 'layout';\n\nconst MyComponent = () =\u003e\n    \u003cFlex alignItems='center' justifyContent='center' px='2rem'\u003e\n        Hello\n    \u003c/Flex\u003e\n```\n\nInstead of just writing css as needed, we can write reusable components that can be used for layouting, typography...\n\nWe could use booleans to enable specific behaviors, the component's state could be used to style our jsx.\n\n```JSX\nimport { Text }  from 'typography';\n\nconst MyComponent = () =\u003e\n    \u003cText bold capitalize error={hasError}\u003eHello\u003c/Text\u003e\n```\n\nStyled system can also handle variants.\n\n```JSX\nimport { Button }  from 'common';\n\nconst MyComponent = () =\u003e\n    \u003cButton size='small'\u003eHello\u003c/Button\u003e\n```\n\n### Conclusion\n\nI initially had some reserve toward CSS in JS, that made me want to stick to my battle tested patterns, but after I discovered Style System, I managed to overcome all my initial assumptions and I came to realize the benefits and especially the potential of this new approach, I hope I was able to share with you some of my enthusiasm.\n\n### Mobx\n\nImplemented based on this repo \u003ca href=\"https://github.com/borekb/nextjs-with-mobx\"\u003enextjs-with-mobx\u003c/a\u003e\n\nWork in Progress...\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FShadOoW%2Fweb-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FShadOoW%2Fweb-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FShadOoW%2Fweb-starter-kit/lists"}