{"id":15043448,"url":"https://github.com/ahsan-chy/react-js-advance-folder-structure","last_synced_at":"2025-04-05T21:11:27.603Z","repository":{"id":190094826,"uuid":"681909126","full_name":"ahsan-chy/React-JS-Advance-Folder-Structure","owner":"ahsan-chy","description":"React JS Advanced Folder Structure - Boilerplate","archived":false,"fork":false,"pushed_at":"2024-02-13T12:56:55.000Z","size":57,"stargazers_count":342,"open_issues_count":1,"forks_count":118,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-05T21:11:23.315Z","etag":null,"topics":["boilderplate","client","context-api","folder-structure","frontend","javascript","react-router","reactjs","rect","redux","redux-toolkit"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahsan-chy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-23T02:58:57.000Z","updated_at":"2025-04-05T16:15:32.000Z","dependencies_parsed_at":"2024-02-13T15:05:07.255Z","dependency_job_id":null,"html_url":"https://github.com/ahsan-chy/React-JS-Advance-Folder-Structure","commit_stats":null,"previous_names":["ahsan-chy/react-js-advance-folder-structure"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahsan-chy%2FReact-JS-Advance-Folder-Structure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahsan-chy%2FReact-JS-Advance-Folder-Structure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahsan-chy%2FReact-JS-Advance-Folder-Structure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahsan-chy%2FReact-JS-Advance-Folder-Structure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahsan-chy","download_url":"https://codeload.github.com/ahsan-chy/React-JS-Advance-Folder-Structure/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399886,"owners_count":20932880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilderplate","client","context-api","folder-structure","frontend","javascript","react-router","reactjs","rect","redux","redux-toolkit"],"created_at":"2024-09-24T20:49:03.755Z","updated_at":"2025-04-05T21:11:27.559Z","avatar_url":"https://github.com/ahsan-chy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React JS Advance-Level Folder Structure\n\nHow to run the project\n```javascript\nnpm i\n```\nand\n```javascript\nnpm start\n```\n\nBefore using This project install latest versions of following packages\n\n- [Axios](https://www.npmjs.com/package/axios)\n- Bootstrap - React Strap - MUI - AntD - Tailwind\n- [React Icons](https://react-icons.github.io/react-icons/)\n- React Router Dom [Latest React Router v6](https://reactrouter.com/en/dev/upgrading/reach#install-react-router-v6)\n- Other Required packages\n\nIn the project I have just set Up most used folder structure:\n\n```javascript\nReact JS Advanced Folder Structure\n.\n├── public\n|     └── index.html\n├── src\n    ├── assets\n    |     ├── audios\n    |     ├── icons\n    |     ├── images\n    |     └── videos\n    ├── components\n    |     ├── Button\n    |     |     ├── index.jsx\n    |     |     └── button.module.css\n    |\t  ├── inputs\n    |     |     ├── index.jsx\n    |     |     └── inputs.module.css\n    |\t  ├── Modal\n    |     |     ├── index.jsx\n    |     |     └── modal.module.css\n    |\t  └── Tooltip\n    |           ├── index.jsx\n    |           └── tooltip.module.css\n    |     └── index.js\n    ├──  db\n    |     ├── productsData.js\n    |     └── userData.js\n    ├── layout\n    |     ├── Header\n    |     |     ├── index.jsx\n    |     |     └── header.module.css\n    |     ├── Navbar.jsx\n    |     |     ├── index.jsx\n    |     |     └── navbar.module.css\n    |     ├── Breadcrumbs.jsx\n    |     |     ├── index.jsx\n    |     |     └── breadcrumbs.module.css\n    |     └── Footer.jsx\n    |           ├── index.jsx\n    |           └── footer.module.css\n    |     └── index.js\n    ├── pages\n    |     ├── Home\n    |     |     ├── index.jsx\n    |     |     └── home.module.css\n    |     ├── Login\n    |     |     ├── index.jsx\n    |     |     └── login.module.css\n    |     ├── Signup\n    |     |     ├── index.jsx\n    |     |     └── signup.module.css\n    |     └── About\n    |           ├── index.jsx\n    |           └── about.module.css\n    |     └── index.js\n    ├── Routers\n    |     └── Routers.js\n    ├── store\n    |     ├── action.js  \n    |     ├── reducers.js  \n    |     └── store.js\n    ├── services\n    |     ├── api.js          // API request functions\n    |     └── dataUtils.js    // Data manipulation functions\n    ├── utils\n    |     ├── constants\n    |     |     ├── Strapi.js\n    |     |     └── Firebase.js\n    |     ├── helpers\n    |     |     ├── arrays.js\n    |     |     └── helpers.js\n    |     └── hooks  \n    |           └── useIsMobile.js  \n    ├── .env\n    ├── app.js\n    ├── index.css\n    ├── index.js\n|\n├── .gitignore\n├── package-lock.json\n├── package.json\n└── README.md\n```\n\n## Folders include\n\n- `Public`\n- `Assests`\n- `Components`\n- `db`\n- `layout`\n- `Pages`\n- `Routes`\n- `services`\n- `store`\n- `utils`\n  - `Constants`\n  - `helpers`\n  - `hooks`\n- `.env.example` / `.env.development`\n- `.eslintrc.cjs`\n- `.prettierrc.cjs`\n- `.jsonconfig.json`\n- `.gitignore`\n- `package.json`\n- `.vite.config.js`\n\n### Public\n\nPublic mainly contain root file **`index.html`** which help to run react project.\n\n### Assests\n\nIn Assets folder you can put following things.\n\n- Images\n- Video\n- Icons\n- CSS\n\n### Components\n\nComponent will have all the components which are reuseable anywhere in website. Like - Button - Cards - DropDownBtn - inputs - Modal - Popups - Toast - Tooltip - Text/Heading/Title - Skeleton - Spiner/Loader\n\n### Constants\n\nConstants folder have **Tokens,** logins, and those details which we don't want to share with public. Like **Env** files are used to store sensitive credentials such as **API keys.**\nAn environment variable supports storing the API link at one location so that we do not need to change the Link in each file manually.\n\n```javascript\nconst API_BASE_URL = 'https://api.example.com';\nconst MAX_ITEMS_PER_PAGE = 10;\n```\n\n### db\n\nHere we provide JSON Formate of data in frontend in React APP.\n\n- products data\n- users data\n\n### Helpers\n\nHelpers used to store utility functions and modules that provide various helper functionalities. These functions are usually small, reusable, and not directly tied to the main business logic of your application.\n\n- Array to Object\n- Object to Array\n- Date Formatting\n- Number Formatting\n- Validation\n- Api Request\n\n[Helper Functions Details](https://chat.openai.com/share/32e7459b-dd5a-495a-a418-db2453361370)\n\n### Layout\n\nThis is just a special folder for **placing any layout based components.**\n\n- Header\n- Footer\n- Breadcrumbs\n- Navbar\n- Sidebar\n\n### Pages\n\nPages will have all the pages which we will use in website.\n\n### Routes\n\nRouter will have all the Routes in website. Where we are going and where we want to go.\n\n### Services\n\nIn Services we put configuration file, like when you are using google firebase then your firebase config file will be in services folder.\n\nThe **\"services\"** folder is often used to contain code related to making **\\*`API`** requests and managing data from external sources. This folder helps separate the concerns of your application by isolating data fetching and manipulation logic from the components that render the UI.\n\n```javascript\n// services/apiService.js\nimport axios from 'axios';\n\nexport function fetchUserData(userId) {\n  return axios.get(`/api/users/${userId}`);\n}\n```\n\n### Store\n\"store\" folder in a React application typically refers to a directory where you manage your application's state using state management libraries like \n- Redux \n- Redux Toolkit\n- Zustand\n- Context Api\n- Mobx\n\n```javascript\n|-- store/\n|   |-- actions.js        // Redux action creators\n|   |-- reducers.js       // Redux reducers\n|   |-- store.js          // Redux store configuration\n```\n\n### Utils\n\n**`Utils`** folder is a common convention in many software projects, including React applications, for storing utility functions and helper modules that provide general-purpose functionality across different parts of the application. \n- constants\n- helpers\n- hooks\n\nExample: \n```javascript\n// utils/stringUtils.js\nexport function capitalizeFirstLetter(str) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n// utils/dateUtils.js\nexport function formatDate(date) {\n  const options = { year: 'numeric', month: 'long', day: 'numeric' };\n  return new Date(date).toLocaleDateString(undefined, options);\n}\n```\n\n### .env.development\n\nEnv files are used to store sensitive credentials such as API keys.\n\n```javascript\nREACT_APP_API_URL=http://localhost:3001\nREACT_APP_DEBUG_MODE=true\n```\n\n### .env.example\n\nEnv files are used to store sensitive credentials such as API keys.\n\n```javascript\nREACT_APP_API_KEY=\nREACT_APP_API_URL=\n```\n\n### .eslintrc.cjs\n\nESLint, which is a popular tool for linting and enforcing coding style and best practices in JavaScript code. The .eslintrc.cjs file is written in CommonJS module format and is used to configure ESLint for your project.\n\n### .gitignore\n\n.gitignore file contain all those files,folders name which user want to skip to push online. If you don't want to push any specific file/folder then you should put their name in .gitignore\n\n### .prettierrc.cjs\n\n`.prettierrc.cjs` file is a configuration file used for Prettier, which is a widely used code formatting tool. Prettier helps ensure consistent and automatic code formatting across your codebase. The `.prettierrc.cjs` file is written in CommonJS module format and is used to configure Prettier's behavior for your project.\n\n- File Format \u0026 Naming\n- Configuration Setup\n- Export Configuration\n\n```javascript\nmodule.exports = {\n  printWidth: 80,\n  tabWidth: 2,\n  singleQuote: true,\n  trailingComma: 'es5',\n};\n```\n\n### jscongig.json\n\n- File Purpose\n- Configuration Setup:\n- JSON Format\n\n```javascript\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"paths\": {\n      \"@/*\": [\"src/*\"]\n    }\n  }\n}\n```\n\n### package.json\n\npackage.json file is core to the Nodejs ecosystem and is a fundamental part of understanding and working with Node. js , npm , and even modern JavaScript . This file is used as a manifest, storing information about applications, modules, packages, and more.\n\n### vite.config.js\n\n- File Purpose:\nThe vite.config.js file allows you to customize various aspects of your Vite project, including configuration options for the development server, build process, and plugin settings.\n\n- Configuration Setup:\nInside the vite.config.js file, you export an object containing the configuration options for your Vite project. This object can include settings related to the development server, build process, plugins, and more.\n\n- JavaScript Format:\nThe vite.config.js file is written in JavaScript, and it's named vite.config.js. It should be placed in the root directory of your Vite project.\n\n```javascript\n// vite.config.js\nexport default {\n  server: {\n    port: 3000\n  },\n  build: {\n    minify: true\n  },\n  plugins: [/* your plugins here */]\n};\n```\n\n@import \n```javascript\nexport default defineConfig({\n  resolve: {\n    alias: {\n      '@': '/src',\n      '@page': '/src/page'\n    }\n  },\n  plugins: [react()],\n})\n```\n\n**2nd Method**\n\n```javascript\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { resolve } from 'path';\n\nconst alias = {\n  // eslint-disable-next-line no-undef\n  '@': resolve(__dirname, './src'),\n};\n\nexport default defineConfig({\n  plugins: [react()],\n  resolve: {\n    alias,\n  },\n})\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahsan-chy%2Freact-js-advance-folder-structure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahsan-chy%2Freact-js-advance-folder-structure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahsan-chy%2Freact-js-advance-folder-structure/lists"}