Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sonjoydatta/react-boilerplate
React dashboard boilerplate for building fast, robust, and adaptable web applications.
https://github.com/sonjoydatta/react-boilerplate
antd css i18next less react redux scss styled-components typescript vite
Last synced: about 1 month ago
JSON representation
React dashboard boilerplate for building fast, robust, and adaptable web applications.
- Host: GitHub
- URL: https://github.com/sonjoydatta/react-boilerplate
- Owner: sonjoydatta
- License: mit
- Created: 2021-10-19T11:30:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-12T17:19:42.000Z (over 1 year ago)
- Last Synced: 2024-10-13T22:53:23.821Z (2 months ago)
- Topics: antd, css, i18next, less, react, redux, scss, styled-components, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 846 KB
- Stars: 8
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Dashboard Boilerplate
This is a professional Front-end boilerplate for building fast, robust, and adaptable web applications.
It's developed with some specific development philosophy but, you're free to architect your code in the way that you want.
## Features
1. Boilerplate fully typed with `TypeScript`
2. Configured with `Vite`. Vite pre-bundles dependencies using esbuild. Esbuild is written in Go and pre-bundles dependencies 10-100x faster than other JavaScript-based bundlers. [Learn more about vite](https://dev.to/karanpratapsingh/vite-is-too-fast-i8g)
3. Configured with `Ant Design`
4. Less, Scss, CSS & styled-components can be used if needed
5. It has the translation & styled-components default theme with typed configuration
6. Configured with `React Router V6` which has more optimised features than the previous version
7. Has access control features
8. It has a fallback UI for internal server errors & unauthorised
9. Decouple the UI from the business logic and API calls (make it a pure library)
10. Added `React Query` for fetching data from the server
## Common Commands
| Command | Description |
| ------------- | ------------- |
| yarn dev | Run the app in development mode |
| yarn build | Build the app for production |
| yarn start | Start the app in production mode |
| yarn lint | Run ESLint |
| yarn format | Run Prettier |
## Quick start
1. You'll need to have Node >= 14.18.1 and npm >= 6.14.15 on your machine.
2. Clone this repo using `git clone --depth=1 https://github.com/sonjoydatta/react-boilerplate.git `
3. Enter to the project directory: `cd `
4. Run `yarn or npm install` in order to install dependencies.
5. At this point you can run `yarn dev or npm dev` to see the app at `http://localhost:3000`
6. You may need to a `.env` file. For development `.env.development`
Now you are ready to buzz!
## .env example
`.env`
```
VITE_BACKEND_API_URL=https://reqres.in/api
```
`.env.development`
```
VITE_BACKEND_API_URL=https://example.com/api
```
## Acknowledgments
- [TypeScript](https://www.typescriptlang.org/)
- [React](https://reactjs.org/)
- [Redux](https://redux.js.org/)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [React Query](https://react-query.tanstack.com/)
- [Ant Design](https://ant.design/)
- [Styled Components](https://styled-components.com/)
- [React Router V6](https://reactrouter.com/)
- [i18next](https://www.i18next.com/)
## License
The code is available under the [MIT license](LICENSE.md).