The folder structure of the Jumbo template is self-explanatory and strictly as per the React coding rules.
The src is the folder where we write the React Code. It is the most important folder of the package. You can find all the pages, components, modules, apps, etc. in this folder. This is the main workplace to start writing/extending the application source code. The src content is described below:-
- @fake-dbThis folder contains the dummy database used in the template. The dummy data refers to the data that we have used to show the lists, tables, applications, and other components in the template. The folder contains sub-folders and files with clear and self-explanatory to give the user an idea about which file or folder contains the data of which part of the template.
- @jumboThis folder contains the most important files of the template. It contains files related to layouts, customizer, constants, and some utility functions. This folder has three sub-folders.
- componentsThis folder contains many sub-folders that contain the code related to the layout of the template. If something needs to be updated in the layout, header, sidebar, or customizer of the template, this folder should be looked upon to. This folder can also be called an entry point of the template. Apart from the layout code, this folder also includes the code of some common components used throughout the template.
- constantsThis folder contains the constants used throughout the template. Constants refer to some primitive variables whose values are fixed and should be the same throughout the template. For example, the constants that we use in the Redux, the error messages, constants related to theme default settings, these all are defined in this folder in separate files.
- utilsWhile working on a project, we use the same function in different parts of the project, so we keep those functions in a separate file. This folder contains a number of such files that contain some reusable functions.
- I18nThis folder contains the files related to languages used in the template. This folder is important for multi-lingual templates. When we use multiple languages, we don't render a text directly on the screen, instead, we define a unique key for that text and then render it on the screen, and in this folder, we keep those unique ids and its corresponding text according to the different languages.
- reduxAs the name suggests, this folder contains code related to the Redux. In the sub-folders that exist inside this folder, we define the global states that we use in different components throughout the template and the functions to update those global states.
- routesAll the code related to the content of the template files in this folder. This folder contains a file called "index.js" where we define all the routes and pass them the component that would be rendered upon that route. Apart from the index.js file, this folder contains the components that would be rendered upon a route defined in index.js.
- servicesThis folder contains the fake APIs that are used throughout the template. Apart from that, it also contains the configuration and functions of authentication services (firebase, jwt and basic) used for authentication in this template.
- themeThis folder contains two files named "GlobalCss.js" and "defaultTheme.js". GlobalCss.js contains the global CSS classes that can be used throughout the template. The "defaultTheme.js" file contains the template default CSS settings like primary color, a secondary color, other color variants, spacing, and other settings.
3. package.json This file contains the information on dependencies installed and used in the template. Information includes the name and version of the dependency.