Skip to content

README.md

Latest commit

 

History

History
214 lines (136 loc) · 6.26 KB

README.md

File metadata and controls

214 lines (136 loc) · 6.26 KB

Offgrid Portal App

⚛ React + TypeScript + Vite

This project template is generated using Vite. See Scaffolding Your First Vite Project.

npm create vite@latest . -- --template react-ts

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

🚀 Getting Started

Start App

npm run dev

Access app at http://localhost:4000

🤖 Agents Guidance

📦 Packages

Roboto Fonts

npm install @fontsource/roboto

See Typesource - Roboto Install.

Material MUI (and Icons)

See:


# install mui framework
npm install @mui/material @emotion/react @emotion/styled

# install mui icons
npm install @mui/icons-material

# install mui data grid
npm install @mui/x-data-grid

Lucide React

Lucide is built with ES Modules, so it's completely tree-shakable. Each icon can be imported as a React component, which renders an inline SVG element.

See Lucide React.

npm install lucide-react

React Router

React Router is the standard, widely-used library for handling navigation and routing in React applications. It enables the creation of single-page applications (SPAs) with dynamic views and bookmarkable URLs, allowing navigation between different components without requiring a full page reload.

See React Router for more details.

This project installs React Router using Data Mode. See the official installation docs.

npm install react-router

Keycloak

Keycloak JS is the official client-side JavaScript library (adapter) that enables web applications to use Keycloak for all aspects of identity and access management (IAM). It handles the complexities of authentication protocols like OpenID Connect and OAuth 2.0 under the hood, simplifying the integration of security features into your application.

See the following links for more information:

npm install keycloak-js

React Redux & Redux Toolkit

React Redux is the official UI binding library that connects the standalone Redux state management library to React applications. It provides a predictable way to manage a complex application's global state in a single, centralized location called the store.

See the following links for more information:

npm install react-redux

Redux Toolkit (RTK) is the official, recommended, and opinionated toolset for efficient Redux development. It streamlines state management by reducing boilerplate code, simplifying store setup, and enabling "mutative" immutable updates. Key features include configureStore, createSlice, and built-in support for middleware like Redux Thunk.

See the following links for more information:

npm install @reduxjs/toolkit