Folder Structure

This chapter gives the overview of folder structure and content in the next.js version of the Jumbo.

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

• @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.

• 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.

• module

  All the code related to the content of the template files in this folder.

• pages This folder is special folder of next.js. This folder must be present in all the next.js based projects. The file names in this folder are the url paths and the content in the file is the content that renders on that path. For example, you are running the project on the base path : - http://yourdomain.com Now, if there is a file name "sign-in" in the pages folder, then you can access the path -

  http://yourdomain.com/sign-in and the content that will load on this path will be the code that is written in the sign-in file.

• public It contains the images, media, fonts and other raw material used in the template.

• 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.

• 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.

• package.json This file contains the information on dependencies installed and used in the template. Information includes the name and version of the dependency.