A React boilerplate with Atomic Design methodology. This boilerplate also includes libraries that support basic features such as fetching, global state management, and routing systems. Built with the power of React and Vite.
The main idea of this boilerplate is to bundle things up that you need on starting a frontend project without manually configuring the routing library, fetching library, defining directory structure, etc.
Atomic Design in design concept generally categorizes the component/element from the smallest to the biggest one (hence the name "atomic", adopted from physics term). In frontend development or in programming in general, prioritizing the usage of components that can be reused again and again (reusable components) is such a good idea for good development, programming experience, maintainability, etc. In other words, this concept covers enough for that thing. This boilerplate implements the concept of Atomic Design in its directory structure.
- Fetching library:
axios - State management:
redux - Routing systems:
react-router-dom - Absolute imports
- Custom app's port
- Custom hooks:
- useEventListener
- useForm
- useNetworkStatus
The following are required to be able to run this application:
- Node.js v18
- pnpm (package manager)
For development purposes, before running this application please do some necessary preparations including: installing dependencies, and setting environment variables in the .env.development file.
Command:
npm install -g pnpmpnpm installPlease copy or duplicate the .env.example file into .env.development (specific to the development version) or .env and adjust each variable. If you want to copy the file automatically, you can run the command below in the terminal and adjust each variable.
Command:
cp .env.example .env.developmentCommand:
pnpm devThis documentation was written by Ahmad Rivaldy S