# source

The source is the crema's default app. That is built with the Context APIs(State Management). Source has the default folder structure like below<br>

<figure><img src="/files/5vf5M0qXggQ7WU5elkpD" alt="Crema source folder structure"><figcaption><p>Source folder structure</p></figcaption></figure>

```javascript
// Accounts route configuration with permission
export const accountPagesConfigs = [
  {
    permittedRole: [RoutePermittedRole.User, RoutePermittedRole.Admin],
    path: '/my-profile',
    element: <Account />,
  },
];

```

As shown in the above image source have the src folder and some basic configuration files.

the **src** folder has some subfolders as below describe.

1. assets: images of the related app

2. core:  this is the core folder that has routes configurations and app layout of a particular app\
   We have 2 folders inside this like below\
   \
   I. AppLayout: In this folder, we have a single file for app layout configuration like below.<br>

   ```javascript
   import React from 'react';
   import { useRoutes } from 'react-router-dom';
   import { Layouts } from '@crema/components/AppLayout';
   import AppContentView from '@crema/components/AppContentView';
   import generateRoutes from '@crema/utility/RouteGenerator';
   import { useAuthUser } from '@crema/utility/AuthHooks';
   import { useLayoutContext } from '@crema/context/LayoutContextProvider';
   import {
     anonymousStructure,
     authorizedStructure,
     unAuthorizedStructure,
   } from '../AppRoutes';
   import routesConfig from '../AppRoutes/routeConfig';

   const AppLayout = () => {
     const { navStyle } = useLayoutContext();
     const { user, isAuthenticated } = useAuthUser();
     const AppLayout = Layouts[navStyle];
     const generatedRoutes = generateRoutes({
       isAuthenticated: isAuthenticated,
       userRole: user?.role,
       unAuthorizedStructure,
       authorizedStructure,
       anonymousStructure,
     });
     const routes = useRoutes(generatedRoutes);

     return (
       <>
         {isAuthenticated ? (
           <AppLayout routes={routes} routesConfig={routesConfig} />
         ) : (
           <AppContentView routes={routes} />
         )}
       </>
     );
   };

   export default AppLayout;
   ```

   \
   II. AppRoutes: In this folder, we have all routes with the permission and left sidebar configuration like below.

   ```javascript
   //Left Sidebar configuration
   const routesConfig = [
     {
       id: 'extra-pages',
       title: 'Extra Pages',
       messageId: 'sidebar.pages.extraPages',
       type: 'group',
       children: [
         {
           id: 'account',
           title: 'Account',
           messageId: 'sidebar.pages.extraPages.account', //
           type: 'item',
           permittedRole: [RoutePermittedRole.User, RoutePermittedRole.Admin],
           icon: <MdOutlineManageAccounts />,
           url: '/my-profile',
         },
         ...
       ],
     }
     ...
   ]
   ```

   We have the above configuration of the left sidebar.<br>

   ```javascript
   // Accounts route configuration with permission
   export const accountPagesConfigs = [
     {
       permittedRole: [RoutePermittedRole.User, RoutePermittedRole.Admin],
       path: '/my-profile',
       element: <Account />,
     },
   ];

   ```

   We have multiple files for all modules. each module has its route config file&#x20;

3. module: In this folder, we have multiple modules. Here we can write our full module or we can directly access the library module like below. by using this we can use the same module in the multiple apps<br>

   ```javascript
   // Directly accessing the lib module

   import { SigninFirebase } from '@crema/modules/auth/SignIn';

   export default SigninFirebase;
   ```

   \ <br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cremawork.com/v-4/overview/folder-structure/apps/source.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.