update: added readme and other stuffs

Author: Eric Avila

.eslintrc.cjs

@@ -17,7 +17,7 @@ module.exports = {
         node: true
       },
       files: [
-        '.eslintrc.{js,cjs}'
+        '.eslintrc.{js,cjs,jsx,mjs,ts,tsx}',
       ],
       parserOptions: {
         sourceType: 'script'

.prettierrc

@@ -1,9 +1,9 @@
-{
-    "userTabs": true,
-    "semi": false,
-    "singleQuote": true,
-    "jsxSingleQuote": true,
-    "bracketLine": true,
-    "arrowParens": "avoid",
-    "endOfLine": "lf",
+{
+    "userTabs": true,
+    "semi": false,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "bracketLine": true,
+    "arrowParens": "avoid",
+    "endOfLine": "lf"
 }

README.md

@@ -1,2 +1,115 @@
-# boilerplate-vite-reactjs
-Basic boilerplate: ReactJS,ESLINT+PRETTIER,ALIAS PATH,PNPM,BASIC STRUCTURE PACK
+# boilerplate-vite-reactjs
+
+![alt](./readme/review.png)
+
+## Requeriments 
+
+- **ESLINT Plugin**
+
+![alt](./readme/eslint.png)
+
+- **PRETTIER Plugin**
+
+![alt](./readme/prettier.png)
+
+- **PNPM Package manager**
+
+![alt](./readme/pnpm.png)
+
+- **Image Preview** (Optional)
+
+![alt](./readme/imagepreview.png)
+
+This plugin is a lifesaver! It gives you a sweet preview of your image files, no matter the extension (svg, png, jpg, you name it). You'll find it on the left side, right next to the line number. Just hover your cursor over the path, and voila! You'll see the image pop up, even within the component.
+
+**Example**
+![alt](./readme/previewexample.png)
+
+## Description
+
+This project is created for ReactJS using the PNPM Package Manager. It comes with basic ESLint and Prettier configurations, as well as the use of relative paths based on the project's path structure. Essentially, it's a boilerplate that helps you kickstart your projects quickly and easily.
+
+I hope this less formal version meets your requirements. If you need any further modifications or have any other requests, please let me know.
+
+## Configuration description
+
+### vite.config.js
+
+Check out the vite.config.js file! That's where you'll find all the routes with their fancy aliases for the project. If you want to add a new route, simply follow the same writing style as shown in the line below.
+
+```js
+import { fileURLToPath, URL } from "url";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: [
+      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
+      { find: '@assets', replacement: fileURLToPath(new URL('./src/assets', import.meta.url)) },
+      { find: '@components', replacement: fileURLToPath(new URL('./src/components', import.meta.url)) },
+      { find: '@config', replacement: fileURLToPath(new URL('./src/config', import.meta.url)) },
+      { find: '@pages', replacement: fileURLToPath(new URL('./src/pages', import.meta.url)) },
+      { find: '@router', replacement: fileURLToPath(new URL('./src/router', import.meta.url)) },
+      { find: '@styles', replacement: fileURLToPath(new URL('./src/styles', import.meta.url)) },
+      { find: '@utils', replacement: fileURLToPath(new URL('./src/utils', import.meta.url)) },
+    ],
+  },
+});
+```
+
+#### jsconfig.json
+
+```js
+{
+    "compilerOptions": {
+       "baseUrl": ".",
+       "paths": {
+         "@/*": ["/src/*"],
+         "@assets/*": ["/src/assets/*"],
+         "@components/*": ["/src/components/*"],
+         "@config/*": ["/src/config/*"],
+         "@pages/*": ["/src/pages/*"],
+         "@router/*": ["/src/router/*"],
+         "@styles/*": ["/src/styles/*"],
+         "@utils/*": ["/src/utils/*"],
+       }
+    }
+ }
+```
+
+> ⚡VSCODE will automatically detect the routes and suggest them in autocomplete.
+
+![alt](./readme/autocomplete.png)
+
+---
+### .prettierrc
+
+PRETTIER is the handy tool you need to keep your code in check! It's like having a code format enforcer that ensures everything looks clean and organized. When you collaborate with others on the same project, thanks to PRETTIER's rules, there won't be a jumbled mess of code styles.
+
+Need some extra rules? Check out this link: [Rules Prettier]([/guides/content/editing-an-existing-page](https://prettier.io/docs/en/options.html)). Although the configurations already in the file should cover your needs, it's always good to have more choices based on personal preference and team organization. But honestly, what you have here is more than sufficient to get things rolling.
+
+
+```js
+{
+    "userTabs": true,
+    "semi": false,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "bracketLine": true,
+    "arrowParens": "avoid",
+    "endOfLine": "lf"
+}
+```
+
+---
+---
+
+> If this repository has been helpful to you, please show your support by giving it a star. It would mean the world to me, and I'll be extremely grateful. Thank you!
+
+
+Make sure to swing by my Personal Blog! You never know what gems you'll discover that could be of value to you or your buddies.
+
+[<ode <raft avila Blog](https://codecraftavila.super.site/)

package.json

@@ -28,9 +28,5 @@
     "eslint-plugin-react-refresh": "^0.4.1",
     "prettier": "^3.0.0",
     "vite": "^4.4.0"
-  },
-  "imports": {
-    "@": "./src",
-    "@assets": "./src/assets"
   }
 }