Project structure

This project uses import alias which means every import is relative to the root folder. E.g. to import main App component the code would be import App from 'components/App';. Very useful down the road.

This boilerplate was set up according to the guidelines in https://github.com/profico/react-boilerplate-vite/blob/master/style-guide.md. The structure below extends the base project structure defined in the style guide.

src
└── i18n (optional)
└──── en_US
└──── hr_HR
└──── index.ts
└── graphql (optional)
└──── queries
└──── mutations
└──── models
└── redux (optional)
└──── actions
└──── reducers
└──── types
└──── store.ts
└── services (place to store services which communicate with the backend)
└── styles (place to store basic styles settings such as variables, mixins etc.)

Some of the listed folders are not created in the repository to keep the repository size smaller and easier to customize.

Available Scripts

yarn dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

yarn build

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

yarn preview

Opens up the production build preview in the browser.

yarn lint

Checks the app for any lint errors and/or warnings.

yarn upgrade

Upgrades packages to their latest version based on the specified range. Find out more at: https://classic.yarnpkg.com/lang/en/docs/cli/upgrade/

---

Recommended libraries

• axios for handling API calls

• core-js & react-app-polyfill for older browser support

• sass for SASS support (clsx is also recommended)

  • create typings.d.ts file in the root dir and add the following content:

    declare module '*.scss' {
      const content: { [className: string]: string };
    
      export default content;
    }
    

• Material-UI for UI components

• moment for handling dates DEPRECATED

• dayjs for handling dates (almost same API as moment)

• notistack for handling snackbar messages (Material-UI is a requirement)

• react-router-dom for navigation

• react-use - provides a lot of useful hooks

• redux + reselect for global state management

  • redux-devtools-extension & redux-logger for easier development

• react-apollo for GraphQL integration

• styled-components for styled components

• aphrodite for CSS-in-JS solution

• awesome-react for a list of packages/articles about React ecosystem