Folder Structure

The folder structure of the Jumbo template is self-explanatory and strictly as per the React coding rules.
1. public
The public folder contains the  HTML template of our app. It contains the public assets, images and Javascript used for rendering the application. For example, web font files, images and other assets which don’t come as node packages are kept in this folder.
2. src
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-db
This 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.
​
@jumbo
This 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.
​
components
This 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.
​
constants
This 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.
​
utils
While 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.

@coremat
A UI starter-kit with highly reusable react and material-ui based components. for detail click here​
 '

I18n
This 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.
​
redux
As 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.
​
routes
All 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. 
​
services
This 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.
​
theme
This 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. 
​
​
​
​
​

Installation and Setup - Previous

Project Setup

Next - Structure

Layouts

Last modified 11mo ago

Copy link