Viact is a starter template for React TypeScript that uses Vitejs, which supports RTL for specific styles, proxy fetching API (to fix CORS errors) and a simple mock REST API server.
Additionally, Is set up VScode, Storybook, ErrorBoundary, UnoCss (atomic CSS engine), Eslint, Prettier, and more.

It's an opinionated setup for modern web applications (a GitHub template). This is a set of essential (and minimal) libraries, components, and utilities that developers typically require when developing React applications.

Almost all projects need to have a router, a UI framework, error handling, base file/folder structure, a builder, some developer tools (eslint, prettier, postcss, etc), and many more. As a starter kit, we tried to include the best options available in the above fields.

Viact is a minimalist starter template, it includes:

• ⚡️ Vite - Next Generation Frontend Tooling
• ⚛️ React 18 - A JavaScript library for building user interfaces
• 🏄 React Router DOM
• 💎 TypeScript (of course)
• 🎨 UnoCSS - the instant on-demand atomic CSS engine
• ✅ Safety - Https is enabled by default in development https://localhost:3000/
• 🔨 EsLint - Pluggable JavaScript linter
• 🌀 Prettier - Opinionated Code Formatter
• 📭 PostCss - Supports RTL for specific styles & autoprefixer (add vendor prefixes)
• ☄️ Conventional Commit
• 🎯 Absolute import by using ~/...
• ⚙️ Proxying API Requests in Development
• 🔥 The easiest way to mock REST APIs! Based on (json-server)[https://github.com/typicode/json-server]
• 📕 Storybook
• 🗃️ Minify images (image compressor) Automatically (in production)
• 🖌️ Support Sass/Scss/Less

• 📦 Node.js >=16
• 📦 Yarn >=1

Create a repo from this template on GitHub.

If you would prefer to do it manually, use the following:

git clone https://github.com/MR-Mostafa/Viact.git
cd Viact

After that, follow these steps to clean the git history and install the dependencies:

yarn install         # Install all dependencies
yarn run reset       # Reset and clean all files you don't need, and clean git history

Simple folder structures, no configuration needed, just the files you need:

Viact
├── .storybook          # Storybook configuration
├── .vite-cache         # Vite cache (for faster builds)
├── .vscode             # VSCode configuration
├── mock                # Full fake REST API server (Create a mock API server with `json-server`)
├── node_modules        # Node modules
├── postcss             # Postcss RTLCSS Plugin
└── src                 # Your source code that will be compiled to dist folder
|    ├── api
|    ├── assets
|    |    ├── fonts
|    |    ├── images
|    |    └── styles
|    |        ├── utils                # Utility styles
|    |        ├── styles.rtl.scss      # Global rtl styles
|    |        └── styles.scss          # Global styles
|    ├── components
|    ├── constants
|    ├── containers
|    ├── env
|    ├── pages
|    ├── sections
|    ├── store
|    ├── types
|    ├── utils
|    ├── App.tsx
|    ├── main.tsx
|    └── Routes.tsx
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
...

In this project, you can run the following scripts:

Plese see this link for more information about UnoCSS:

• Unocss
• Let’s Define Exactly What Atomic CSS is
• Atomic CSS
• Reimagine Atomic CSS

As you might know, Tailwind and Windi CSS transform specific class names in the HTML file (or in the JSX or TSX file) to specific property styles as you need them(on-demand).
A number of rules have been defined for the use of commonly used styles, Which is defined in the following file:

./acss.ts

• Support all utilities styles
• Support css Pseudo Classes/Elements
• Support group selectors, like .navbar a {...}
• Support CSS variables

• In classNames, spaces cannot be used (because a new class has already been defined).
  Therefore, the underscore() sign should be used instead of a space. We will now replace the underscore() sign with a space.
• For Group Selectors:
  • Group Selectors must start with @
  • All selectors must end with dollar sign ($)
  • The classname can only contain one dollar sign ($)
    example:

       space between
             👆
     @.wrapper_p$fs[16px] => .wrapper p{font-size: 16px;}
     👇         👇
     👇    end group selectors
     👇
    start group selectors
  

You can use utility classes in your components and stylesheets as usua.

For Set Proxy, please see and edit the proxy field in file .vite.config.js

To create mock REST APIs, see the mock folder.
We use json-server to create mock REST APIs. Plese see the following link for more information:
json-server

Be sure to follow the checklist when updating your information using this template

• Change the title in index.html
• Change the favicon in ./src/assets/images
• Change the name, description, author, keywords, homepage, repository and bugs field in package.json

And, enjoy :)