Oro ReactJS Starter

This is a template repository with setup of all basic tools which we usually need in our frontend web applications.

What's inside?

Hooks to maintain code sanity

1. ESLint with Airbnb guidelines (ES12 + ReactJS)
2. Husky as pre-commit hook
3. GitCZ as commitzen
4. Typescript
5. VS-Code config and Prettier settings

Tools to make life easier

1. Axios Hooks
2. Tailwind CSS v3 with inbuilt JIT configuration
3. React Router

How to use?

Installation

Clone the repo and run these commands

npm install
npm run husky-install

Setup completed

Advice on making commits

To make your commits more beautiful and structured, we recommend using git-cz commitzen. Just run this to make a commit

git add .

npm run commit // OR just run => git cz

Rules for naming files & folders along with the structure we follow

Advicable to read naming nomenclature from Airbnb React/JSX Style Guide

1. Always use kebab-case for naming folders, except naming components. This is because we would be naming components based in their folder names and we want them in PascalCase only.
2. For files, we use a defauly camelCase convention with these exceptions:
   1. Component files in PascalCase
   2. Wrapper component files in withCamelCase always starting with a with.
   3. Test files in kebab-case

/src
    /assets
        /images
        /files
        ...
    /components
        /PascalCaseComponentName
            index.tsx
            component-name.test.tsx
    /contexts
        /name-context
            index.tsx
            interfaces.ts
            name-context.test.tsx
    /interfaces
        groupName.ts
    /lib
        libraryName.ts
    /pages
        /PascalCaseComponentName
            index.tsx
            component-name.test.tsx
            /utils
                constants.ts
                helper.ts
            /components
                /PascalCaseComponentName
                    index.tsx
                    component-name.test.tsx
    /routes
        index.tsx
        PrivateRoutes.tsx
        ApplicationRoutes.tsx
    /services
        /group-name
            actionServiceName.ts
    /styles
        index.css
    /utils
        constants.ts
        helper.ts
    /wrappers
        withWrapperName.ts
    index.tsx