{"id":24317892,"url":"https://github.com/thepatrickniyo/super-vite","last_synced_at":"2025-09-27T02:30:57.303Z","repository":{"id":42069037,"uuid":"428006136","full_name":"thepatrickniyo/super-vite","owner":"thepatrickniyo","description":"⚡ A vite react typescript boilerplate with pre-configured sass, redux-tool-kit, tailwind, eslint, prettier \u0026 jest, i18n internalization,  Dockerfile... built in cli coming soon ⚒️","archived":false,"fork":false,"pushed_at":"2024-11-19T04:03:35.000Z","size":1708,"stargazers_count":23,"open_issues_count":6,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-10T07:21:02.668Z","etag":null,"topics":["boilerplate","dockerfile","eslint","i18n","jest-test","prettier-eslint","react","redux-devtools","sass-framework","tailwindcss","typescript","vitejs"],"latest_commit_sha":null,"homepage":"https://doc-super-vite.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thepatrickniyo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-11-14T18:20:05.000Z","updated_at":"2025-07-09T12:41:30.000Z","dependencies_parsed_at":"2025-01-16T01:27:15.795Z","dependency_job_id":"dc8d3b19-79e8-468c-a8b0-e2c0349075f8","html_url":"https://github.com/thepatrickniyo/super-vite","commit_stats":null,"previous_names":["thepatrickniyo/super-vite"],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/thepatrickniyo/super-vite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepatrickniyo%2Fsuper-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepatrickniyo%2Fsuper-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepatrickniyo%2Fsuper-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepatrickniyo%2Fsuper-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thepatrickniyo","download_url":"https://codeload.github.com/thepatrickniyo/super-vite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thepatrickniyo%2Fsuper-vite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277171438,"owners_count":25773212,"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-09-27T02:00:08.978Z","response_time":73,"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","dockerfile","eslint","i18n","jest-test","prettier-eslint","react","redux-devtools","sass-framework","tailwindcss","typescript","vitejs"],"created_at":"2025-01-17T14:27:53.706Z","updated_at":"2025-09-27T02:30:56.797Z","avatar_url":"https://github.com/thepatrickniyo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 style=\"text-align: center\"\u003eSuper Vite ⚡\u003c/h1\u003e\n A vite react typescript boilerplate with pre-configured \u003ccode\u003esass\u003c/code\u003e, \u003ccode\u003eredux-tool-kit\u003c/code\u003e, \u003ccode\u003etailwind\u003c/code\u003e, \u003ccode\u003eesLint\u003c/code\u003e \u003ccode\u003ePrettier\u003c/code\u003e, \u003ccode\u003ei18n internationalization\u003c/code\u003e \u0026amp; \u003ccode\u003eDockerfile\u003c/code\u003e... built in cli coming soon ⚒️\n \n \n This to get you ready with react vite develpment with zero configurations\n \n \n\u003cbr\u003e\n\u003cbr\u003e\n\n![Builds Workflows](https://github.com/patrickniyogitare28/super-vite/actions/workflows/superlinter.yml/badge.svg)\n\n## Documentation\n\nClick to access [The super vite documentation](https://doc-super-vite.vercel.app/)\n\n## Live demo\n\nClick to view [The super vite live demo](https://super-vite.vercel.app/)\n\n## Getting started\nClick `Use this template` to create the your own repo from the template\n\nBefore you can start developing your awesome application you need to install the project's dependencies. Make sure you have Node (\u003e= 10.13.0)\n\n\n### Development\n\nOnce all dependencies have been installed you can start development. To start a development server on [http://localhost:3000](http://localhost:3000) run:\n\n```sh\n$ npm run dev\n```\nor\n```sh\n$ yarn dev\n```\n\n### Production\n\nTo run your application in production make sure to run a build first:\n\n```sh\n$ npm run build\n```\nor\n```sh\n$ yarn build\n```\n\nAnd then start you application with a provided port number (defaults to 3000 if not provided):\n\n```sh\n$ PORT=8080 npm run start\n```\n\n\nThis will render static HTML pages into `./out`\n\n### Linters\n\nThe boilerplate provides a couple of linters to help you keep an eye on code consistency and type safety. There are three linters: one for CSS, one for TypeScript and one for type safety. You can use each of them separately using the following commands:\n\n```sh\n$ npm run lint:css\n$ npm run lint:ts\n$ npm run lint:types\n```\n\nTIP: To get the most out of your linters install the corresponding (Stylelint, TSLint) plugins for your editor or IDE\n\n**Prettier**\n\nPrettier helps you to enforce consistent (opinionated) code style. If possible, you can tell your editor to format you code when you save a file. If you are not able to do this, you can run prettier manually using:\n\n```sh\n$ npm run prettier\n```\n\n### Tests\n\nYou can write your tests using Jest and Enzyme. You can run all test with the following command\n\n```sh\n$ npm run test\n```\n\u003e To write your unite tests, add a test file under `src/__tests__`\n\n\n## Routing\nRoutes are defined under `src/config/routes`\n```js\n   {\n        path: '/',\n        name: 'Counter Page',\n        component: Counter,\n        exact: true,\n    },\n```\nThat object should be added in `routes` array, and that's all to be able to route.\n\n## Modules\n\n### TypeScript\n\nVite provides custom module resolvers.\nThis means you can use absolute imports with custom namespaces by default for the following modules:\n\nYou can define a new alias resolver in `vite.config.json` \u0026 `config-overrides.js`\n\nFor the jest to be able to recogonize the alias import, you should also define it under `jest.config.json`\n\n```js\n/* import common library */\nimport lib from '@common/\u003cfolder\u003e/\u003clib\u003e'\n/* import component */\nimport Counter from '@components/counter'\n/* import views/pages */\nimport CounterView from '@views/counter'\n/* import interface */\nimport ICounterAction from '@interfaces/ICounterActionCounter'\n/* import enum */\nimport ECounterEventType from '@enums/ECounterEventType'\n/* import layout */\nimport DashboardLayout from '@layouts/DashboardLayout'\n/* import assets */\nimport GithubIcon from '@assets/icons/github.png'\n/* import enum */\nimport ECounterEventType from '@interfaces/ECounterEventType'\n\n\n```\n\n### SCSS\n\nThe boiler plate supports scss and css module\n```js\n/*.tsx*/\nimport { classNames } from 'classnames-generics'\nimport styles from './styles.module.scss'\n\nreturn (\n    \u003cdiv className={styles.appContainer}\u003e\n      \u003cp className={classNames(styles.wrapper)}\u003eScss styling\u003c/p\u003e\n    \u003c/div\u003e\n)\n```\n```css\n/*.scss*/\n  .appContainer{\n      width: 100%;\n      .wrapper{\n          background: #ffe1ee;\n      }\n  }\n```\n\n### Tailwind\n```js\n/*.tsx*/\n...\nreturn (\n    \u003cdiv className=\"mt-2\"\u003e\n      \u003cp className=\"w-100\"\u003eScss styling\u003c/p\u003e\n    \u003c/div\u003e\n)\n```\n\n### Redux dev tool\nThe boiler plate has a configured global state management with redux dev tool.\n\n### Getting started with states\n- Define a state slice under `src/redux-slices` refer to `src/redux-slice/counter.slice.ts`\n\n- Import the slice under `src/store` and declare your reducer\n\n- To consume the state refer to `src/components/counter`\n\n```js\nimport React from 'react'\nimport { useAppDispatch, useAppSelector } from '@store/hooks'\nimport {\n    selectCount,\n    decrement,\n    increment,\n    reset,\n} from '@redux-slices/counter.slice'\nimport { ECounterEventType } from '@enums/ECounterEventType'\nimport styles from './styles.module.scss'\n\nconst CounterComponent = () =\u003e {\n    const dispatch: any = useAppDispatch()\n    const value: number = useAppSelector(selectCount)\n    const handleAction = (action: ECounterEventType) =\u003e {\n        switch (action) {\n            case ECounterEventType.DECREMENT:\n                dispatch(decrement())\n                break\n            case ECounterEventType.INCREMENT:\n                dispatch(increment())\n                break\n            case ECounterEventType.RESET:\n                dispatch(reset())\n                break\n        }\n    }\n    return (\n        \u003cdiv className={styles.counterContainer}\u003e\n            \u003cdiv className={styles.counterWrapper}\u003e\n                \u003ch2\u003e\n                    Counter: \u003clabel\u003e{value}\u003c/label\u003e\n                \u003c/h2\u003e\n                \u003cdiv className={styles.btnsWrapper}\u003e\n                    \u003cbutton\n                        onClick={() =\u003e\n                            handleAction(ECounterEventType.INCREMENT)\n                        }\n                    \u003e\n                        +\n                    \u003c/button\u003e\n                    \u003cbutton\n                        onClick={() =\u003e\n                            handleAction(ECounterEventType.DECREMENT)\n                        }\n                    \u003e\n                        -\n                    \u003c/button\u003e\n                    \u003cbutton\n                        onClick={() =\u003e handleAction(ECounterEventType.RESET)}\n                    \u003e\n                        Reset\n                    \u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default CounterComponent\n```\n\n### Todo\n The boiler plate incomming version will container a build in CLI to auto generate `components` and `views` plus connecting them to `store`\n\n### LICENSE\n[MIT LICENSED](https://github.com/PatrickNiyogitare28/super-vite/blob/master/LICENSE)\n#### Maintainers\n- patrickniyogitare28@gmail.com\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepatrickniyo%2Fsuper-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthepatrickniyo%2Fsuper-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthepatrickniyo%2Fsuper-vite/lists"}