https://github.com/nur-it/reactive-folder-structure
Reactive Folder Structure 2024
https://github.com/nur-it/reactive-folder-structure
best-practices boilarplate folder-structure react router-dom-v6 tailwindcss template
Last synced: 4 months ago
JSON representation
Reactive Folder Structure 2024
- Host: GitHub
- URL: https://github.com/nur-it/reactive-folder-structure
- Owner: nur-it
- Created: 2024-01-17T04:31:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-18T06:35:09.000Z (about 2 years ago)
- Last Synced: 2025-10-13T22:14:14.568Z (4 months ago)
- Topics: best-practices, boilarplate, folder-structure, react, router-dom-v6, tailwindcss, template
- Language: JavaScript
- Homepage:
- Size: 353 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Reactive Folder Structure Documentation
This documentation provides an overview of the recommended folder structure for a reactive application. This structure is designed to enhance maintainability, scalability, and organization of your project. The structure is modular, making it easy to locate and manage different aspects of your application.
## Table of Contents
1. Introduction
2. Folder Structure
- assets
- components
- screen
- shared
- lib
- services
- context
- hooks
- layouts
- pages
- redux
- app
- features
- styles
- utils
3. Usage
4. Contributing
5. License
## Introduction
Reactive applications benefit from a well-organized folder structure that promotes separation of concerns and ease of maintenance. This structure is based on modular components, with each folder serving a specific purpose. The goal is to enhance collaboration, reduce redundancy, and improve code readability.
## Folder Structure
### assets
The `assets` folder contains static resources such as images, icons, and fonts. This is the place to store media files used in your application.
|-- assets/
| |-- images/
| |-- icons/
| |-- fonts/
### components
The `components` folder houses reusable React components. Organize them based on their functionality or type.
|-- components/
| |-- screen/
| |-- shared/
### lib
The `lib` folder is for utility libraries or external modules that are not specific to a particular feature or component.
### services
The `services` folder is dedicated to managing communication with external services or APIs. Each service module within this folder encapsulates the logic related to making requests, handling responses, and managing the communication protocol for a specific external service. This modular approach allows for better organization and maintainability, making it easier to update or extend the interactions with external services independently.
### shared
The `shared` folder contains shared utilities, constants, and functions that can be used across the application.
### context
The `context` folder holds React context providers, facilitating state management at a higher level.
|-- context/
### hooks
The `hooks` folder contains custom React hooks that can be reused throughout the application.
|-- hooks/
### layouts
The `layouts` folder includes layout components that structure the overall page layout.
|-- layouts/
### pages
The `pages` folder contains top-level components that represent different pages in your application.
|-- pages/
### redux
The `redux` folder is dedicated to Redux state management.
|-- redux/
| |-- app/
| |-- features/
#### app
The `app` folder within `redux` contains global state management, reducers, and actions.
#### features
The `features` folder within `redux` is where you organize features by grouping related components, actions, and reducers together.
|-- redux/
| |-- features/
| |-- api/
### styles
The `styles` folder contains global styles, theme files, or styling utilities.
### utils
The `utils` folder is for general utility functions that don't fit into other categories.
## Usage
To use this folder structure, simply organize your project based on the guidelines provided. Place relevant files and components in their respective folders.
Example usage:
```bash
git clone https://github.com/your-username/your-reactive-app.git
cd your-reactive-app
```
## Contributing
Feel free to contribute by opening issues, providing feedback, or submitting pull requests. Follow the contribution guidelines for more details.
## License
This project is licensed under the MIT License. Feel free to use, modify, and distribute as per the terms of the license.