{"id":44752075,"url":"https://github.com/tduyng/react-typescript-example","last_synced_at":"2026-02-15T23:15:16.099Z","repository":{"id":40433512,"uuid":"313541048","full_name":"tduyng/react-typescript-example","owner":"tduyng","description":"Template React Project using create-react-app \u0026 TypeScript","archived":false,"fork":false,"pushed_at":"2024-03-30T16:01:16.000Z","size":4148,"stargazers_count":17,"open_issues_count":0,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-03-30T17:22:44.948Z","etag":null,"topics":["hooks","react","react-ant-design","react-antd","react-demo","react-hooks","react-typescript-boilerplate","react-typescripts","redux","typescript"],"latest_commit_sha":null,"homepage":"https://reactts-boilerplate.netlify.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/tduyng.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":"2020-11-17T07:32:04.000Z","updated_at":"2024-03-25T19:47:01.000Z","dependencies_parsed_at":"2022-08-09T20:20:31.895Z","dependency_job_id":null,"html_url":"https://github.com/tduyng/react-typescript-example","commit_stats":null,"previous_names":["tduyng/react-typescript-example"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/tduyng/react-typescript-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tduyng%2Freact-typescript-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tduyng%2Freact-typescript-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tduyng%2Freact-typescript-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tduyng%2Freact-typescript-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tduyng","download_url":"https://codeload.github.com/tduyng/react-typescript-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tduyng%2Freact-typescript-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29492011,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T19:29:10.908Z","status":"ssl_error","status_checked_at":"2026-02-15T19:29:10.419Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["hooks","react","react-ant-design","react-antd","react-demo","react-hooks","react-typescript-boilerplate","react-typescripts","redux","typescript"],"created_at":"2026-02-15T23:15:15.487Z","updated_at":"2026-02-15T23:15:16.094Z","avatar_url":"https://github.com/tduyng.png","language":"TypeScript","readme":"# TypeScript React Boilerplate\n\nTemplate Typescript React Project\n\n![Travis (.com)](https://img.shields.io/travis/com/tienduy-nguyen/typescript-react-boilerplate)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/2c01fcbb-9811-4e0e-b86c-e1b79e4f2c46/deploy-status)](https://app.netlify.com/sites/reactts-boilerplate/deploys)\n\n\nDemo deploy at: [reactts-boilerplate.netlify.app](https://reactts-boilerplate.netlify.app/)\n\n\n\n**This version is deprecated, It will be updated \u0026 changed soon. Learn more about  [React boiler plate](https://github.com/react-boilerplate/react-boilerplate)**\n\n\n---\n\n- [TypeScript React Boilerplate](#typescript-react-boilerplate)\n  - [Installation](#installation)\n  - [Technologies](#technologies)\n  - [Project structure](#project-structure)\n    - [src folder](#src-folder)\n  - [Project Routes](#project-routes)\n    - [Public routes](#public-routes)\n    - [Private routes (need auth)](#private-routes-need-auth)\n## Installation\n\nTo use this template\n- Clone this project\n- Rename project as you want\n- Install dependencies from `package.json` to your machine\n  \n  ```bash\n  $ yarn\n  # or\n  $ npm install\n  ```\n\n- Run or build project\n  ```bash\n  $ yarn start\n  $ yarn build\n  # or npm run start / npm run build\n  ```\n- Start coding\n\nLogin\n```\nusername: tester\npassword: 123456\n```\n\n\n## Technologies\n  - Integrate ESlint, Prettier\n  - Styled-Component and CSS Module for CSS\n  - Using TypeScript\n  - Using Redux, React thunks\n  - Functional programming with React hooks\n  - Lazy load page\n  - Using ant design\n  - Using json-server to create fake server backend\n  - CI-CD with Travisci \u0026 Github actions\n  \n\n## Project structure\n\n\u003cdetails\u003e\n\u003csummary\u003eClick me to expand\u003c/summary\u003e\n\n```tree\n.\n├── LICENSE\n├── package.json\n├── public\n│   ├── favicon.ico\n│   ├── images\n│   ├── index.html\n│   ├── logo192.png\n│   ├── logo512.png\n│   ├── manifest.json\n│   └── robots.txt\n├── README.md\n├── server\n│   ├── db\n│   │   └── db.json\n│   └── routes.json\n├── src\n│   ├── App\n│   │   └── App.tsx\n│   ├── assets\n│   │   ├── images\n│   │   └── scss\n│   │       ├── _config.scss\n│   │       ├── _fonts.scss\n│   │       ├── _footer.scss\n│   │       ├── _header.scss\n│   │       ├── _home.scss\n│   │       ├── index.scss\n│   │       ├── _login.scss\n│   │       ├── _responsive.scss\n│   │       └── _staticPages.scss\n│   ├── components\n│   │   ├── Auth\n│   │   │   ├── Auth.actions.ts\n│   │   │   ├── Auth.constants.ts\n│   │   │   ├── Auth.reducers.ts\n│   │   │   ├── Auth.thunks.ts\n│   │   │   ├── Login.tsx\n│   │   │   ├── Profile.tsx\n│   │   │   └── Register.tsx\n│   │   ├── Error\n│   │   │   └── 404.tsx\n│   │   ├── Footer\n│   │   │   └── index.tsx\n│   │   ├── Header\n│   │   │   ├── index.tsx\n│   │   │   ├── LeftMenu.tsx\n│   │   │   └── RightMenu.tsx\n│   │   ├── Home\n│   │   │   ├── AuthLinks.tsx\n│   │   │   ├── GuestLinks.tsx\n│   │   │   └── index.tsx\n│   │   ├── Loading\n│   │   │   ├── index.tsx\n│   │   │   └── Loading.styles.ts\n│   │   ├── Products\n│   │   │   ├── Product.actions.ts\n│   │   │   ├── Product.constants.ts\n│   │   │   ├── ProductForm.tsx\n│   │   │   ├── ProductItem.tsx\n│   │   │   ├── ProductList.tsx\n│   │   │   ├── Product.reducers.ts\n│   │   │   └── Product.thunks.ts\n│   │   └── StaticPages\n│   │       ├── About.tsx\n│   │       ├── Contact.tsx\n│   │       ├── Demo.option.1.tsx\n│   │       ├── Demo.option.2.tsx\n│   │       ├── Feature.option.1.tsx\n│   │       └── Feature.option.2.tsx\n│   ├── constants\n│   │   ├── paths.ts\n│   │   ├── products.ts\n│   │   └── urls.ts\n│   ├── hooks\n│   │   └── usePrevious.tsx\n│   ├── index.tsx\n│   ├── pages\n│   │   ├── AuthPages\n│   │   │   ├── LoginPage.tsx\n│   │   │   ├── ProfilePage.tsx\n│   │   │   └── RegisterPage.tsx\n│   │   ├── ErrorPages\n│   │   │   └── 404Pages.tsx\n│   │   ├── HomePages\n│   │   │   └── HomePage.tsx\n│   │   ├── layouts\n│   │   │   └── MainLayout.tsx\n│   │   ├── ProductPages\n│   │   │   ├── ProductEditPage.tsx\n│   │   │   ├── ProductItemPage.tsx\n│   │   │   ├── ProductListPage.tsx\n│   │   │   └── ProductNewPage.tsx\n│   │   └── StaticPages\n│   │       ├── AboutPage.tsx\n│   │       ├── ContactPage.tsx\n│   │       ├── Demo1Page.tsx\n│   │       ├── Demo2Page.tsx\n│   │       ├── Feature1Page.tsx\n│   │       └── Feature2Page.tsx\n│   ├── react-app-env.d.ts\n│   ├── reportWebVitals.ts\n│   ├── routes\n│   │   ├── index.tsx\n│   │   └── PrivateRoute.tsx\n│   ├── setupTests.ts\n│   ├── store\n│   │   ├── index.ts\n│   │   └── reducers.ts\n│   ├── @types\n│   │   ├── actions.d.ts\n│   │   ├── alert.d.ts\n│   │   ├── api.d.ts\n│   │   ├── files.d.ts\n│   │   ├── product.d.ts\n│   │   ├── reducer.d.ts\n│   │   └── user.d.ts\n│   └── utils\n│       └── helper.js\n├── tsconfig.json\n└── yarn.lock\n\n```\n\n\u003c/details\u003e\n\n---\n  \n### src folder\n  - **@types**: Declare modules, interface, type for TypeScript\n    - `action.d.ts`: Action Interface for Redux\n    - `api.d.ts`: Response interface for api\n    - `files.d.ts`: Declare modules for images, videos, css formats...\n    - `reducer.d.ts`: return type of reducer\n    - `product.d.ts`, `user.d.ts`: return interface of item in project\n  - **api**: services, contains functions get, post .. api (axios e.g)\n  - **App**: component App\n  - **assets**: images, videos, files, …\n  - **components**: contains folders components\n  - **constants**: constant, enum\n  - **helpers**: functions helpers\n  - **hooks**: contains hooks using\n  - **pages**: pages of project\n  - **routes**: private routes and public routes of project\n  - **store**: store of Redux and root reducers\n\n## Project Routes\n### Public routes\n- **Home**: '/': Show landing page before login\n- **Feature - Option 1**: '/feature1'\n- **Feature - Option 2**: '/feature2'\n- **Demo - Option 1**: '/demo1'\n- **Demo - Option 2**: '/demo1'\n- **About**: '/about'\n- **Contact**: '/about'\n- **Login**: '/login'\n- **Register**: '/signup'\n- **404**: Page not found\n\n### Private routes (need auth)\n- **Profile**: '/profile'\n- **Products**: '/' or '/products': Show list of products\n- **Show Product**: '/products/:id\n- **Create Product**: '/products/new\n- **Edit Product**: '/products/:id/edit\n- **Update Product**: '/products/:id\n- **Delete Product**: button click\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftduyng%2Freact-typescript-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftduyng%2Freact-typescript-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftduyng%2Freact-typescript-example/lists"}