├── .env.development
├── .env.example
├── .eslintrc.cjs
├── .gitignore
├── .prettierrc.cjs
├── README.md
├── index.html
├── jsconfig.json
├── package.json
├── public
    └── vite.svg
├── src
    ├── App.css
    ├── App.jsx
    ├── Routers
    │   └── Routers.jsx
    ├── assets
    │   └── react.svg
    ├── components
    │   ├── Button
    │   │   ├── button.module.css
    │   │   └── index.jsx
    │   ├── Inputs
    │   │   ├── index.jsx
    │   │   └── inputs.module.css
    │   ├── Modal
    │   │   ├── index.jsx
    │   │   └── modal.module.css
    │   ├── ToolTip
    │   │   ├── index.jsx
    │   │   └── toolTip.module.css
    │   └── index.js
    ├── db
    │   └── data.js
    ├── index.css
    ├── layout
    │   ├── Footer
    │   │   ├── footer.module.css
    │   │   └── index.jsx
    │   ├── Header
    │   │   ├── header.module.css
    │   │   └── index.jsx
    │   ├── Navbar
    │   │   ├── index.jsx
    │   │   └── navbar.module.css
    │   └── index.js
    ├── main.jsx
    ├── pages
    │   ├── About
    │   │   ├── about.module.css
    │   │   └── index.jsx
    │   ├── Home
    │   │   ├── home.module.css
    │   │   └── index.jsx
    │   ├── Login
    │   │   ├── index.jsx
    │   │   └── login.module.css
    │   ├── Payment
    │   │   ├── index.jsx
    │   │   └── payment.module.css
    │   ├── Shop
    │   │   ├── index.jsx
    │   │   └── shop.module.css
    │   ├── SignUp
    │   │   ├── index.jsx
    │   │   └── signUp.module.css
    │   └── index.js
    ├── services
    │   └── dataService.js
    ├── store
    │   └── store.js
    └── utils
    │   ├── constants
    │       ├── firebase.js
    │       └── strapi.js
    │   ├── helpers
    │       ├── arrays.js
    │       └── helpers.js
    │   └── hooks
    │       └── useIsMobile.js
└── vite.config.js


/.env.development:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/.env.development


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | REACT_APP_API_KEY=
 2 | REACT_APP_AUTH_DOMAIN=
 3 | REACT_APP_PROJECT_ID=
 4 | REACT_APP_STORAGE_BUCKET=
 5 | REACT_APP_MESSAGING_SENDER_ID=
 6 | REACT_APP_APP_ID=
 7 | REACT_APP_MEASUREMENT_ID=
 8 | REACT_APP_DATABASE_URL=
 9 | REACT_APP_FUNCTIONS_REGION=
10 | REACT_APP_KLARNA_BASE_URL=
11 | REACT_APP_KLARNA_USERNAME=
12 | REACT_APP_KLARNA_PASSWORD=
13 | REACT_APP_TYPESENSE_API_KEY=
14 | REACT_APP_TYPESENSE_HOST=
15 | REACT_APP_TYPESENSE_PORT=
16 | REACT_APP_TYPESENSE_PROTOCOL=
17 | REACT_APP_HOTJAR_ID=
18 | REACT_APP_HOTJAR_SNIPPET_VERSION=
19 | REACT_APP_CUSTOMER_API_KEY=
20 | REACT_APP_CUSTOMER_AUTH_DOMAIN=
21 | REACT_APP_CUSTOMER_PROJECT_ID=
22 | REACT_APP_CUSTOMER_STORAGE_BUCKET=
23 | REACT_APP_CUSTOMER_MESSAGING_SENDER_ID=
24 | REACT_APP_CUSTOMER_APP_ID=
25 | REACT_APP_CUSTOMER_MEASUREMENT_ID=
26 | REACT_APP_CALENDAR_API_KEY=
27 | REACT_APP_CALENDAR_CLIENT_ID=
28 | REACT_APP_AZURE_CLIENT_ID=
29 | REACT_APP_AZURE_REDIRECT_URI=


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react-refresh/only-export-components': [
16 |       'warn',
17 |       { allowConstantExport: true },
18 |     ],
19 |   },
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/.prettierrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   trailingComma: "es5",
3 |   tabWidth: 2,
4 |   semi: true,
5 |   singleQuote: true
6 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React JS Advance-Level Folder Structure
  2 | 
  3 | How to run the project
  4 | ```javascript
  5 | npm i
  6 | ```
  7 | and
  8 | ```javascript
  9 | npm start
 10 | ```
 11 | 
 12 | Before using This project install latest versions of following packages
 13 | 
 14 | - [Axios](https://www.npmjs.com/package/axios)
 15 | - Bootstrap - React Strap - MUI - AntD - Tailwind
 16 | - [React Icons](https://react-icons.github.io/react-icons/)
 17 | - React Router Dom [Latest React Router v6](https://reactrouter.com/en/dev/upgrading/reach#install-react-router-v6)
 18 | - Other Required packages
 19 | 
 20 | In the project I have just set Up most used folder structure:
 21 | 
 22 | ```javascript
 23 | React JS Advanced Folder Structure
 24 | .
 25 | ├── public
 26 | |     └── index.html
 27 | ├── src
 28 |     ├── assets
 29 |     |     ├── audios
 30 |     |     ├── icons
 31 |     |     ├── images
 32 |     |     └── videos
 33 |     ├── components
 34 |     |     ├── Button
 35 |     |     |     ├── index.jsx
 36 |     |     |     └── button.module.css
 37 |     |	  ├── inputs
 38 |     |     |     ├── index.jsx
 39 |     |     |     └── inputs.module.css
 40 |     |	  ├── Modal
 41 |     |     |     ├── index.jsx
 42 |     |     |     └── modal.module.css
 43 |     |	  └── Tooltip
 44 |     |           ├── index.jsx
 45 |     |           └── tooltip.module.css
 46 |     |     └── index.js
 47 |     ├──  db
 48 |     |     ├── productsData.js
 49 |     |     └── userData.js
 50 |     ├── layout
 51 |     |     ├── Header
 52 |     |     |     ├── index.jsx
 53 |     |     |     └── header.module.css
 54 |     |     ├── Navbar.jsx
 55 |     |     |     ├── index.jsx
 56 |     |     |     └── navbar.module.css
 57 |     |     ├── Breadcrumbs.jsx
 58 |     |     |     ├── index.jsx
 59 |     |     |     └── breadcrumbs.module.css
 60 |     |     └── Footer.jsx
 61 |     |           ├── index.jsx
 62 |     |           └── footer.module.css
 63 |     |     └── index.js
 64 |     ├── pages
 65 |     |     ├── Home
 66 |     |     |     ├── index.jsx
 67 |     |     |     └── home.module.css
 68 |     |     ├── Login
 69 |     |     |     ├── index.jsx
 70 |     |     |     └── login.module.css
 71 |     |     ├── Signup
 72 |     |     |     ├── index.jsx
 73 |     |     |     └── signup.module.css
 74 |     |     └── About
 75 |     |           ├── index.jsx
 76 |     |           └── about.module.css
 77 |     |     └── index.js
 78 |     ├── Routers
 79 |     |     └── Routers.js
 80 |     ├── store
 81 |     |     ├── action.js  
 82 |     |     ├── reducers.js  
 83 |     |     └── store.js
 84 |     ├── services
 85 |     |     ├── api.js          // API request functions
 86 |     |     └── dataUtils.js    // Data manipulation functions
 87 |     ├── utils
 88 |     |     ├── constants
 89 |     |     |     ├── Strapi.js
 90 |     |     |     └── Firebase.js
 91 |     |     ├── helpers
 92 |     |     |     ├── arrays.js
 93 |     |     |     └── helpers.js
 94 |     |     └── hooks  
 95 |     |           └── useIsMobile.js  
 96 |     ├── .env
 97 |     ├── app.js
 98 |     ├── index.css
 99 |     ├── index.js
100 | |
101 | ├── .gitignore
102 | ├── package-lock.json
103 | ├── package.json
104 | └── README.md
105 | ```
106 | 
107 | ## Folders include
108 | 
109 | - `Public`
110 | - `Assests`
111 | - `Components`
112 | - `db`
113 | - `layout`
114 | - `Pages`
115 | - `Routes`
116 | - `services`
117 | - `store`
118 | - `utils`
119 |   - `Constants`
120 |   - `helpers`
121 |   - `hooks`
122 | - `.env.example` / `.env.development`
123 | - `.eslintrc.cjs`
124 | - `.prettierrc.cjs`
125 | - `.jsonconfig.json`
126 | - `.gitignore`
127 | - `package.json`
128 | - `.vite.config.js`
129 | 
130 | ### Public
131 | 
132 | Public mainly contain root file **`index.html`** which help to run react project.
133 | 
134 | ### Assests
135 | 
136 | In Assets folder you can put following things.
137 | 
138 | - Images
139 | - Video
140 | - Icons
141 | - CSS
142 | 
143 | ### Components
144 | 
145 | Component 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
146 | 
147 | ### Constants
148 | 
149 | Constants 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.**
150 | An environment variable supports storing the API link at one location so that we do not need to change the Link in each file manually.
151 | 
152 | ```javascript
153 | const API_BASE_URL = 'https://api.example.com';
154 | const MAX_ITEMS_PER_PAGE = 10;
155 | ```
156 | 
157 | ### db
158 | 
159 | Here we provide JSON Formate of data in frontend in React APP.
160 | 
161 | - products data
162 | - users data
163 | 
164 | ### Helpers
165 | 
166 | Helpers 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.
167 | 
168 | - Array to Object
169 | - Object to Array
170 | - Date Formatting
171 | - Number Formatting
172 | - Validation
173 | - Api Request
174 | 
175 | [Helper Functions Details](https://chat.openai.com/share/32e7459b-dd5a-495a-a418-db2453361370)
176 | 
177 | ### Layout
178 | 
179 | This is just a special folder for **placing any layout based components.**
180 | 
181 | - Header
182 | - Footer
183 | - Breadcrumbs
184 | - Navbar
185 | - Sidebar
186 | 
187 | ### Pages
188 | 
189 | Pages will have all the pages which we will use in website.
190 | 
191 | ### Routes
192 | 
193 | Router will have all the Routes in website. Where we are going and where we want to go.
194 | 
195 | ### Services
196 | 
197 | In Services we put configuration file, like when you are using google firebase then your firebase config file will be in services folder.
198 | 
199 | The **"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.
200 | 
201 | ```javascript
202 | // services/apiService.js
203 | import axios from 'axios';
204 | 
205 | export function fetchUserData(userId) {
206 |   return axios.get(`/api/users/${userId}`);
207 | }
208 | ```
209 | 
210 | ### Store
211 | "store" folder in a React application typically refers to a directory where you manage your application's state using state management libraries like 
212 | - Redux 
213 | - Redux Toolkit
214 | - Zustand
215 | - Context Api
216 | - Mobx
217 | 
218 | ```javascript
219 | |-- store/
220 | |   |-- actions.js        // Redux action creators
221 | |   |-- reducers.js       // Redux reducers
222 | |   |-- store.js          // Redux store configuration
223 | ```
224 | 
225 | ### Utils
226 | 
227 | **`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. 
228 | - constants
229 | - helpers
230 | - hooks
231 | 
232 | Example: 
233 | ```javascript
234 | // utils/stringUtils.js
235 | export function capitalizeFirstLetter(str) {
236 |   return str.charAt(0).toUpperCase() + str.slice(1);
237 | }
238 | 
239 | // utils/dateUtils.js
240 | export function formatDate(date) {
241 |   const options = { year: 'numeric', month: 'long', day: 'numeric' };
242 |   return new Date(date).toLocaleDateString(undefined, options);
243 | }
244 | ```
245 | 
246 | ### .env.development
247 | 
248 | Env files are used to store sensitive credentials such as API keys.
249 | 
250 | ```javascript
251 | REACT_APP_API_URL=http://localhost:3001
252 | REACT_APP_DEBUG_MODE=true
253 | ```
254 | 
255 | ### .env.example
256 | 
257 | Env files are used to store sensitive credentials such as API keys.
258 | 
259 | ```javascript
260 | REACT_APP_API_KEY=
261 | REACT_APP_API_URL=
262 | ```
263 | 
264 | ### .eslintrc.cjs
265 | 
266 | ESLint, 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.
267 | 
268 | ### .gitignore
269 | 
270 | .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
271 | 
272 | ### .prettierrc.cjs
273 | 
274 | `.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.
275 | 
276 | - File Format & Naming
277 | - Configuration Setup
278 | - Export Configuration
279 | 
280 | ```javascript
281 | module.exports = {
282 |   printWidth: 80,
283 |   tabWidth: 2,
284 |   singleQuote: true,
285 |   trailingComma: 'es5',
286 | };
287 | ```
288 | 
289 | ### jscongig.json
290 | 
291 | - File Purpose
292 | - Configuration Setup:
293 | - JSON Format
294 | 
295 | ```javascript
296 | {
297 |   "compilerOptions": {
298 |     "baseUrl": "./",
299 |     "paths": {
300 |       "@/*": ["src/*"]
301 |     }
302 |   }
303 | }
304 | ```
305 | 
306 | ### package.json
307 | 
308 | package.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.
309 | 
310 | ### vite.config.js
311 | 
312 | - File Purpose:
313 | The 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.
314 | 
315 | - Configuration Setup:
316 | Inside 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.
317 | 
318 | - JavaScript Format:
319 | The 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.
320 | 
321 | ```javascript
322 | // vite.config.js
323 | export default {
324 |   server: {
325 |     port: 3000
326 |   },
327 |   build: {
328 |     minify: true
329 |   },
330 |   plugins: [/* your plugins here */]
331 | };
332 | ```
333 | 
334 | @import 
335 | ```javascript
336 | export default defineConfig({
337 |   resolve: {
338 |     alias: {
339 |       '@': '/src',
340 |       '@page': '/src/page'
341 |     }
342 |   },
343 |   plugins: [react()],
344 | })
345 | ```
346 | 
347 | **2nd Method**
348 | 
349 | ```javascript
350 | import { defineConfig } from 'vite'
351 | import react from '@vitejs/plugin-react'
352 | import { resolve } from 'path';
353 | 
354 | const alias = {
355 |   // eslint-disable-next-line no-undef
356 |   '@': resolve(__dirname, './src'),
357 | };
358 | 
359 | export default defineConfig({
360 |   plugins: [react()],
361 |   resolve: {
362 |     alias,
363 |   },
364 | })
365 | ```


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "baseUrl": "./",
4 |     "paths": {
5 |       "@/*": ["src/*"]
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "advance-level-folder-structure",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "start": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0",
15 |     "react-router": "^6.15.0",
16 |     "react-router-dom": "^6.15.0"
17 |   },
18 |   "devDependencies": {
19 |     "@types/react": "^18.2.15",
20 |     "@types/react-dom": "^18.2.7",
21 |     "@vitejs/plugin-react": "^4.0.3",
22 |     "eslint": "^8.45.0",
23 |     "eslint-plugin-react": "^7.32.2",
24 |     "eslint-plugin-react-hooks": "^4.6.0",
25 |     "eslint-plugin-react-refresh": "^0.4.3",
26 |     "vite": "^4.4.5"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/App.css


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import Routers from './Routers/Routers'
 2 | 
 3 | function App() {
 4 | 
 5 |   return (
 6 |     <div style={{textAlign:'center', width:'100vw'}}>
 7 |       <h1>Konnect with Ahsan</h1>
 8 |       <Routers />
 9 |     </div>
10 |   )
11 | }
12 | 
13 | export default App
14 | 


--------------------------------------------------------------------------------
/src/Routers/Routers.jsx:
--------------------------------------------------------------------------------
 1 | import { Routes, Route, BrowserRouter as Router } from 'react-router-dom';
 2 | import { Home, Login, Payment, Shop, SignUp } from '@/pages';
 3 | 
 4 | const Routers = () => {
 5 |   return (
 6 |     <div>
 7 |       <Router>
 8 |         <Routes>
 9 |           <Route path="/" element={<Home />} />
10 |           <Route path="/login" element={<Login />} />
11 |           <Route path="/payment" element={<Payment />} />
12 |           <Route path="/shop" element={<Shop />} />
13 |           <Route path="/sign-up" element={<SignUp />} />
14 |           {/* <Route path="*" element={<ErrorPage />} /> */}
15 |         </Routes>
16 |       </Router>
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default Routers;
22 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/Button/button.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/components/Button/button.module.css


--------------------------------------------------------------------------------
/src/components/Button/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './button.module.css'
 3 | 
 4 | const index = () => {
 5 |   return (
 6 |     <button>
 7 |       Button
 8 |     </button>
 9 |   )
10 | }
11 | 
12 | export default index
13 | 


--------------------------------------------------------------------------------
/src/components/Inputs/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './inputs.module.css'
 3 | 
 4 | const index = () => {
 5 |   return (
 6 |     <div>
 7 |       <input type='text' placeholder='Enter Your name'/>
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default index
13 | 


--------------------------------------------------------------------------------
/src/components/Inputs/inputs.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/components/Inputs/inputs.module.css


--------------------------------------------------------------------------------
/src/components/Modal/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './modal.module.css'
 3 | 
 4 | const index = () => {
 5 |   return (
 6 |     <div>
 7 |       Modal
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default index
13 | 


--------------------------------------------------------------------------------
/src/components/Modal/modal.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/components/Modal/modal.module.css


--------------------------------------------------------------------------------
/src/components/ToolTip/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './toolTip.module.css'
 3 | 
 4 | const index = () => {
 5 |   return (
 6 |     <div>
 7 |       ToolTip
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default index
13 | 


--------------------------------------------------------------------------------
/src/components/ToolTip/toolTip.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/components/ToolTip/toolTip.module.css


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | 
2 | export { default as Button } from "./Button";
3 | export { default as Inputs } from "./Inputs";
4 | export { default as Modal } from "./Modal";
5 | export { default as ToolTip } from "./ToolTip";


--------------------------------------------------------------------------------
/src/db/data.js:
--------------------------------------------------------------------------------
 1 | export const doctors =[
 2 |     {
 3 |         doctorId:1,
 4 |         doctorName:'Dr. Rashid',
 5 |         experience: '15',
 6 |         specialist: 'Gestriologist',
 7 |         patientsReviews: 1500,
 8 |         satisfactionRate: '99%',
 9 |         image: '/images/doctor.jpg'
10 |     },
11 |     {
12 |         doctorId:2,
13 |         doctorName:'Dr. Shireen Rehmat Ullah',
14 |         experience: '5',
15 |         specialist: 'Dermatologist',
16 |         patientsReviews: 70,
17 |         satisfactionRate: '91%',
18 |         image: '/images/d4.jpg'
19 |     },
20 |     {
21 |         doctorId:3,
22 |         doctorName:'Dr. Zeba Anwar',
23 |         experience: '12',
24 |         specialist: 'Physiotherapist',
25 |         patientsReviews: 230,
26 |         satisfactionRate: '90%',
27 |         image: '/images/d3.jpg'
28 |     },
29 |     {
30 |         doctorId:4,
31 |         doctorName:'Dr. Iqbal Nabi Soomro',
32 |         experience: '20',
33 |         specialist: 'Gynecologist',
34 |         patientsReviews: 450,
35 |         satisfactionRate: '94%',
36 |         image: '/images/d2.png'
37 |     }
38 | ]
39 | export const specialists =[
40 |     {
41 |         specialistiD:1,
42 |         specialistTitle: "Gynecologist",
43 |         image: '/images/icons/Gynecologist.png',
44 |     },
45 |     {
46 |         specialistiD:2,
47 |         specialistTitle: "Child Specialist",
48 |         image: '/images/icons/Child Specialist.png',
49 |     },
50 |     {
51 |         specialistiD:3,
52 |         specialistTitle: "Consultant Physician",
53 |         image: '/images/icons/Consultant Physician.png',
54 |     },
55 |     
56 |     {
57 |         specialistiD:4,
58 |         specialistTitle: "Neurologist",
59 |         image: '/images/icons/Neurologist.png',
60 |     },
61 |     {
62 |         specialistiD:5,
63 |         specialistTitle: "Psychiatrist",
64 |         image: '/images/icons/Psychiatrist.png',
65 |     },
66 |     {
67 |         specialistiD:6,
68 |         specialistTitle: "Dentist",
69 |         image: '/images/icons/Dentist.png',
70 |     },
71 |     {
72 |         specialistiD:7,
73 |         specialistTitle: "Gestroenterologist",
74 |         image: '/images/icons/Gestroenterologist.png',
75 |     },
76 |     {
77 |         specialistiD:8,
78 |         specialistTitle: "Speech Therapist",
79 |         image: '/images/icons/Speech Therapist.png',
80 |     },
81 |     
82 | ]
83 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 3 |   line-height: 1.5;
 4 |   font-weight: 400;
 5 | 
 6 |   color-scheme: light dark;
 7 |   color: chocolate;
 8 |   background-color: #242424;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   -webkit-text-size-adjust: 100%;
15 | }
16 | 
17 | a {
18 |   font-weight: 500;
19 |   color: #646cff;
20 |   text-decoration: inherit;
21 | }
22 | a:hover {
23 |   color: #535bf2;
24 | }
25 | 
26 | body {
27 |   margin: 0;
28 |   display: flex;
29 |   place-items: center;
30 |   min-width: 320px;
31 |   min-height: 100vh;
32 | }
33 | 
34 | h1 {
35 |   font-size: 3.2em;
36 |   line-height: 1.1;
37 | }


--------------------------------------------------------------------------------
/src/layout/Footer/footer.module.css:
--------------------------------------------------------------------------------
1 | .root{
2 |     color: #fff;
3 | }


--------------------------------------------------------------------------------
/src/layout/Footer/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './footer.module.css'
 3 | 
 4 | const Footer = () => {
 5 |   return (
 6 |     <div>
 7 |       Footer
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default Footer
13 | 


--------------------------------------------------------------------------------
/src/layout/Header/header.module.css:
--------------------------------------------------------------------------------
1 | .root{
2 |     color: #fff;
3 | }


--------------------------------------------------------------------------------
/src/layout/Header/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './header.module.css'
 3 | 
 4 | const Header = () => {
 5 |   return (
 6 |     <div className={styles.root}>
 7 |       Header
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default Header
13 | 


--------------------------------------------------------------------------------
/src/layout/Navbar/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './navbar.module.css'
 3 | 
 4 | const Navbar = () => {
 5 |   return (
 6 |     <div>
 7 |       Navbar
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default Navbar
13 | 


--------------------------------------------------------------------------------
/src/layout/Navbar/navbar.module.css:
--------------------------------------------------------------------------------
1 | .root{
2 |     color: #fff;
3 | }


--------------------------------------------------------------------------------
/src/layout/index.js:
--------------------------------------------------------------------------------
1 | export { default as Header } from './Header';
2 | export { default as Footer } from './Footer';
3 | export { default as Navbar } from './Navbar';
4 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/pages/About/about.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/pages/About/about.module.css


--------------------------------------------------------------------------------
/src/pages/About/index.jsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/pages/About/index.jsx


--------------------------------------------------------------------------------
/src/pages/Home/home.module.css:
--------------------------------------------------------------------------------
1 | .root{
2 |     color: chocolate;
3 | }


--------------------------------------------------------------------------------
/src/pages/Home/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './home.module.css'
 3 | import { Button, Inputs, Modal, ToolTip } from '@/components'
 4 | import { Header, Footer, Navbar } from '@/layout'
 5 | 
 6 | const index = () => {
 7 |   return (
 8 |     <div className={styles.root}>
 9 |       <Header />
10 |       Home Pag
11 |       <br/>
12 |       {/* <Button/>
13 |       <Inputs/>
14 |       <Modal/>
15 |       <ToolTip/> */}
16 |     </div>
17 |   )
18 | }
19 | 
20 | export default index
21 | 


--------------------------------------------------------------------------------
/src/pages/Login/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './login.module.css'
 3 | 
 4 | const index = () => {
 5 |   return (
 6 |     <div>
 7 |       Login
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default index
13 | 


--------------------------------------------------------------------------------
/src/pages/Login/login.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/pages/Login/login.module.css


--------------------------------------------------------------------------------
/src/pages/Payment/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './payment.module.css'
 3 | 
 4 | const index = () => {
 5 |   return (
 6 |     <div>
 7 |       Payment
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default index
13 | 


--------------------------------------------------------------------------------
/src/pages/Payment/payment.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/pages/Payment/payment.module.css


--------------------------------------------------------------------------------
/src/pages/Shop/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './shop.module.css'
 3 | 
 4 | const index = () => {
 5 |   return (
 6 |     <div>
 7 |       Shop
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default index
13 | 


--------------------------------------------------------------------------------
/src/pages/Shop/shop.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/pages/Shop/shop.module.css


--------------------------------------------------------------------------------
/src/pages/SignUp/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './signUp.module.css'
 3 | 
 4 | const index = () => {
 5 |   return (
 6 |     <div>
 7 |         Signup
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default index
13 | 


--------------------------------------------------------------------------------
/src/pages/SignUp/signUp.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/pages/SignUp/signUp.module.css


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
1 | 
2 | export { default as Home } from "./Home";
3 | export { default as Payment } from "./Payment";
4 | export { default as Shop } from "./Shop";
5 | export { default as SignUp } from "./SignUp";
6 | export { default as Login } from "./Login";


--------------------------------------------------------------------------------
/src/services/dataService.js:
--------------------------------------------------------------------------------
 1 | // services/dataService.js
 2 | export const fetchUserData = async (userId) => {
 3 |     try {
 4 |       const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
 5 |       if (!response.ok) {
 6 |         throw new Error('Network response was not ok');
 7 |       }
 8 |       const data = await response.json();
 9 |       return data;
10 |     } catch (error) {
11 |       console.error('Error fetching user data:', error);
12 |       return null;
13 |     }
14 |   };
15 |   


--------------------------------------------------------------------------------
/src/store/store.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/store/store.js


--------------------------------------------------------------------------------
/src/utils/constants/firebase.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/utils/constants/firebase.js


--------------------------------------------------------------------------------
/src/utils/constants/strapi.js:
--------------------------------------------------------------------------------
1 | const STRAPI_API_URL = "http://localhost:1337/api" 
2 | const STRAPI_MEDIA_URL = "http://localhost:1337"
3 | const STRAPI_PRODUCTS_API_URL = "http://localhost:1337/api/products"
4 | const ACCESS_TOKEN="47e9095912b5457963916d3fc90ed6d2ed0552588e55faa73d0278479e018d8bed3e1869965610444d418b7d2dbdd4c08fc604327e359bdb8e9574581276a5220b9eecd38e70bddf4c2f5caf6f55f4a2d49ced66fc04dd1230d08ed20cec94021ed9d6e9902d553469c8ff2971d6abd7646229a6b7efe73eea27e106407406d0";
5 | 
6 | export { ACCESS_TOKEN, STRAPI_MEDIA_URL, STRAPI_API_URL,STRAPI_PRODUCTS_API_URL }


--------------------------------------------------------------------------------
/src/utils/helpers/arrays.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/utils/helpers/arrays.js


--------------------------------------------------------------------------------
/src/utils/helpers/helpers.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/utils/helpers/helpers.js


--------------------------------------------------------------------------------
/src/utils/hooks/useIsMobile.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahsan-chy/React-JS-Advance-Folder-Structure/84ae0fa277dd8775aec5644810d512ad1e882316/src/utils/hooks/useIsMobile.js


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | 
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   resolve: {
 8 |     alias: {
 9 |       '@': '/src',
10 |       '@page': '/src/page'
11 |     }
12 |   },
13 |   plugins: [react()],
14 | })
15 | 


--------------------------------------------------------------------------------