nik96i / revite Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 833 KB

React Vite Starter

JavaScript 74.20% HTML 0.51% CSS 15.69% TypeScript 9.60%

revite's Introduction

React + TypeScript + Vite

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

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

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

Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

revite's People

Contributors

Watchers

revite's Issues

Add loading/placeholder

Add a loading or some sort of placeholder for all lazy-loaded components, etc.

Add Tailwind CSS with a custom font

Add Tailwind CSS to the project and use a custom font.

Implement an API layer using Axios. It should handle errors, have a cancel request functionality and return the request statuses (like react-query: isLoading, isError, etc), data and error.
Using react-query or not ?

What about automatic package update/upgrade?

We need some tools to check the package.json and update the packages, etc. MORE DETAILS LATER ...

Implement routing mechanism

Implement routing mechanism using react-router or tanstack-router

What about optimistic updates?

Implement some sort of optimistic updates (in the API layer) to improve UX and prevent users from waiting some amount of time for an async operation to be done.

Add Stylelint

Add Stylelint to lint CSS.

Add global state management boilerplate.

Handling app's unexpected errors (Error Boundary)

Wrap the entire app into some error handler component to show an error page whenever an unexpected error happens!
In the production mode, it should appear and prevent the user from seeing the actual error on the page.

Add Dark/Light support

What about browser support?

We need to specify the app's minimum browser version requirements and use tools like ESLint to prevent developers from using JS/CSS functions/features to violate that requirement.
Or maybe, by using some other pollyfills we can use newer functions/features but with more browser support compatibility?

Add alias support to the Vite

Add alias support to the Vite and TypeScript.

Also, think about implementing some mechanism for nice feature-based paths.

Add ESLint

Configure ESLint JS + TS With new config format (Flat Config).

Add i18n support

Add i18n support. feature-based and lazy loaded.

Add dev server proxy to the Vite

Add a simple feature with CRUD operations

Add a feature with add, edit, view and delete functionality.
It should use/implement every aspect of the project like theme, i18n, routing, and global and local state management.
maybe an example to avoid props drilling?

Update TypeScript configs

Add Env support to the Vite

Implement a feature registrar mechanism

Every feature may have routing, i18n, views, etc. Registering every one of them is painful.
Implement some registrar mechanism to register all feature's functionalities in one place.

Add import/export ESLint rules

Add some ESLint rules for import/export from features.

For example:

Only imports from the feature's index file are allowed (From the outside of the feature's directory).