|
1 | | -# React + TypeScript + Vite |
2 | 1 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
4 | 2 |
|
5 | | -Currently, two official plugins are available: |
| 3 | +<div style="display: flex; gap: 8px"> |
| 4 | + <img src="/public/rrLogo.png" alt="ReactRover Logo" width=100> |
6 | 5 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 6 | +# ReactRover |
| 7 | +</div> |
9 | 8 |
|
10 | | -## Expanding the ESLint configuration |
| 9 | +ReactRover aims to ease the initiation phase of any React project, presenting one of many possible solutions to streamline the process. It brings together a selection of tools and libraries—like Vite, Bun, MUI, and Tanstack—that have proven useful in reducing setup times and complexity. This toolkit is offered as a starting point, a way to quickly transition from concept to development, allowing you to focus more on creating and less on configuring. |
11 | 10 |
|
12 | | -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: |
13 | 11 |
|
14 | | -- Configure the top-level `parserOptions` property like this: |
| 12 | +## What's Included ? |
15 | 13 |
|
16 | | -```js |
17 | | -export default { |
18 | | - // other rules... |
19 | | - parserOptions: { |
20 | | - ecmaVersion: 'latest', |
21 | | - sourceType: 'module', |
22 | | - project: ['./tsconfig.json', './tsconfig.node.json'], |
23 | | - tsconfigRootDir: __dirname, |
24 | | - }, |
25 | | -} |
| 14 | +ReactRover incorporates a carefully curated set of tools and libraries essential for modern React development. Below are the key components included in the toolkit, along with links to their official documentation: |
| 15 | + |
| 16 | +- **[Vite](https://vitejs.dev/)**: A modern frontend build tool that significantly improves the development experience with faster rebuilds and a lot of out-of-the-box features. |
| 17 | +- **[Bun](https://bun.sh/)**: A fast all-in-one JavaScript runtime that includes a package manager and bundler. |
| 18 | +- **[MUI (Material-UI)](https://mui.com/)**: MUI offers a comprehensive suite of free UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components. |
| 19 | +- **[Tanstack React Router](https://tanstack.com/router/latest)**: A flexible and lightweight routing library for React. |
| 20 | +- **[Tanstack Query](https://tanstack.com/query/latest)**: A powerful data fetching and server state management tool in React applications. |
| 21 | +- **[Formik](https://formik.org/)**: A small library that helps you with the 3 most annoying parts: getting values in and out of form state, validation and error messages, handling form submission. |
| 22 | +- **[i18next](https://www.i18next.com/)**: An internationalization-framework written in and for JavaScript. |
| 23 | +- **[React Toastify](https://fkhadra.github.io/react-toastify/)**: Allows you to add notifications to your app with ease. |
| 24 | +- **[Zod](https://zod.dev/)**: TypeScript-first schema validation with static type inference. |
| 25 | +- **[Axios](https://axios-http.com/)**: Promise based HTTP client for the browser and node.js. |
| 26 | +- **[Axios Auth Refresh](https://www.npmjs.com/package/axios-auth-refresh)**: A small library that intercepts failed requests and retries them after refreshing an auth token. |
| 27 | + |
| 28 | + |
| 29 | +Additionally, ReactRover supports built-in theme toggling for dark and light modes, as well as language switching capabilities, enhancing usability and customization for a diverse user base. |
| 30 | + |
| 31 | + |
| 32 | +## Prerequisites |
| 33 | + |
| 34 | +Before installing ReactRover, ensure that your system meets the following requirements: |
| 35 | +- **Node.js**: You'll need [Node.js](https://nodejs.org/) version 16 or newer installed on your system. |
| 36 | +- **Bun**: [Bun](https://bun.sh/) is crucial for some of ReactRover's build processes. Ensure it is installed on your system. |
| 37 | +- **HTTPS Local Development**: For integration with the Mock Server, setting up HTTPS for local development is recommended. Tools like [mkcert](https://github.com/FiloSottile/mkcert) can assist in managing local certificates |
| 38 | + |
| 39 | +## Installation & Usage |
| 40 | + |
| 41 | +```sh |
| 42 | +git clone https://github.com/behcetilhan/reactrover.git reactrover |
| 43 | +cd reactrover |
| 44 | +bun install |
26 | 45 | ``` |
27 | 46 |
|
28 | | -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` |
29 | | -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` |
30 | | -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list |
| 47 | +Create `.env` file in root directory with `VITE_BACKEND_ENDPOINT` defined. For [Testing Server](https://github.com/behcetilhan/mock-auth), you can use the port defined in `.env.dist`. |
| 48 | + |
| 49 | +```sh |
| 50 | +bun run dev |
| 51 | +``` |
| 52 | + |
| 53 | +## Tool for Testing |
| 54 | + |
| 55 | +### Dedicated Mock Server for Authentication and Authorization |
| 56 | + |
| 57 | +For an optimal testing experience with ReactRover, you can use this simple mock server. This server is specifically designed to complement ReactRover by providing a minimalistic backend environment for authentication and authorization. By using this server, you can effectively test secure login flows, token refresh mechanisms, and access controls as implemented in ReactRover. |
| 58 | + |
| 59 | +**Key features include**: |
| 60 | +- JWT-based authentication and HttpOnly cookie management. |
| 61 | +- Secure refresh token implementation for maintaining sessions. |
| 62 | +- HTTPS and HTTP configurations. |
| 63 | +- Pre-configured protected routes to simulate access control. |
| 64 | + |
| 65 | +For detailed setup instructions and how to integrate this server with ReactRover, please visit the [Testing Server](https://github.com/behcetilhan/mock-auth). |
| 66 | + |
| 67 | +### Please Note! |
| 68 | +If you are planning to use the test server with HTTP, don't forget to update the `VITE_BACKEND_ENDPOINT` in `.env` file |
| 69 | + |
| 70 | + |
| 71 | +## Some upcoming features |
| 72 | + |
| 73 | +- vitest implementation |
| 74 | +- SSO integration |
| 75 | +- RTL support |
| 76 | +- [Tanstack Table](https://tanstack.com/table/latest) integration |
| 77 | +- [React Charts](https://react-charts.tanstack.com/) integration |
| 78 | +- [React Select](https://react-select.com) integration |
| 79 | +- Basic mui grid,container and drawer examples |
| 80 | +- Support for [Tailwind](https://tailwindcss.com/) |
| 81 | +- Configuration support for customizable boilerplate, like enabling/disabling third party packages as i18Next or Axios |
0 commit comments