React + TypeScript + Vite + Capacitor

This boilerplate provides a minimal setup to get React working in Vite with Capacitor and some ESLint rules to build a hybrid app.

About The Project

Built With

• 
• 
• 
• 
• 

Getting Started

Prerequisites

• node >= 20.xx.xx
• npm >= 10.xx.xx

Install eslint and prettier extensions for your editor

Installation

    npm i

1. Start web version in development mode

    npm run web

2. Start mobile version in development mode

    npm run mobile

3. Build web version

    npm run build-web

4. Build mobile version

    npm run build-mobile

5. Run android app

    npm run start-android

6. Run ios app

    npm run start-ios

Code conventions

Code structure

src
├── core
│   ├── app
│   │   ├── components # common components
│   │   ├── containers # sections in page
│   │   ├── hooks # common hooks use in containers and pages
│   │   └── pages # pages for application
│   ├── assets
│   │   ├── fonts # fonts folder
│   │   ├── icons # icons components import from svg
│   │   ├── react.svg
│   │   └── svg # svg icons folder
│   ├── constants # constants folder
│   ├── locales
│   │   └── i18n.ts
│   ├── localstorage # data save in localstorage
│   ├── queries # query api wrapper
│   ├── routes # routes for application
│   ├── services # api functions
│   ├── store # global state
│   ├── styles
│   │   ├── GlobalStyles.tsx
│   │   ├── colors.ts # import colors from here
│   │   ├── fonts.d.ts
│   │   ├── global.module.css
│   │   └── text.ts # import common text style from here
│   ├── theme
│   │   └── index.ts
│   ├── types # type definitions
│   └── utils # utility functions
├── mobile
│   ├── configs
│   │   └── index.ts # import from .env file
│   ├── containers
│   ├── hooks
│   ├── index.html
│   ├── layouts
│   │   ├── DefaultLayout.tsx
│   │   └── index.tsx
│   ├── main.tsx # mobile's entry point
│   ├── pages
│   │   └── mobile
│   ├── routes
│   │   └── index.tsx
│   └── vite.config.ts
├── vite-env.d.ts
└── web
    ├── configs
    │   └── index.ts
    ├── index.html
    ├── layouts
    │   ├── DefaultLayout.tsx
    │   └── index.tsx
    ├── main.tsx # web's entry point
    ├── pages
    │   └── Web
    ├── routes
    │   └── index.tsx
    └── vite.config.ts

1. core folder use to write commons components, containers and pages use for web and mobile.
2. Write .env in web and mobile for each type of platform.
3. Write components which just related to ui only with no business logic to core/app/components.
4. Divide page in too different parts and write in core/app/containers if that page 's too complicated else just use core/app/components too avoid redundant code.
5. Write one function per file in queries, mutations, services, utils, store and export default those functions.
6. Avoid using any as much as posible and write types into core/types, each type will be seperated into different categries which are divided by folders and written in one file named after it's name.
7. Avoid creating sub folders for each react's component but try to create functions which others can use.

Best practices

1. Using var! instead var as number if var has type number | undefined

2. Using var?.<key> as much as posible

3. Using all camelCase, if some variables using other styles, try to convert to camelCase

4. Add space between JSX code and add comments if necessary to enhance readability.

5. Pay attention to mobile platform because UI can be different from web so try to test UI in mobile before pushing code.

6. Avoid using unnessary <div> tag by using <><>

7. Install a package by using exact version of it

8. Commit message following this format <feat|fix|refactor>: [<id>] <message>