{"id":19902249,"url":"https://github.com/bndynet/admin-template-for-react","last_synced_at":"2025-05-02T23:32:17.322Z","repository":{"id":39562497,"uuid":"158705792","full_name":"bndynet/admin-template-for-react","owner":"bndynet","description":":earth_asia: Admin template for React, React Redux, Redux Saga, React Router, i18n and integrated OAuth login","archived":false,"fork":false,"pushed_at":"2023-01-03T15:23:54.000Z","size":5002,"stargazers_count":84,"open_issues_count":22,"forks_count":31,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-07T08:37:12.417Z","etag":null,"topics":["admin-template","material-design","material-ui","react-ecosystem","react-i18n","react-intl","react-redux","reactjs","redux-saga","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://bndynet.github.io/admin-template-for-react/","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/bndynet.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}},"created_at":"2018-11-22T13:47:12.000Z","updated_at":"2024-12-14T15:35:28.000Z","dependencies_parsed_at":"2023-02-01T07:01:19.783Z","dependency_job_id":null,"html_url":"https://github.com/bndynet/admin-template-for-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bndynet%2Fadmin-template-for-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bndynet%2Fadmin-template-for-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bndynet%2Fadmin-template-for-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bndynet%2Fadmin-template-for-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bndynet","download_url":"https://codeload.github.com/bndynet/admin-template-for-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252122357,"owners_count":21698307,"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":["admin-template","material-design","material-ui","react-ecosystem","react-i18n","react-intl","react-redux","reactjs","redux-saga","typescript","webpack"],"created_at":"2024-11-12T20:17:30.349Z","updated_at":"2025-05-02T23:32:16.234Z","avatar_url":"https://github.com/bndynet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Admin Template for React\n\n[DEMO](https://bndynet.github.io/admin-template-for-react/) - Type any account to log in\n\n![](https://github.com/bndynet/admin-template-for-react/workflows/CI/badge.svg)\n![](https://img.shields.io/badge/Language-TypeScript-blue.svg)\n![](https://img.shields.io/badge/Language-SCSS-blue.svg)\n![](https://img.shields.io/badge/React-16.3-brightgreen.svg?logo=react)\n![](https://img.shields.io/badge/React-Redux-brightgreen.svg?logo=react)\n![](https://img.shields.io/badge/React-react--router--config-brightgreen.svg?logo=react)\n![](https://img.shields.io/badge/React-react--intl-brightgreen.svg?logo=react)\n![](https://img.shields.io/badge/React-connected--react--router-brightgreen.svg?logo=react)\n![](https://img.shields.io/badge/React-Redux%20Saga-brightgreen.svg?logo=react)\n[![code style: prettier](https://img.shields.io/badge/Code_Style-Prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nA starter admin template with React, React Redux, Material UI and TypeScript that packages using Webpack and integrates a minimal project structure.\n\n**Classic Layout**\n![screenshot](https://raw.githubusercontent.com/bndynet/admin-template-for-react/master/docs/images/admin-home.png)\n\n**Popular Layout**\n![screenshot](https://raw.githubusercontent.com/bndynet/admin-template-for-react/master/docs/images/admin-home-minimenu.png)\n\n- AJAX component: **[axios](https://github.com/axios/axios)**\n- UI component: **[material-ui](https://material-ui.com/)**\n- REACT stack: react, react-dom, react-redux, react-router-config, react-router-dom, redux, redux-saga, react-intl-universal\n- You can custom theme in **./src/theme/config.tsx** file\n\n## ❯ Getting Started\n\n1. Clone repo `git clone \u003cgit-url\u003e`\n2. `npm install` to install all dependencies\n3. `npm start` to start web server or `npm run build` to build production code into **dist** folder\n\n## ❯ Development\n\n### Application Configuration Examples\n\n- ./src/config/app.common.tsx - _all common configurations_\n- ./src/config/app.dev.tsx - _configurations used in local_\n- ./src/config/app.prod.tsx - _configurations used in production_\n- ./src/config/app.github.tsx - _example for github authorization_\n- ./src/config/app.auth-code.tsx - _example for authorization code grant type_\n- ./src/config/app.auth-password.tsx - _example for password grant type_\n- ./src/config/app.mock.tsx - _just for local development without login system_\n\n### Customize more environments\n\n1. New file **./src/config/app.[env_name].tsx** to override your configurations\n\n2. Recommend to import configurations in **app.dev.tsx**\n\n    ```ts\n    import config = require('./app.your-env');\n    ```\n\n    Or add below code in **./src/config/index.tsx** or **./index.html** to freeze your environment\n\n    ```ts\n    window.__APP_ENV__ = 'your-env';\n    ```\n\n3. `npm start` and `npm run build` will always use the environment you defined\n\n### Components based on Material UI or some else\n\n`Alert`, `Loading`, `MiniCard`, `Notifier`, `Overlay`, `Panel`, `Tag`, `DataTable`, ...\n\n### i18n/l10n Support\n\n```tsx\nimport * as intl from 'react-intl-universal';\n\nconst message = intl.get('i18nKey');\n```\n\n### Available Services\n\n- `import { service as resourceService } from \"app/service/resource\";` to call APIs which has appended access token in request header\n- `import { getState as getAuthState } from \"app/service/auth\";` to get current user information\n\n### Debug with **Chrome** in **Visual Studio Code**\n\n1. Requires **[Visual Studio Code](https://code.visualstudio.com/)** as IDE and extension **[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)**\n\n1. `npm start` to run application\n\n1. Click menu **Debug** \u003e **Start Debugging** to debug with generated **.vscode/launch.json** file as below:\n\n    ```json\n    {\n        \"version\": \"0.2.0\",\n        \"configurations\": [\n            {\n                \"type\": \"chrome\",\n                \"request\": \"launch\",\n                \"name\": \"Launch Chrome against localhost\",\n                \"url\": \"http://localhost:8080\",\n                \"webRoot\": \"${workspaceFolder}\"\n            }\n        ]\n    }\n    ```\n\n1. Set breakpoints in your **vscode** and operate in the new Chrome window **Start Debugging** opened\n\n### Recommendatory extensions for **Chrome**\n\n- React Developer Tools\n- Redux DevTools\n\nAbove extensions will show you the **Actions**, **States** and **Reducers** in **Chrome** console.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbndynet%2Fadmin-template-for-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbndynet%2Fadmin-template-for-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbndynet%2Fadmin-template-for-react/lists"}