{"id":22994359,"url":"https://github.com/donadam2/react-language-router-v5","last_synced_at":"2025-08-13T22:31:38.199Z","repository":{"id":49315264,"uuid":"341769812","full_name":"DonAdam2/react-language-router-v5","owner":"DonAdam2","description":"Adds localization to the URL of react router using i18next and react-router-dom v5","archived":false,"fork":false,"pushed_at":"2025-01-06T12:34:57.000Z","size":3063,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T07:22:07.603Z","etag":null,"topics":["i18next","react","react-router-dom-v5","scss","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/DonAdam2.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,"zenodo":null}},"created_at":"2021-02-24T03:41:04.000Z","updated_at":"2025-01-06T12:35:00.000Z","dependencies_parsed_at":"2023-11-09T13:47:21.531Z","dependency_job_id":"f8c7a61a-9f57-4c79-98ae-878945395993","html_url":"https://github.com/DonAdam2/react-language-router-v5","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/DonAdam2/react-language-router-v5","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-language-router-v5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-language-router-v5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-language-router-v5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-language-router-v5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DonAdam2","download_url":"https://codeload.github.com/DonAdam2/react-language-router-v5/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-language-router-v5/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270329119,"owners_count":24565771,"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-13T02:00:09.904Z","response_time":66,"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":["i18next","react","react-router-dom-v5","scss","webpack"],"created_at":"2024-12-15T05:17:57.915Z","updated_at":"2025-08-13T22:31:37.902Z","avatar_url":"https://github.com/DonAdam2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Custom language router (react router dom v5):\n\n- The main purpose of this project is to create a localized react router.\n- It shows you how to utilize route guards\n- It uses [react-i18next](https://www.npmjs.com/package/react-i18next) package for translation\n\n## It has the following route guards:\n\n- Private route guard =\u003e protect the given route based on a token.\n- Public route guard =\u003e used for public routes and authentication routes (ex: login, signup, ...etc) {if authenticated it will redirect the user to the home page}\n- Restricted route guard =\u003e protect the given route based on a token, and a list of permissions (can be an array or a string).\n- Restricted section =\u003e protect the given section based on a list of permissions (can be an array or a string).\n\n## Prerequisites:\n\n- nodeJS \u003e 14.X.X or Docker\n\n## Installing / Getting Started:\n\n### Development (locally):\n\n- Clone repo =\u003e `git clone git@github.com:react-custom-projects/webpack-react-boilerplate.git`\n- `cd webpack-react-boilerplate`\n- Install dependencies =\u003e `yarn install`\n- Start the development server =\u003e `yarn start`\n\n### Development (using Docker):\n\n- Clone repo =\u003e `git clone git@github.com:react-custom-projects/webpack-react-boilerplate.git`\n- `cd webpack-react-boilerplate`\n- Install dependencies (required for prettier) =\u003e `yarn install`\n- Start the development server =\u003e `docker-compose up --build`\n\n## Update environment variables:\n\nPlease keep in mind that environment variables configured using webpack which means that you need to re-run the corresponding environment script (yarn start, yarn run build) if you update the environment file.\n\n## Configuring Prettier\n\nThis build relies on [Prettier formatter](https://prettier.io/) to enforce a code style. And [ESLint](https://eslint.org/) for identifying problematic patterns found in JavaScript code.\n\n- Setting up prettier:\n\n  1- You can find steps on how to set up prettier formatter with WebStorm/PhpStorm [here](https://prettier.io/docs/en/webstorm.html#running-prettier-on-save-using-file-watcher).\n\n  Notes:\n\n  - It's better to use the local `node_modules` version of prettier instead of a global one. This is to avoid version conflicts (in case the globally installed version does not match with the versions specified in `package.json`). So when setting up the file watcher when you follow the steps from the above link you can set `program` to `$ProjectFileDir$\\node_modules\\.bin\\prettier` (warning this assumes that node_modules sits in the root of your project. This will need to change if your directory structure changes).\n  - You will have to create file watchers for TS, TSX and SCSS files. The webpack build tools are already configured to work with `eslint` and `prettier`. The only thing needed is the file watchers.\n\n  2- Follow the next steps to set up **prettier** and **eslint** on **_VS Code_**:\n\n  - Install `prettier` plugin\n\n  - Install `eslint` plugin\n\n  - Open **_VS Code settings_** `CTRL + ,`:\n\n    a- Search for `formatter` =\u003e check **Format on save**\n\n    b- Search for `prettier` =\u003e add `.prettierrc` in **_Prettier: Config Path_** section \u0026\u0026 check **_Prettier: Require Config_**\n\n  3- Please refer to other tutorials if you are using a different IDE.\n\n## Site meta tags:\n\n- This app includes facebook, twitter and regular meta tags\n\n#### To update them:\n\n- Open constants.js file and update metaInfo object\n- Open src/assets/images and replace (favicon.png, metaImage.jpg) with your images but using the same name\n\n## Extra:\n\n- Generic error boundary fallback component (you can customize it)\n- Cookies, local storage and sessions storage mangers to store data in the browser. (**Note:** the data encrypted using crypto-js package before storing it.)\n- Basic mixins `(scss/generic/_mixins.scss)`\n- Normalize styles `(scss/generic/_normalize.scss)`\n- App typography styles `(scss/generic/_typography.scss)`\n- 4 break points `(scss/generic/_variables.scss)`\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\u003cbr\u003e\nIt will open [http://localhost:3000](http://localhost:3000) automatically in the browser to see your app.\n\nAll changes will be injected automatically without reloading the page.\u003cbr\u003e\n\nYou will see in the console the following:\n\n- Any of the following errors:\n  1. Linting errors.\n  2. Code format errors (because of [prettier](https://prettier.io/))\n\n### `yarn build`\n\nBuilds the app for production to the `dist` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n### `yarn build:serve`\n\nServes the app on `http://localhost:8080/` from the `dist` folder to check the production version.\n\n**_Note:_** Use this script only if you ran the build script `yarn build`.\n\n### `yarn analyze-bundle`\n\nIt allows you to analyze the bundle size.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Freact-language-router-v5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonadam2%2Freact-language-router-v5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Freact-language-router-v5/lists"}